/* Selfa Desk — mise en page du back-office de la banque et du superviseur. */

body.desk { min-height: 100vh; background: linear-gradient(90deg, #0A0C1C 0 264px, var(--bg) 264px); }
body.desk .main { margin-inline-start: 264px; }

/* --- Barre latérale : toujours sombre, comme une console --- */
.side {
  position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: 264px; z-index: 30; display: flex; flex-direction: column; gap: 18px; padding: 20px 14px 18px;
  background: radial-gradient(120% 50% at 0% 0%, rgba(91, 75, 245, 0.45) 0%, transparent 60%),
              radial-gradient(90% 40% at 100% 100%, rgba(14, 165, 160, 0.22) 0%, transparent 60%), #0A0C1C;
  color: #DCDEF5; border-inline-end: 1px solid rgba(255, 255, 255, 0.06); overflow-y: auto;
}
.side .mark-name { color: #fff; }
.side .mark-name .ar { color: #5EEAD4; }
.side .tagline { font-size: 11.5px; color: rgba(220, 222, 245, 0.62); margin-top: 1px; }
.side nav { display: grid; gap: 2px; }
.side .group { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(220, 222, 245, 0.42); padding: 12px 12px 6px; }
.side nav a {
  position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 11px; color: rgba(220, 222, 245, 0.78);
  font-weight: 560; font-size: 13.5px; text-decoration: none; transition: background .15s ease, color .15s ease;
}
.side nav a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; text-decoration: none; }
.side nav a.on { background: linear-gradient(90deg, rgba(141, 128, 255, 0.28), rgba(141, 128, 255, 0.08)); color: #fff; box-shadow: inset 0 0 0 1px rgba(141, 128, 255, 0.25); }
.side nav a.on::before { content: ""; position: absolute; inset-inline-start: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #8D80FF, #2DD4BF); }
.side nav a svg { width: 18px; height: 18px; flex: none; opacity: 0.9; }
.side nav a .count { margin-inline-start: auto; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(250, 178, 25, 0.18); color: #FBBF24; }
.side .foot { margin-top: auto; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); font-size: 11.5px; line-height: 1.55; color: rgba(220, 222, 245, 0.66); }
.side .foot b { color: #fff; font-weight: 650; }

/* --- Zone principale --- */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 32px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.topbar > div:first-child { flex: 1 1 320px; min-width: 0; }
.topbar .tools { flex: 0 0 auto; }
.topbar h1 { font-size: 22px; font-weight: 750; letter-spacing: -0.03em; }
.topbar .sub { color: var(--text-3); font-size: 13px; margin-top: 2px; }
.topbar .tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.content { padding: 24px 32px 64px; }
.filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.filters .label { font-size: 12px; color: var(--text-3); font-weight: 600; margin-inline-end: 2px; }

.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; }
.c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c9 { grid-column: span 9; } .c12 { grid-column: span 12; }
.mt { margin-top: 18px; }

/* --- Carte vedette --- */
.hero {
  position: relative; overflow: hidden; border-radius: 22px; padding: 22px 24px; color: #fff; background: var(--aurora);
  box-shadow: var(--shadow-lg); isolation: isolate; min-height: 230px; display: flex; flex-direction: column;
}
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(60% 80% at 100% 0%, rgba(255, 255, 255, 0.22), transparent 60%),
  radial-gradient(50% 60% at 0% 100%, rgba(45, 212, 191, 0.35), transparent 70%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.18;
  background-image: linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
  background-size: 28px 28px; mask-image: radial-gradient(70% 90% at 80% 10%, #000, transparent 70%); }
.hero .eyebrow { color: rgba(255, 255, 255, 0.78); }
.hero .figure { font-size: 52px; font-weight: 800; letter-spacing: -0.045em; line-height: 1.05; margin-top: 8px; }
.hero .figure small { font-size: 18px; font-weight: 650; letter-spacing: 0; opacity: 0.8; margin-inline-start: 4px; }
.hero .sub { color: rgba(255, 255, 255, 0.82); margin-top: 6px; font-size: 13.5px; }
.hero .badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 16px; }
.hero .badges span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(6px); }
.hero .badges svg { width: 14px; height: 14px; }
.hero .ring { position: absolute; top: 18px; inset-inline-end: 18px; width: 118px; height: 118px; }
.hero .head { padding-inline-end: 132px; }
.hero .mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.hero .mini div { padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); }
.hero .mini span { display: block; font-size: 11.5px; color: rgba(255, 255, 255, 0.75); }
.hero .mini b { display: block; font-size: 16px; font-weight: 750; margin-top: 2px; white-space: nowrap; }

/* --- Tuiles chiffrées --- */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.kpi { padding: 16px 18px 12px; display: flex; flex-direction: column; min-height: 106px; }
.kpi .label { font-size: 12.5px; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.kpi .label .dot { width: 8px; height: 8px; border-radius: 50%; }
.kpi .value { font-size: 27px; font-weight: 760; letter-spacing: -0.035em; margin-top: 4px; white-space: nowrap; }
.kpi .value.good { color: var(--good-ink); } .kpi .value.warn { color: var(--warning-ink); } .kpi .value.bad { color: var(--critical-ink); }
.kpi .sub { font-size: 12px; color: var(--text-3); }
.kpi .spark { height: 40px; margin: 6px -4px 0; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; margin-bottom: 18px; }

/* --- Graphiques --- */
.chart { position: relative; width: 100%; }
.h140 { height: 140px; } .h180 { height: 180px; } .h220 { height: 220px; } .h260 { height: 260px; } .h300 { height: 300px; } .h340 { height: 340px; }
.empty-over { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; padding: 20px; }
.empty-over div { max-width: 320px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 86%, transparent); border: 1px dashed var(--border-strong); color: var(--text-3); font-size: 12.5px; }
.empty-over b { display: block; color: var(--text-2); font-size: 13px; margin-bottom: 2px; }
.legend-list { display: grid; gap: 8px; }
.legend-list .li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-2); }
.legend-list .li i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend-list .li b { margin-inline-start: auto; color: var(--text); font-variant-numeric: tabular-nums; }

/* Barre empilée HTML : parts d'un tout, 2 px d'écart en couleur de surface. */
.stack100 { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--surface-2); }
.stack100 span { display: block; height: 100%; min-width: 3px; transition: opacity .15s ease; }
.stack100 span:hover { opacity: 0.8; }
.stack-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--text-2); }
.stack-legend span { display: inline-flex; align-items: center; gap: 6px; }
.stack-legend i { width: 9px; height: 9px; border-radius: 2px; }
.stack-legend b { color: var(--text); font-variant-numeric: tabular-nums; }

/* --- Activité --- */
.feed { display: grid; gap: 2px; max-height: 420px; overflow-y: auto; margin: 0 -8px; padding: 0 8px; }
.feed .ev { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; padding: 9px 4px; border-bottom: 1px dashed var(--border); align-items: start; }
.feed .ev:last-child { border-bottom: none; }
.feed .ev i { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; box-shadow: 0 0 0 3px var(--surface); }
.feed .ev i.good { background: var(--good); } .feed .ev i.info { background: var(--info); } .feed .ev i.warning { background: var(--warning); } .feed .ev i.critical { background: var(--critical); }
.feed .ev .t { font-weight: 600; font-size: 13px; }
.feed .ev .d { font-size: 12px; color: var(--text-3); }
.feed .ev time { font-size: 11.5px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --- Personnes --- */
.who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.avatar { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; font-weight: 750; font-size: 12.5px; color: #fff; background: var(--aurora); }
.avatar.a1 { background: linear-gradient(135deg, #4436D9, #8D80FF); } .avatar.a2 { background: linear-gradient(135deg, #0E7C79, #2DD4BF); }
.avatar.a3 { background: linear-gradient(135deg, #B26B00, #F5A524); } .avatar.a4 { background: linear-gradient(135deg, #A42A55, #F06AA8); }
.avatar.a5 { background: linear-gradient(135deg, #24306B, #5B6BD9); }
.who { max-width: 300px; }
.who .n { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who .s { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Tableaux du Desk --- */
.tcard { overflow: hidden; }
.tcard .head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 6px; flex-wrap: wrap; }
.tcard .head .card-title { margin: 0; }
.progress-cell { min-width: 190px; width: 230px; }
.progress-cell .spread { white-space: nowrap; flex-wrap: nowrap; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nowrap { white-space: nowrap; }
.progress-cell .meter { margin-top: 6px; }
.late-days { font-weight: 700; color: var(--critical-ink); font-variant-numeric: tabular-nums; }
.empty-row td { text-align: center; color: var(--text-3); padding: 34px 14px; }

/* --- Tiroir : sections --- */
.dgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.facts { display: grid; gap: 0; }
.facts .f { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.facts .f:last-child { border-bottom: none; }
.facts .f span { color: var(--text-3); }
.facts .f b { text-align: end; font-weight: 650; }
.big-amount { font-size: 30px; font-weight: 800; letter-spacing: -0.035em; }
.timeline { position: relative; display: grid; gap: 14px; padding-inline-start: 22px; }
.timeline::before { content: ""; position: absolute; inset-inline-start: 6px; top: 6px; bottom: 6px; width: 2px; border-radius: 1px; background: var(--border); }
.timeline .step { position: relative; }
.timeline .step::before { content: ""; position: absolute; inset-inline-start: -21px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 3px solid var(--brand); }
.timeline .step.good::before { border-color: var(--good); } .timeline .step.warn::before { border-color: var(--warning); }
.timeline .step.bad::before { border-color: var(--critical); } .timeline .step.future::before { border-color: var(--border-strong); }
.timeline .step .t { font-weight: 650; font-size: 13px; }
.timeline .step .d { font-size: 12px; color: var(--text-3); }
.lines { display: grid; gap: 3px; font-variant-numeric: tabular-nums; }
.lines .ln { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; font-size: 12.5px; }
.lines .ln b.D { color: var(--info-ink); } .lines .ln b.C { color: var(--brand-ink); }
.kind { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 8px; font-size: 11.5px; font-weight: 700; background: var(--surface-2); color: var(--text-2); }
.kind.DISBURSEMENT { background: var(--brand-soft); color: var(--brand-ink); } .kind.REPAYMENT { background: var(--good-soft); color: var(--good-ink); }
.kind.PURCHASE { background: var(--accent-soft); color: var(--accent); } .kind.SALE { background: var(--gold-soft); color: var(--gold-ink); }

/* --- Politique de crédit --- */
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.opt { position: relative; display: grid; gap: 6px; padding: 16px 18px; border-radius: 16px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.opt:hover { border-color: var(--border-strong); }
.opt.on { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); background: linear-gradient(180deg, var(--brand-soft), transparent 70%), var(--surface); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt .t { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.opt .d { font-size: 12.5px; color: var(--text-3); }
.opt .check { position: absolute; top: 14px; inset-inline-end: 14px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-strong); display: grid; place-items: center; }
.opt.on .check { border-color: var(--brand); background: var(--brand); }
.opt.on .check::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.fset { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--border); }
.fset > .eyebrow { margin-bottom: 12px; }
.preview { position: sticky; top: 92px; }
.cmp-table { width: 100%; margin-top: 14px; font-size: 12.5px; }
.cmp-table th, .cmp-table td { padding: 8px 8px; position: static; }
.cmp-table th { font-size: 11px; }
.cmp-table td.on, .cmp-table th.on { background: var(--brand-soft); }
.sim-row { display: grid; gap: 10px; padding: 12px 0; border-bottom: 1px dashed var(--border); }
.sim-row:last-child { border-bottom: none; }
.sim-row .row { justify-content: flex-start; }
.preview .cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.preview .cmp > div { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.preview .cmp > div.on { background: var(--brand-soft); border-color: transparent; }
.diff { display: grid; gap: 3px; font-size: 12.5px; }
.diff b { font-weight: 700; }

/* --- Échelle des classes (grille de score) --- */
.bandscale { display: flex; height: 34px; border-radius: 10px; overflow: hidden; gap: 2px; }
.bandscale span { display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #fff; }
.bandscale span.C { color: #1D1600; }

/* --- Démonstration --- */
.action-card { display: flex; flex-direction: column; gap: 12px; }
.action-card .ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); }
.action-card .ico svg { width: 20px; height: 20px; }
.action-card.danger .ico { background: var(--critical-soft); color: var(--critical-ink); }

/* --- Clé d'accès --- */
.lock { padding: 28px; display: grid; gap: 14px; }
.lock .mark-badge { width: 46px; height: 46px; font-size: 22px; border-radius: 14px; }

@media (max-width: 1280px) {
  .c3 { grid-column: span 6; } .c4, .c5 { grid-column: span 6; } .c7, .c8 { grid-column: span 12; } .c6 { grid-column: span 12; }
  .content { padding: 20px 22px 56px; } .topbar { padding: 14px 22px; }
}
@media (max-width: 1100px) {
  .side { width: 220px; } body.desk .main { margin-inline-start: 220px; } body.desk { background: linear-gradient(90deg, #0A0C1C 0 220px, var(--bg) 220px); }
  .c3, .c4, .c5, .c6, .c7, .c8, .c9 { grid-column: span 12; }
  .dgrid, .opts { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  body.desk .main { margin-inline-start: 0; } body.desk { background: var(--bg); }
  .side { position: static; width: auto; height: auto; }
  .side nav { grid-template-columns: repeat(2, 1fr); }
  .side .group, .side .foot { display: none; }
  .kpis { grid-template-columns: 1fr; }
  .hero .ring { position: static; margin-top: 12px; }
}