/* ACTUARUS — styles propres aux écrans (s'appuient uniquement sur les tokens). */

/* ---------- Listes de deals ---------- */
.deal-cards { display: none; }
.list-search { width: 240px; }
.list-search > .icon { position: absolute; left: 12px; color: var(--fg-3); pointer-events: none; }
.list-search .input { min-height: 38px; }
.list-sort { width: auto; min-height: 38px; }
.deal-table .cell-title { display: inline-block; }
.deal-table .row-link { color: var(--fg-1); }
.deal-table .row-link:hover { text-decoration: none; }
.deal-table td.num .mono { font-size: var(--text-lg); }
@media (max-width: 900px) {
  .deal-table-wrap { display: none; }
  .deal-cards { display: flex; }
  .list-search { width: 100%; }
  .toolbar > .row { width: 100%; }
  .toolbar > .row .list-search { flex: 1; }
}
@media (max-width: 640px) {
  .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); scrollbar-width: none; }
  .chip { flex: none; }
}
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Assistant (nouveau deal, dépôt) ---------- */
.wizard-actions { display: flex; justify-content: space-between; gap: var(--space-3); }
.option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 760px) { .option-grid { grid-template-columns: 1fr; } }
.counterparty-found { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--teal-50); color: var(--fg-1); }
.counterparty-found > .icon { margin-left: auto; color: var(--teal-700); }
.deposit-progress { display: flex; flex-direction: column; gap: var(--space-2); }
.deposit-progress li { display: flex; align-items: center; gap: var(--space-2); color: var(--fg-3); }
.deposit-progress li .spinner { width: 15px; height: 15px; border-width: 2px; color: var(--navy-500); }
.deposit-progress li.is-done { color: var(--teal-700); }
.deposit-progress li.is-current { color: var(--fg-1); font-weight: 500; }
.deposit-progress li.is-error { color: var(--red-700); }

/* ---------- Détail d'un deal ---------- */
.deal-header { display: flex; flex-direction: column; gap: var(--space-4); }
.deal-title { margin-top: var(--space-1); }
.kv-compact { grid-template-columns: 1fr; gap: 2px; }
.kv-compact dt { margin-top: var(--space-2); }
.kv-compact dt:first-child { margin-top: 0; }
.checklist { display: flex; flex-direction: column; gap: var(--space-2); }
.checklist li { display: flex; align-items: center; gap: var(--space-2); color: var(--fg-3); }
.checklist li.is-done { color: var(--teal-700); }
.quote { margin: 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--border-strong); background: var(--bg-surface-2); border-radius: var(--radius-xs); white-space: pre-wrap; }
.disclosure { border-top: 1px solid var(--border-2); padding-top: var(--space-3); }
.disclosure summary { cursor: pointer; color: var(--link); font-weight: 500; }
.disclosure[open] summary { margin-bottom: var(--space-3); }
.guarantee { display: flex; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap; }
.guarantee-text p { line-height: 1.55; }
.guarantee > .stack-sm { flex: 1 1 280px; }
@media (max-width: 640px) { .countdown { width: 100%; } }

/* Votes du séquestre */
.vote-panel { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-2); }
.panel-body .vote-panel { border-top: 1px solid var(--border-2); padding-top: var(--space-4); }
.vote-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.vote-row { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-surface-2); font-size: var(--text-sm); color: var(--fg-2); }
.vote-row .badge { align-self: flex-start; }
.detail-aside .vote-list, .admin-votes .vote-list { grid-template-columns: 1fr; }
.detail-aside .vote-row { flex-direction: row; justify-content: space-between; align-items: center; }
@media (max-width: 640px) { .vote-list { grid-template-columns: 1fr; } .vote-row { flex-direction: row; justify-content: space-between; align-items: center; } }

/* Notation */
.stars { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.stars legend { width: 100%; margin-bottom: var(--space-2); }
.stars .field-hint { width: 100%; }
.star { cursor: pointer; color: var(--border-strong); padding: 2px; border-radius: var(--radius-xs); }
.star .icon { width: 28px; height: 28px; }
.stars:has(input:checked) .star { color: var(--amber-500); }
.stars .star:has(input:checked) ~ .star { color: var(--border-strong); }
.star:has(input:focus-visible) { box-shadow: var(--shadow-focus); }
.star:has(input:checked) .icon, .stars:has(input:checked) .star:not(:has(input:checked) ~ .star) .icon { fill: currentColor; }
.stars .star:has(input:checked) ~ .star .icon { fill: none; }
.stars-read { color: var(--amber-500); letter-spacing: 2px; }
.rating-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.rating-card { padding: var(--space-4); border-radius: var(--radius-md); background: var(--bg-surface-2); display: flex; flex-direction: column; gap: var(--space-2); }
@media (max-width: 640px) { .rating-grid { grid-template-columns: 1fr; } }

/* ---------- Conversation ---------- */
.conversation { display: flex; flex-direction: column; overflow: hidden; }
.conversation-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-2); }
.msg-list { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-6); max-height: 460px; min-height: 160px; overflow-y: auto; background: var(--bg-app); }
.msg { display: flex; gap: var(--space-2); align-items: flex-end; max-width: 82%; }
.msg.is-mine { align-self: flex-end; flex-direction: row-reverse; }
.msg-bubble { background: var(--bg-surface); border: 1px solid var(--border-2); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xs); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.msg.is-mine .msg-bubble { background: var(--navy-50); border-color: var(--navy-100); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg); }
.msg.is-admin .msg-bubble { background: var(--bg-inverse); color: var(--fg-inverse); border-color: var(--bg-inverse); }
.msg.is-admin .text-muted { color: inherit; opacity: 0.7; }
.msg-meta { display: flex; gap: var(--space-2); align-items: baseline; font-size: var(--text-sm); flex-wrap: wrap; }
.msg-handle { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-2); overflow-wrap: anywhere; }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-empty, .msg-loading { align-self: center; color: var(--fg-3); padding: var(--space-6) 0; }
.attachment { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-1); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--fg-1); text-align: left; max-width: 100%; }
.attachment:hover { border-color: var(--border-strong); background: var(--bg-surface-2); }
.attachment-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.msg.is-admin .attachment { color: var(--fg-1); }
.composer { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-2); }
.composer-input { min-height: 64px; }
.composer-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.composer-actions [type="submit"] { margin-left: auto; }
.composer-file { cursor: pointer; }
.composer-file:focus-within { box-shadow: var(--shadow-focus); }
@media (max-width: 640px) {
  .conversation-head, .msg-list, .composer { padding-left: var(--space-4); padding-right: var(--space-4); }
  .msg { max-width: 94%; }
}

/* Page Messages */
.messages-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.conversation-list { padding: var(--space-2); max-height: 70vh; overflow-y: auto; }
.conversation-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); color: var(--fg-1); }
.conversation-link:hover { background: var(--bg-surface-2); text-decoration: none; }
.conversation-link[aria-current="true"] { background: var(--navy-50); }
.conversation-link .grow { display: flex; flex-direction: column; min-width: 0; }
.conversation-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-link .badge { display: none; }
.conversation-pane { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.conversation-pane-head { display: flex; justify-content: space-between; align-items: center; }
.conversation-pane-head .link-back { visibility: hidden; }
@media (max-width: 900px) {
  .messages-layout { grid-template-columns: 1fr; }
  .messages-layout.has-selection .conversation-list { display: none; }
  .messages-layout:not(.has-selection) .conversation-pane { display: none; }
  .conversation-pane-head .link-back { visibility: visible; }
  .conversation-list { max-height: none; }
}

/* ---------- Actions attendues ---------- */
.notif-card { flex-direction: row; align-items: center; gap: var(--space-3); }
.notif-card .grow { display: flex; flex-direction: column; min-width: 0; }
.notif-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-surface-2); color: var(--fg-3); flex: none; }
.notif-icon.is-me { background: var(--amber-50); color: var(--amber-700); }
@media (max-width: 640px) { .notif-card { flex-wrap: wrap; } .notif-card .badge { margin-left: 48px; } }

/* ---------- Invitation reçue ---------- */
.invitation { width: min(520px, 100%); display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.invitation-brand { justify-content: center; }
.invitation-card { width: 100%; padding: var(--space-6); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.invitation-from { color: var(--fg-2); }
.invitation-kv { width: 100%; text-align: left; margin-top: var(--space-3); }
.invitation-card .callout { text-align: left; width: 100%; }
.invitation-actions { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-3); width: 100%; margin-top: var(--space-2); }
.invitation-foot { text-align: center; }
@media (max-width: 480px) { .invitation-actions { grid-template-columns: 1fr; } .invitation-actions .btn-primary { order: -1; } .invitation-card { padding: var(--space-4); } }

/* ---------- Arbitrage ---------- */
.statement { display: flex; gap: var(--space-3); padding-left: var(--space-4); border-left: 3px solid var(--border-strong); }
.statement-buyer { border-left-color: var(--red-500); }
.statement p + p { margin-top: var(--space-1); }
.history { display: flex; flex-direction: column; gap: var(--space-3); }
.history li { display: grid; grid-template-columns: 170px 1fr; gap: var(--space-3); }
@media (max-width: 640px) { .history li { grid-template-columns: 1fr; gap: 0; } }
.file-list { display: flex; flex-direction: column; gap: var(--space-2); }
.file-list .attachment { width: 100%; }

/* ---------- Paramètres ---------- */
.settings { max-width: var(--content-narrow); }
.users-table td { vertical-align: middle; }
/* Tableau large : défilement horizontal dans son cadre plutôt que débordement de la page. */
.table-scroll { position: relative; overflow-x: auto; max-width: 100%; }
/* Tableaux empilés sur mobile (primes de parrainage) : une carte par ligne. */
.stack-table td { vertical-align: middle; }
@media (max-width: 900px) {
  .stack-table thead { display: none; }
  .stack-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--border-2); }
  .stack-table td { border: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
  .stack-table td.num { text-align: left; }
}
.users-table .user-actions { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
@media (max-width: 900px) {
  .users-table thead { display: none; }
  .users-table tr { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); padding: var(--space-4); border-bottom: 1px solid var(--border-2); }
  .users-table td { border: 0; padding: 0; }
  .users-table td.num { text-align: left; }
}

/* ---------- Tableau de bord d'administration ---------- */
.dashboard-body { display: flex; flex-direction: column; gap: var(--space-5); transition: opacity var(--dur-2); }
.dashboard-body.is-refreshing { opacity: .55; }
.section-title { font-size: var(--text-lg); font-weight: 600; margin-top: var(--space-2); }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.stat-tile { background: var(--bg-surface); border: 1px solid var(--border-2); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.stat-label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--fg-2); }
.stat-label svg { color: var(--fg-3); flex: none; }
.stat-value { font-size: 26px; font-weight: 600; color: var(--fg-1); line-height: 1.2; overflow-wrap: anywhere; }
.stat-sub { font-size: var(--text-sm); color: var(--fg-3); }
.hero-figure { gap: var(--space-2); }
.hero-value { font-size: 48px; font-weight: 600; color: var(--fg-1); line-height: 1.1; overflow-wrap: anywhere; }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-4); }
.chart { position: relative; }
.chart-tip { position: absolute; transform: translate(-50%, -100%); background: var(--bg-inverse); color: var(--fg-inverse); font-size: var(--text-sm); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); white-space: nowrap; pointer-events: none; z-index: 2; }
/* Colonnes : une série, base unique, bout arrondi de 4 px, 24 px au plus, filet de base de 1 px. */
.col-chart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; height: 180px; border-bottom: 1px solid var(--border-2); padding-top: var(--space-4); }
.col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; outline: none; cursor: default; }
.col-bar { width: min(24px, 70%); background: var(--navy-500); border-radius: 4px 4px 0 0; min-height: 0; }
.col:hover .col-bar, .col:focus-visible .col-bar { background: var(--navy-600, var(--navy-500)); }
.col:focus-visible { box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.col-label { position: absolute; bottom: -22px; font-size: 11px; color: var(--fg-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.col:nth-child(odd) .col-label { visibility: hidden; }
.chart .col-chart { margin-bottom: 26px; }
/* Entonnoir : barres horizontales, valeur et part en étiquette directe (encre de texte). */
.funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.funnel-row { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; align-items: center; gap: var(--space-3); outline: none; }
.funnel-row:focus-visible { box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.funnel-label { font-size: var(--text-sm); color: var(--fg-2); }
.funnel-track { height: 20px; background: var(--bg-surface-2); border-radius: 0 4px 4px 0; overflow: hidden; }
.funnel-bar { display: block; height: 100%; background: var(--navy-500); border-radius: 0 4px 4px 0; }
.funnel-value { font-size: var(--text-sm); font-weight: 600; color: var(--fg-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
  .hero-value { font-size: 36px; }
  .chart-grid { grid-template-columns: 1fr; }
  .funnel-row { grid-template-columns: 1fr auto; }
  .funnel-track { grid-column: 1 / -1; grid-row: 2; }
}