/* ===== Coque applicative (client + admin) ===== */
.shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100dvh; background: var(--mist); }
.sidebar { background: var(--navy-solid); color: #c5d2e8; padding: 20px 14px; position: sticky; top: 0; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.sidebar .logo { color: #fff; --lg-a: #fff; --lg-b: #60A5FA; padding: 6px 10px 18px; }
.sidebar .badge-role { margin: 0 10px 14px; font-size: .75rem; color: var(--gold); border: 1px solid rgba(183,154,91,.4); border-radius: 99px; padding: 3px 10px; width: fit-content; }
.sidebar a { display: flex; gap: 12px; align-items: center; color: #c5d2e8; text-decoration: none; padding: 11px 12px; border-radius: var(--r-md); font-weight: 600; font-size: .92rem; }
.sidebar a:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar a[aria-current="page"] { background: var(--blue-600); color: #fff; }
.sidebar .spacer { flex: 1; }
.sidebar .count { margin-left: auto; background: var(--gold); color: var(--navy-950); font-size: .72rem; font-weight: 800; border-radius: 99px; padding: 1px 8px; }
.shell.client .sidebar { background: var(--surface); color: var(--ink); border-right: 1px solid var(--line); }
.shell.client .sidebar a { color: var(--ink); }
.shell.client .sidebar a:hover { background: var(--mist); color: var(--navy-900); }
.shell.client .sidebar a[aria-current="page"] { background: var(--blue-100); color: var(--blue-600); }
.shell.client .sidebar .logo { color: #0B1736; --lg-a: #0B1736; --lg-b: #2563EB; }
.topbar { display: none; }
.content { padding: 28px clamp(16px, 3vw, 40px) 60px; min-width: 0; max-width: 1400px; width: 100%; }
.content > header.page-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 26px; }
.page-head h1 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 0; }
.scrim { display: none; }
@media (max-width: 960px) {
  .shell { grid-template-columns: 1fr; }
  .topbar { display: flex; position: sticky; top: 0; z-index: 60; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
  .sidebar { position: fixed; z-index: 80; inset: 0 auto 0 0; width: 280px; transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: none; }
  .scrim.open { display: block; position: fixed; inset: 0; background: rgba(6,19,42,.5); z-index: 70; }
  /* Barre de navigation inférieure (espace client) */
  .shell.client .sidebar, .shell.client .scrim { display: none; }
  .shell.client .content { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .bottom-nav { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(6,19,42,.07); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .bottom-nav a { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px; border-radius: 12px; color: var(--ink-soft, #5b6b86); text-decoration: none; font-size: .66rem; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; }
  .topbar { gap: 8px; }
  .topbar .logo { min-width: 0; flex: 1 1 auto; font-size: .92rem; }
  .topbar .logo span { overflow: hidden; text-overflow: ellipsis; }
  .topbar .logo svg, .topbar .logo img { height: 28px; width: auto; }
  .topbar-actions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 6px; flex: none; }
  .topbar-actions > * { flex: none; width: 40px; height: 40px; }
  .topbar-bell { position: relative; text-decoration: none; }
  .topbar-bell .nbadge { position: absolute; top: 2px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--bad); color: #fff; font-size: .66rem; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
  .topbar-bell .nbadge[hidden] { display: none; }
  .bottom-nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bottom-nav a[aria-current="page"] { color: var(--blue-600); background: var(--blue-100); }
}
@media (min-width: 961px) { .bottom-nav, .topbar-logout { display: none; } }
.card-page { max-width: 460px; margin-inline: auto; display: grid; gap: 14px; width: 100%; }

/* ===== Cartes de synthèse ===== */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.kpis.c3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kpis, .kpis.c3 { grid-template-columns: 1fr 1fr; gap: 10px; } }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; }
.kpi .k { font-size: .82rem; color: var(--muted); font-weight: 600; }
.kpi .v { font: 500 2.1rem/1.1 var(--serif); color: var(--navy-900); margin-top: 6px; font-variant-numeric: lining-nums tabular-nums; }
.kpi.accent { border-color: var(--gold); background: linear-gradient(180deg, var(--surface), var(--gold-soft)); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.panel > h2, .panel > .panel-head h2 { font: 700 1.05rem var(--sans); margin: 0; color: var(--navy-900); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.two-col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
.two-col.even { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) { .two-col, .two-col.even { grid-template-columns: 1fr; } }
dl.facts { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 10px 20px; margin: 0; }
dl.facts dt { color: var(--muted); font-size: .88rem; }
dl.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 560px) { dl.facts { grid-template-columns: 1fr; gap: 2px; } dl.facts dd { margin-bottom: 10px; } }

/* ===== Dossier client (synthèse) ===== */
.dossier { background: var(--navy-solid); color: #fff; border-radius: var(--r-lg); padding: clamp(22px, 3vw, 34px); display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; }
.dossier h2 { color: #fff; font-size: 1.8rem; margin: 0 0 4px; }
.dossier .num { font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 700; letter-spacing: .02em; }
.dossier dl { display: grid; grid-template-columns: repeat(3, auto); gap: 14px 24px; margin: 22px 0 0; }
.dossier dt { font-size: .78rem; color: #9fb3d3; } .dossier dd { margin: 2px 0 0; font-weight: 700; font-size: 1.05rem; }
.dossier .badge { background: rgba(255,255,255,.12); color: #fff; }
@media (max-width: 860px) { .dossier { grid-template-columns: 1fr; } .dossier dl { grid-template-columns: repeat(2, auto); } }
.progress { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: start; }
.progress li { display: flex; gap: 12px; align-items: center; font-weight: 600; color: #9fb3d3; }
.progress li i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #4a6390; display: grid; place-items: center; flex: none; font-style: normal; }
.progress li.done { color: #fff; } .progress li.done i { background: var(--ok); border-color: var(--ok); }
.progress li.current { color: #fff; } .progress li.current i { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(183,154,91,.25); background: var(--gold); }

/* ===== Timeline détaillée ===== */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline li { position: relative; padding: 0 0 26px 44px; }
.timeline li::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; border-left: 2px solid var(--line); }
.timeline li:last-child::before { display: none; }
.timeline .dot { position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); display: grid; place-items: center; color: #fff; }
.timeline .done .dot { background: var(--ok); border-color: var(--ok); }
.timeline .done::before { border-color: var(--ok); }
.timeline .current .dot { border-color: var(--blue-600); background: var(--blue-600); box-shadow: 0 0 0 5px rgba(46,107,255,.18); }
.timeline .stop .dot { background: var(--bad); border-color: var(--bad); }
.timeline .upcoming { opacity: .55; }
.timeline h4 { font: 700 1rem var(--sans); margin: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.timeline .when { font-size: .8rem; color: var(--muted); font-weight: 500; }
.timeline p { margin: 4px 0 0; color: var(--muted); font-size: .92rem; }
.timeline .note { margin-top: 8px; padding: 10px 14px; background: var(--gold-soft); border-left: 3px solid var(--gold); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink); font-size: .92rem; }

/* ===== Tableaux ===== */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
table.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th { text-align: left; font-weight: 700; font-size: .78rem; color: var(--muted); padding: 13px 16px; background: var(--mist); border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th button { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.tbl td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: #f8faff; }
.tbl .num { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.tbl td.actions { text-align: right; white-space: nowrap; }
@media (max-width: 720px) {
  .tbl.stack thead { display: none; }
  .tbl.stack, .tbl.stack tbody, .tbl.stack tr, .tbl.stack td { display: block; width: 100%; }
  .tbl.stack tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
  .tbl.stack td { border: 0; padding: 6px 16px; display: flex; justify-content: space-between; gap: 16px; text-align: right; }
  .tbl.stack td::before { content: attr(data-label); color: var(--muted); font-weight: 700; font-size: .78rem; text-align: left; }
  .tbl.stack td.actions { justify-content: flex-end; }
}
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: end; }
.toolbar .field { min-width: 150px; flex: 1 1 150px; }
.toolbar .field.grow { flex: 3 1 240px; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 4px; flex-wrap: wrap; font-size: .88rem; color: var(--muted); }
.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty h3 { font: 700 1.05rem var(--sans); color: var(--navy-900); }

/* Cartes de demandes (client) */
.app-card { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 16px; align-items: center; padding: 18px 22px; }
.app-card .num { font-weight: 700; color: var(--navy-900); font-variant-numeric: tabular-nums; }
@media (max-width: 800px) { .app-card { grid-template-columns: 1fr 1fr; } }

/* Notifications */
.notif { display: flex; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); align-items: flex-start; }
.notif:last-child { border-bottom: 0; }
.notif.unread { background: #f4f8ff; }
.notif .ico { color: var(--blue-600); margin-top: 2px; }
.notif h4 { font: 700 .95rem var(--sans); margin: 0; }
.notif p { margin: 2px 0 6px; color: var(--muted); font-size: .9rem; }
.bell { position: relative; }
.bell .dotc { position: absolute; top: -4px; right: -4px; background: var(--bad); color: #fff; border-radius: 99px; font-size: .68rem; font-weight: 800; padding: 1px 6px; }

/* ===== Assistant de demande ===== */
.wizard { max-width: 860px; margin-inline: auto; }
.stepper { display: flex; gap: 6px; margin-bottom: 8px; }
.stepper i { flex: 1; height: 5px; border-radius: 5px; background: #d5dcea; }
.stepper i.done { background: var(--blue-600); } .stepper i.now { background: var(--gold); }
.wizard .step-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.wizard .step-title h2 { font-size: 1.6rem; margin: 0; }
.wizard-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.recap { display: grid; gap: 22px; }
.recap h3 { font: 700 .95rem var(--sans); margin-bottom: 10px; display: flex; justify-content: space-between; }
.doc-slot { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border: 1.5px dashed #b9c5d8; border-radius: var(--r-md); }
.doc-slot.has { border-style: solid; border-color: var(--ok); background: var(--ok-bg); }
.doc-slot .fname { font-size: .82rem; color: var(--muted); overflow-wrap: anywhere; }
.choice-list { display: flex; flex-direction: column; gap: 12px; }
.choice-card { display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--blue-100); font-weight: 700; color: var(--navy-900); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.choice-card:hover { border-color: var(--blue-500); }
.choice-card.checked { border-color: var(--blue-600); background: #dce8ff; box-shadow: 0 0 0 1px var(--blue-600) inset; }
.choice-card input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.choice-card:focus-within { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.success { text-align: center; max-width: 560px; margin: 40px auto; }
.success .tick { width: 72px; height: 72px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; margin: 0 auto 20px; }
.success .number { font: 500 2rem var(--serif); color: var(--navy-900); letter-spacing: .02em; margin: 10px 0 20px; }

/* ===== Graphiques SVG ===== */
.chart { width: 100%; height: auto; overflow: visible; }
.chart text { font: 600 11px var(--sans); fill: var(--muted); }
.chart .grid-l { stroke: var(--line); stroke-width: 1; }
.chart .bar { fill: var(--blue-600); } .chart .bar.gold { fill: var(--gold); }
.chart .line { fill: none; stroke: var(--blue-600); stroke-width: 2.5; stroke-linejoin: round; }
.chart .area { fill: rgba(46,107,255,.1); }
.chart .dot { fill: #fff; stroke: var(--blue-600); stroke-width: 2; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: .82rem; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.s0 { fill: var(--navy-900); background: var(--navy-solid); } .s1 { fill: var(--blue-600); background: var(--blue-600); }
.s2 { fill: var(--gold); background: var(--gold); } .s3 { fill: #7fa4ff; background: #7fa4ff; }
.s4 { fill: #17835b; background: #17835b; } .s5 { fill: #b4322f; background: #b4322f; } .s6 { fill: #9aa8bf; background: #9aa8bf; }

.skeleton { background: linear-gradient(90deg, #e9edf4 25%, #f4f6fa 37%, #e9edf4 63%); background-size: 400% 100%; animation: sk 1.3s infinite; border-radius: var(--r-md); min-height: 20px; }
@keyframes sk { from { background-position: 100% 0; } to { background-position: 0 0; } }
.sticky-side { position: sticky; top: 20px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.tabs button { background: none; border: 0; padding: 12px 16px; font: 700 .9rem var(--sans); color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--blue-600); border-color: var(--blue-600); }
.note-item { padding: 12px 14px; background: var(--mist); border-radius: var(--r-md); }
.note-item .meta { font-size: .78rem; color: var(--muted); margin-bottom: 4px; }

.skeleton.tall { height: 64px; }
.topbar .burger { display: inline-flex; }
.sidebar .logout { margin: 10px 10px 0; color: inherit; border-color: rgba(128,140,165,.4); }
.sidebar .logout:hover { border-color: currentColor; }

ul.stack { list-style: none; padding: 0; margin: 0; }
.grow { flex: 1; min-width: 0; }
.hbar { display: grid; grid-template-columns: minmax(90px, 1.1fr) 3fr auto; gap: 10px; align-items: center; font-size: .85rem; margin: 10px 0; }
.hbar .track { background: var(--mist); border-radius: 6px; height: 10px; overflow: hidden; }
.hbar .track i { display: block; height: 100%; width: var(--w, 0); background: var(--blue-600); border-radius: 6px; }
.hbar.gold .track i { background: var(--gold); }
.hbar b { font-variant-numeric: tabular-nums; }
.stackbar { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: var(--mist); }
.stackbar i { display: block; width: var(--w, 0); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
dialog.wide { width: min(94vw, 760px); }
dialog .dlg { max-height: 88dvh; overflow-y: auto; }

a.kpi.link { display: block; text-decoration: none; color: inherit; transition: border-color .18s, box-shadow .18s, transform .18s; }
a.kpi.link:hover { border-color: var(--blue-500); box-shadow: var(--shadow); transform: translateY(-2px); }
.kpi .k { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kpi .go { color: var(--blue-600); opacity: .55; transition: opacity .18s, transform .18s; display: inline-flex; }
a.kpi.link:hover .go { opacity: 1; transform: translateX(3px); }

.tabs .tab-link { padding: 12px 16px; font: 700 .9rem var(--sans); color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs .tab-link[aria-selected="true"] { color: var(--blue-600); border-color: var(--blue-600); }
.progressbar { height: 10px; border-radius: 6px; background: var(--mist); overflow: hidden; }
.progressbar i { display: block; height: 100%; width: var(--w, 0); background: var(--blue-600); transition: width .3s; }
.mail-prev { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #f3f5f9; padding: 14px; }
.mp-head { background: var(--navy-solid); color: #fff; font-weight: 700; padding: 14px 18px; border-radius: 8px 8px 0 0; }
.mp-body { background: #fff; padding: 20px 18px 8px; }
.mp-body h4 { font: 700 1.05rem var(--sans); color: var(--navy-900); margin-bottom: 12px; }
.mp-body p { white-space: pre-line; font-size: .92rem; color: var(--ink); }
.mp-btn { display: inline-block; background: var(--navy-solid); color: #fff; font-weight: 700; padding: 11px 22px; border-radius: 8px; margin: 4px 0 16px; font-size: .9rem; }
.mp-foot { background: #fff; border-top: 1px solid var(--line); padding: 12px 18px; font-size: .74rem; color: var(--muted); border-radius: 0 0 8px 8px; }
[hidden] { display: none !important; }
.wizard { padding: 36px 16px 64px; }
.shell .wizard { padding: 0 0 40px; }

/* ===== Compte de démonstration : bandeau permanent + filigrane ===== */
/* Bandeau et filigrane de démonstration retirés à la demande */
.bank-card { background: radial-gradient(120% 90% at 100% 0%, rgba(120,110,255,.45), transparent 55%), linear-gradient(135deg, var(--navy-solid), var(--navy-800)); box-shadow: var(--shadow); color: #fff; border-radius: var(--r-lg); padding: 26px; display: flex; flex-direction: column; gap: 6px; }
.bc-top { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: #9fb3d3; }
.bc-demo { background: #b4322f; color: #fff; font-weight: 800; font-size: .7rem; letter-spacing: .1em; padding: 3px 10px; border-radius: 99px; }
.bc-balance { font: 500 clamp(2.2rem, 5vw, 3.2rem)/1.1 var(--serif); font-variant-numeric: lining-nums tabular-nums; margin-top: 10px; }
.bc-sub { font-size: .8rem; color: #9fb3d3; }
.bc-facts { display: grid; gap: 14px; margin: 18px 0 0; }
.bc-facts dt { font-size: .75rem; color: #9fb3d3; } .bc-facts dd { margin: 2px 0 0; font-weight: 700; }
.bc-facts .iban { font: 700 1.05rem ui-monospace, Menlo, monospace; letter-spacing: .08em; }
.bc-invalid { color: #ffb4b0; font-weight: 600 !important; }
.pos { color: var(--ok); font-weight: 700; } .neg { color: var(--ink); }

/* Virement de démonstration : le bandeau et le filigrane apparaissent aussi dans la fenêtre */

.dlg-actions-inline { justify-content: flex-end; }

/* ===== Carte virtuelle de démonstration ===== */
.vcard { container-type: inline-size; perspective: 1200px; width: 100%; max-width: 400px; aspect-ratio: 1.586; margin-inline: auto; cursor: pointer; position: relative; }
.vcard-face { position: absolute; inset: 0; border-radius: 4.6cqw; overflow: hidden; backface-visibility: hidden; padding: 6cqw 6.4cqw; color: #fff; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 2.4cqw 6cqw rgba(6,19,42,.4); transition: transform .5s; }
.vcard-face > * { position: relative; }
.vcard-wrap { display: grid; gap: 16px; width: 100%; }
.vcard-actions { display: grid; gap: 10px; width: 100%; max-width: 400px; margin-inline: auto; }
.vcard-actions .btn { gap: 10px; }
.vcard-actions .btn[aria-pressed="true"] { border-color: var(--gold, #b79a5b); }
.vcard-front { background: radial-gradient(120% 90% at 88% 0%, rgba(140,130,255,.38), transparent 55%), linear-gradient(135deg, #050b26 0%, #131f7a 55%, #3a2fb8 100%); }
.vcard-front::before { content: ''; position: absolute; inset: -32% -24% auto auto; width: 120%; height: 95%; border-radius: 50%; transform: rotate(-18deg); background: linear-gradient(160deg, rgba(130,175,255,.2), rgba(130,175,255,0) 60%); pointer-events: none; }
.vcard-back { background: linear-gradient(160deg, #131f7a, #070d33); transform: rotateY(180deg); padding: 0; justify-content: flex-start; }
.vcard.flipped .vcard-front { transform: rotateY(180deg); }
.vcard.flipped .vcard-back { transform: rotateY(360deg); }
.vcard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2cqw; }
.vcard-brand { display: flex; align-items: center; gap: 2.4cqw; }
.vcard-mark { width: 9cqw; height: 9cqw; border-radius: 2.2cqw; background: rgba(255,255,255,.08); border: 1px solid rgba(183,154,91,.55); color: var(--gold); display: grid; place-items: center; }
.vcard-mark svg { width: 6cqw; height: 6cqw; }
.vcard-issuer { display: block; font: 700 5.6cqw/1.05 var(--sans); letter-spacing: -.01em; }
.vcard-tagline { display: block; margin-top: .6cqw; font-size: 2.9cqw; color: #c8d6f0; }
.vcard-demo { background: #b4322f; font: 800 2.5cqw/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 1.2cqw 2.4cqw; border-radius: 99px; white-space: nowrap; }
.vcard-mid { display: flex; align-items: center; gap: 4cqw; }
.vcard-chip { width: 13cqw; height: 9.8cqw; }
.vcard-nfc { width: 5cqw; height: 7cqw; color: #dfe8f8; opacity: .9; }
.vcard-number { font: 500 6.2cqw/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .07em; color: #e8eefb; text-shadow: 0 1px 0 rgba(255,255,255,.25), 0 -1px 0 rgba(0,0,0,.5); white-space: nowrap; }
.vcard-bottom { display: flex; justify-content: space-between; align-items: flex-end; }
.vcard-valid { display: flex; align-items: center; gap: 2cqw; }
.vcard-label { font-size: 2.4cqw; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; color: #c3d0ea; max-width: 11cqw; }
.vcard-value { font: 500 4.4cqw ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; color: #e8eefb; }
.vcard-name { margin-top: 2.6cqw; font: 500 4.8cqw/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .1em; color: #e8eefb; text-shadow: 0 1px 0 rgba(255,255,255,.2), 0 -1px 0 rgba(0,0,0,.45); }
.vcard-emblem { width: 15cqw; height: 15cqw; color: var(--gold); border: 1px solid rgba(183,154,91,.45); border-radius: 50%; display: grid; place-items: center; }
.vcard-emblem svg { width: 8cqw; height: 8cqw; }
.vcard-backbar { display: flex; justify-content: space-between; gap: 2cqw; padding: 2.8cqw 6cqw; font-size: 3cqw; background: rgba(120,160,230,.2); color: #eaf0fb; }
.vcard-stripe { height: 12.5cqw; background: #0d0d0d; margin-top: 3cqw; }
.vcard-sigrow { display: flex; height: 8.5cqw; margin: 4.5cqw 6.4cqw 0; }
.vcard-sig { flex: 1; background: repeating-linear-gradient(-45deg, #eef1fb 0 1.2cqw, #dde4f6 1.2cqw 2.4cqw); }
.vcard-cvv { width: 15cqw; display: grid; place-items: center; background: #e4e4e7; color: #111; font: 600 4.6cqw var(--sans); letter-spacing: .05em; }
.vcard-sigcap { margin: 1.4cqw 6.4cqw 0; font-size: 3cqw; color: #d5def0; }
.vcard-backfoot { margin-top: auto; padding: 0 6.4cqw 5.5cqw; display: flex; align-items: center; gap: 6cqw; }
.vcard-backfoot p { margin: 0; font-size: 3cqw; line-height: 1.4; color: #dbe4f5; }
.vcard-holo { position: relative; flex: none; width: 17cqw; height: 11cqw; }
.vcard-holo i { position: absolute; top: 0; width: 11cqw; height: 11cqw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f4f6fa, #9aa3b3 60%, #6d7686); opacity: .85; }
.vcard-holo i:first-child { left: 0; }
.vcard-holo i:last-child { left: 6cqw; }


/* ===== Mode nuit (espace client) : activé par <html data-theme="dark">, posé uniquement dans l'espace client ===== */
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #070c1c; --mist: #070c1c; --surface: #0f1730; --line: #1f2b4d; --ink: #e8edfb; --muted: #97a6c7;
  --navy-900: #eaf0ff; --navy-solid: #16277a; --blue-600: #5b78ff; --blue-100: #17224a; --gold-soft: #2b2515;
  --ok: #34d3a0; --ok-bg: #0d3329; --warn: #f0b955; --warn-bg: #3a2c10; --bad: #ff8a85; --bad-bg: #3d1b1b;
  --info: #9cb2ff; --info-bg: #17224a; --neutral: #b2bfd4; --neutral-bg: #1c2744;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.4);
}
html[data-theme="dark"] body { background: var(--paper); color: var(--ink); }
/* Bandeaux d'alerte : textes et bordures clairs sur fond sombre (les teintes de base sont prévues pour le mode jour) */
html[data-theme="dark"] .alert { color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .alert.warn { color: #ffe3a6; border-color: #6b5320; }
html[data-theme="dark"] .alert.bad { color: #ffc9c6; border-color: #7a3030; }
html[data-theme="dark"] .alert.ok { color: #b8f1dc; border-color: #1f6b52; }
html[data-theme="dark"] .alert.info { color: #d3deff; border-color: #34479a; }
html[data-theme="dark"] .alert a { color: inherit; }
html[data-theme="dark"] .shell.client .sidebar a[aria-current="page"], html[data-theme="dark"] .bottom-nav a[aria-current="page"] { color: #a9c1ff; }
html[data-theme="dark"] .tbl tbody tr:hover { background: #17233a; }
html[data-theme="dark"] .notif.unread { background: #14213a; }
html[data-theme="dark"] .skeleton { background: linear-gradient(90deg, #17233a 25%, #1f2e4a 37%, #17233a 63%); background-size: 400% 100%; }
html[data-theme="dark"] .btn-light { background: #fff; color: #0b2140; }
html[data-theme="dark"] .btn-light:hover { background: #e8eefb; }
html[data-theme="dark"] .btn-navy { background: #3b52d9; color: #fff; }
html[data-theme="dark"] .btn-navy:hover { background: #4a62ee; }
html[data-theme="dark"] .toast { background: #1d2c47; }
html[data-theme="dark"] .chart .dot { fill: var(--surface); }
html[data-theme="dark"] .timeline .dot { background: var(--surface); }

/* Interrupteur jour / nuit */
.theme-switch { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 10px; border-radius: var(--r-md); cursor: pointer; color: inherit; font: inherit; font-weight: 600; font-size: .95rem; }
.theme-switch:hover { background: var(--mist); }
.theme-switch .track { position: relative; width: 44px; height: 24px; border-radius: 99px; background: #c4cedf; transition: background .2s; flex: none; }
.theme-switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.theme-switch[aria-checked="true"] .track { background: var(--blue-600); }
.theme-switch[aria-checked="true"] .track::after { transform: translateX(20px); }
.theme-switch.compact { padding: 0; width: 44px; height: 44px; justify-content: center; border: 1.5px solid var(--line); }
.theme-switch.compact span.lbl { display: none; }
.sidebar .theme-switch { margin: 6px 0 0; width: 100%; }
@media (max-width: 960px) { .sidebar .theme-switch { display: none; } }
@media (min-width: 961px) { .theme-switch.compact { display: none; } }

/* ---- Signature électronique ---- */
.sig-box { position: relative; background: var(--surface); border: 1.5px dashed var(--line); border-radius: var(--r-lg); overflow: hidden; }
.sig-canvas { display: block; width: 100%; height: auto; aspect-ratio: 640 / 220; touch-action: none; cursor: crosshair; background: #fff; }
.sig-canvas.typed { cursor: default; }
.sig-line { position: absolute; left: 4%; right: 4%; bottom: 22%; border-bottom: 1px solid var(--line); pointer-events: none; }
.sig-pad [role="tab"][aria-selected="true"] { background: var(--navy-900); color: #fff; }

/* ---- Email admin : aperçu aux couleurs de l'institution ---- */
.mail-prev.brand .mp-head { background: var(--mp-primary, var(--navy-solid)); border-bottom: 3px solid var(--mp-accent, var(--gold)); font-family: var(--serif); font-size: 1.2rem; }
.mail-prev.brand .mp-head small { display: block; font: 400 .62rem var(--sans); letter-spacing: .08em; color: #d9c99b; margin-top: 2px; }
.mail-prev.brand .mp-body h4 { color: var(--mp-primary, var(--navy-900)); font-family: var(--serif); font-size: 1.15rem; }
.mail-prev.brand .mp-body a { color: var(--mp-primary, var(--navy-900)); }
.mp-btn { display: inline-block; background: var(--mp-primary, var(--navy-900)); color: #fff; font: 700 .85rem var(--sans); padding: 10px 20px; border-radius: 8px; border-bottom: 3px solid var(--mp-accent, var(--gold)); }
.mp-foot div + div { margin-top: 2px; }
.mail-plain { margin: 0; background: #fff; padding: 18px; border-radius: 8px; white-space: pre-wrap; word-break: break-word; font: 400 .85rem/1.55 ui-monospace, Menlo, Consolas, monospace; color: var(--ink); }
.mail-pick { justify-content: space-between; text-align: left; }
.mail-pick small { margin-left: 8px; }
[role="tablist"] [role="tab"][aria-selected="true"] { background: var(--navy-900); color: #fff; }

/* ---- Bouton WhatsApp flottant ---- */
.wa-float { position: fixed; bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 10px; background: #25d366; color: #fff; width: 58px; height: 58px; border-radius: 999px; justify-content: center; box-shadow: 0 6px 18px rgba(11, 19, 39, .28); text-decoration: none; transition: transform .18s, box-shadow .18s; }
.wa-float.right { right: 20px; } .wa-float.left { left: 20px; }
.wa-float:hover, .wa-float:focus-visible { transform: scale(1.06); box-shadow: 0 8px 22px rgba(11, 19, 39, .36); }
.wa-float:focus-visible { outline: 3px solid var(--navy-900); outline-offset: 3px; }
.wa-float[hidden] { display: none; }
.wa-tip { position: absolute; bottom: 50%; transform: translateY(50%); white-space: nowrap; background: var(--navy-900); color: #fff; font: 700 .8rem var(--sans); padding: 7px 12px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .18s; }
.wa-float.right .wa-tip { right: 68px; } .wa-float.left .wa-tip { left: 68px; }
.wa-float:hover .wa-tip, .wa-float:focus-visible .wa-tip { opacity: 1; }
body:has(.bottom-nav) .wa-float { bottom: 84px; }
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } }
@media print { .wa-float { display: none; } }

/* Logo en mode nuit (espace client) : version claire du symbole et du nom */
html[data-theme="dark"] .logo, html[data-theme="dark"] .shell.client .sidebar .logo { color: #fff; --lg-a: #fff; --lg-b: #60A5FA; }

/* Bandeaux cliquables (<a class="alert">) : pas de soulignement ni de couleur de lien, le contraste vient du bandeau */
a.alert { text-decoration: none; color: inherit; }
a.alert:hover { filter: brightness(.97); }
html[data-theme="dark"] a.alert:hover { filter: brightness(1.12); }

/* ===== Messagerie (client + admin) ===== */
.sidebar .ccount { margin-left: auto; background: var(--gold); color: var(--navy-950); font-size: .72rem; font-weight: 800; border-radius: 99px; padding: 1px 8px; }
.sidebar .ccount[hidden], .cbadge[hidden] { display: none; }
.topbar-bell .cbadge { position: absolute; top: 2px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--bad); color: #fff; font-size: .66rem; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.chat-panel { padding: 0; overflow: hidden; }
.chat { display: flex; flex-direction: column; height: min(72dvh, 680px); min-height: 380px; }
.chat-scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 16px; scroll-behavior: smooth; }
.chat-list { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.chat-more { align-self: center; margin-bottom: 10px; }
.chat-day { align-self: center; margin: 12px 0 4px; font-size: .74rem; color: var(--muted); text-transform: capitalize; background: var(--mist); padding: 2px 12px; border-radius: 99px; }
.chat-empty { align-self: center; text-align: center; max-width: 34ch; margin: 24px 0; }
.chat-msg { display: flex; }
.chat-msg.mine { justify-content: flex-end; }
.chat-bubble { max-width: min(78%, 520px); padding: 8px 12px; border-radius: 16px; background: var(--mist); color: var(--ink); overflow-wrap: anywhere; }
.chat-msg.mine .chat-bubble { background: var(--navy-solid, var(--navy-900)); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.theirs .chat-bubble { border-bottom-left-radius: 4px; }
.chat-who { font-size: .72rem; font-weight: 700; opacity: .75; margin-bottom: 2px; }
.chat-text { white-space: pre-wrap; line-height: 1.45; }
.chat-meta { font-size: .68rem; opacity: .65; margin-top: 3px; text-align: right; }
.chat-img { display: block; max-width: 100%; max-height: 260px; border-radius: 10px; margin-bottom: 6px; cursor: zoom-in; background: rgba(0,0,0,.06); min-width: 120px; min-height: 80px; object-fit: cover; }
.chat-full { max-width: 100%; max-height: 74dvh; display: block; margin: 0 auto; border-radius: 8px; }
.chat-form { border-top: 1px solid var(--line); padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); }
.chat-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-row textarea { flex: 1; min-height: 44px; max-height: 140px; resize: none; line-height: 1.4; }
.chat-send, .chat-attach { height: 44px; flex: none; }
.chat-chip { margin-bottom: 8px; font-size: .84rem; background: var(--blue-100); padding: 4px 10px; border-radius: 99px; display: inline-flex; align-items: center; gap: 4px; }
.chat-split { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.chat-threads { padding: 12px; }
.chat-thlist { display: flex; flex-direction: column; max-height: 62dvh; overflow-y: auto; margin: 8px -4px; }
.chat-th { display: block; padding: 10px; border-radius: 10px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); }
.chat-th:hover, .chat-th.on { background: var(--mist); }
.chat-th.unread strong { color: var(--navy-900); }
.chat-th-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.chat-th .count { background: var(--bad); color: #fff; font-size: .7rem; font-weight: 800; border-radius: 99px; padding: 1px 8px; }
.chat-th-prev { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-pane { padding: 0; overflow: hidden; }
.chat-none { padding: 40px 20px; text-align: center; }
.chat-conv-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.chat-back { display: none; }
@media (max-width: 860px) {
  .chat-split { grid-template-columns: 1fr; }
  .chat-admin.has-conv .chat-threads { display: none; }
  .chat-admin:not(.has-conv) .chat-pane { display: none; }
  .chat-back { display: inline-flex; }
  .chat { height: calc(100dvh - 210px); }
  .chat-send span { display: none; }
  .chat-bubble { max-width: 86%; }
}
.chat-typing { display: flex; align-items: center; gap: 8px; padding: 4px 16px 8px; font-size: .8rem; color: var(--muted); }
.chat-dots { display: inline-flex; gap: 3px; }
.chat-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: chat-bounce 1.2s infinite ease-in-out; }
.chat-dots i:nth-child(2) { animation-delay: .15s; } .chat-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.chat-typing[hidden] { display: none; }
.chat-receipt.seen { color: #7be0a4; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .chat-dots i { animation: none; } }

/* Bouton de messagerie flottant (admin) */
.chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-900, #0b6a9a); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.28); transition: transform .15s; }
.chat-fab:hover { transform: scale(1.07); }
.chat-fab .cbadge { position: absolute; top: -3px; right: -3px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--bad, #d33); color: #fff; font-size: .72rem; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; }
@media (max-width: 640px) { .chat-fab { right: 16px; bottom: 16px; width: 54px; height: 54px; } }

/* Admin : localisation / pastilles dans la liste et l'en-tête des conversations */
.chat-th-geo { margin-top: 2px; } .chat-geo { font-weight: 600; } .chat-tags { gap: 6px; flex-wrap: wrap; align-items: center; }
/* ===== Chat en direct (vitrine) — modèle Alojaideal, couleurs du site ===== */
/* ============================================================
   Chat en direct (visiteurs) — chargé par src/components/chat-widget.js
   ============================================================ */
.lc, .lc * { box-sizing: border-box; }
.lc button, .lc a, .lc label { overflow-wrap: normal; word-break: normal; }
.lc-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------- Bulle ---------- */
.lc-fab {
  position: fixed; left: 20px; bottom: 24px; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-600)); color: #fff; cursor: pointer;
  box-shadow: 0 16px 30px -12px rgba(11, 106, 154, 0.7), 0 4px 10px rgba(10, 15, 30, 0.22);
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.lc-fab:hover { transform: translateY(-2px) scale(1.05); }
.lc-fab:focus-visible { outline: 3px solid rgba(11, 106, 154, 0.5); outline-offset: 3px; }
.lc-fab__badge {
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px;
  border: 2px solid #fff; border-radius: 11px; background: #e5321f; color: #fff;
  font: 700 12px/18px var(--sans); text-align: center;
}
.lc-fab__badge[hidden] { display: none; }

/* ---------- Vibration douce de la bulle (pour se faire remarquer) ----------
   Une petite secousse, puis une pause : discret mais visible. Plus marquée s'il y a une réponse non lue. S'arrête au survol,
   dès que le chat est ouvert, et pour les personnes qui demandent moins d'animations. */
@keyframes chat-wiggle {
  0%, 22%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  3%  { transform: translate3d(-1.5px, 0, 0) rotate(-9deg); }
  6%  { transform: translate3d(1.5px, 0, 0) rotate(8deg); }
  9%  { transform: translate3d(-1px, 0, 0) rotate(-6deg); }
  12% { transform: translate3d(1px, 0, 0) rotate(5deg); }
  15% { transform: translate3d(-0.5px, 0, 0) rotate(-3deg); }
  18% { transform: translate3d(0.5px, 0, 0) rotate(2deg); }
}
@keyframes chat-wiggle-strong {
  0%, 38%, 100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  4%  { transform: translate3d(-2px, 0, 0) rotate(-14deg) scale(1.08); }
  9%  { transform: translate3d(2px, 0, 0) rotate(12deg) scale(1.08); }
  14% { transform: translate3d(-2px, 0, 0) rotate(-10deg) scale(1.06); }
  19% { transform: translate3d(1.5px, 0, 0) rotate(8deg) scale(1.05); }
  24% { transform: translate3d(-1px, 0, 0) rotate(-5deg) scale(1.03); }
  29% { transform: translate3d(1px, 0, 0) rotate(3deg) scale(1.02); }
}
.lc--nudge .lc-fab { animation: chat-wiggle 4.5s ease-in-out 2.5s infinite; }
.lc--unread .lc-fab { animation: chat-wiggle-strong 2.4s ease-in-out infinite; }
.lc--unread .lc-fab__badge { animation: chat-badge-pop 1.2s ease-in-out infinite; }
@keyframes chat-badge-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.lc-fab:hover, .lc-fab:focus-visible { animation: none; }

/* ---------- Fenêtre ---------- */
.lc-panel {
  position: fixed; left: 20px; bottom: 96px; z-index: 71;
  display: flex; flex-direction: column;
  width: 380px; max-width: calc(100vw - 24px); height: min(620px, calc(100dvh - 130px));
  overflow: hidden; border: 1px solid #e6ebf2; border-radius: 22px; background: #fff;
  box-shadow: 0 34px 70px -22px rgba(10, 15, 30, 0.6), 0 10px 24px -12px rgba(10, 15, 30, 0.3);
  transform-origin: bottom left; animation: chat-in .24s cubic-bezier(.22, 1, .36, 1);
}
.lc-panel[hidden] { display: none; }
@keyframes chat-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

.lc-head {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 16px 16px 18px; color: #fff;
  background:
    radial-gradient(240px 120px at 100% 0%, rgba(224, 155, 45, 0.38), transparent 70%),
    linear-gradient(135deg, var(--navy-950), var(--navy-900));
}
.lc-head__avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; background: #fff; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }
.lc-head__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.lc-head__text strong { font-size: 16px; font-weight: 800; line-height: 1.2; color: #fff; }
.lc-head__status { display: flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.3; color: rgba(255, 255, 255, 0.78); }
.lc-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
.lc-dot--on { background: #22c55e; animation: chat-ring 1.8s ease-out infinite; }
@keyframes chat-ring { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); } 75%, 100% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } }
.lc-head__close {
  flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; transition: background .15s ease;
}
.lc-head__close:hover { background: rgba(255, 255, 255, 0.2); }

/* ---------- Messages ---------- */
.lc-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px; overflow-y: auto; overscroll-behavior: contain; background: #f4f6fa; }
.lc-msg { display: flex; flex-direction: column; max-width: 86%; }
.lc-msg__bubble { padding: 10px 14px; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.lc-msg__bubble a { color: inherit; text-decoration: underline; font-weight: 600; }
.lc-msg--them { align-self: flex-start; }
.lc-msg--them .lc-msg__bubble { border: 1px solid #e3e8f0; border-radius: 16px 16px 16px 4px; background: #fff; color: #172033; }
.lc-msg--me { align-self: flex-end; align-items: flex-end; }
.lc-msg--me .lc-msg__bubble { border-radius: 16px 16px 4px 16px; background: linear-gradient(135deg, var(--blue-500), var(--blue-600)); color: #fff; }
.lc-msg__time { margin-top: 3px; padding: 0 4px; font-size: 11.5px; color: #8b97ab; }
.lc-msg.is-pending .lc-msg__bubble { opacity: .65; }
.lc-msg.is-failed .lc-msg__bubble { background: #fff; color: #b42318; border: 1.5px solid #f3b8b1; }
.lc-msg.is-failed .lc-msg__time { color: #b42318; }
.lc-retry { padding: 0; border: 0; background: none; color: #b42318; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ---------- Formulaire de départ ---------- */
.lc-start, .lc-emailprompt { padding: 14px; border: 1px solid #e3e8f0; border-radius: 16px; background: #fff; }
.lc-start { display: flex; flex-direction: column; gap: 10px; }
.lc-start label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: #1e293b; }
.lc-req { color: #d0342c; margin-left: 2px; }
.lc-start label em { font-style: normal; font-weight: 500; color: #8b97ab; }
.lc-start input[type="text"], .lc-start input[type="email"], .lc-start textarea,
.lc-emailprompt input, .lc-composer textarea {
  width: 100%; padding: 11px 12px; border: 1.5px solid #dbe3ee; border-radius: 12px; background: #fff;
  font: inherit; font-size: 16px; color: #0f172a; transition: border-color .15s ease, box-shadow .15s ease;
}
.lc-start textarea { min-height: 84px; resize: vertical; }
.lc-start select { width: 100%; padding: 11px 12px; border: 1.5px solid #dbe3ee; border-radius: 12px; background: #fff; font: inherit; font-size: 16px; color: #0f172a; }
.lc-start select:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 4px rgba(11, 106, 154, 0.16); }
.lc-start input:focus, .lc-start textarea:focus, .lc-emailprompt input:focus, .lc-composer textarea:focus {
  outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 4px rgba(11, 106, 154, 0.16);
}
.lc-start__btn, .lc-emailprompt button {
  min-height: 46px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--blue-600); color: #fff;
  font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; transition: background .15s ease;
}
.lc-start__btn:hover, .lc-emailprompt button:hover { background: #095a82; }
.lc-start__btn:disabled { opacity: .6; cursor: default; }
.lc-start__error, .lc-emailprompt__error { margin: 0; font-size: 13px; font-weight: 600; color: #b42318; }
.lc-start__error[hidden], .lc-emailprompt__error[hidden] { display: none; }
.lc-start__legal { margin: 0; font-size: 11.5px; line-height: 1.5; color: #8b97ab; }
.lc-start__legal a { color: #095a82; font-weight: 700; }
.lc-emailprompt p { margin: 0 0 8px; font-size: 13px; line-height: 1.45; color: #475569; }
.lc-emailprompt > div { display: flex; gap: 8px; }
.lc-emailprompt input { flex: 1; min-width: 0; }
.lc-emailprompt button { min-height: 44px; padding: 0 14px; font-size: 14px; }

/* ---------- Zone de saisie ---------- */
.lc-composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #e6ebf2; background: #fff; }
.lc-composer[hidden] { display: none; }
.lc-composer textarea { flex: 1; min-width: 0; max-height: 112px; resize: none; line-height: 1.4; }
.lc-composer__send {
  flex: none; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0;
  border: 0; border-radius: 50%; background: var(--blue-600); color: #fff; cursor: pointer; transition: background .15s ease, opacity .15s ease;
}
.lc-composer__send:hover { background: #095a82; }
.lc-composer__send:disabled { background: #cbd5e1; cursor: default; }

/* ---------- Position à droite : quand le bouton WhatsApp flottant est masqué, la bulle prend sa place ---------- */
.lc--right .lc-fab { left: auto; right: 18px; bottom: 20px; }
.lc--right .lc-fab__badge { right: auto; left: -4px; }
.lc--right .lc-panel { left: auto; right: 20px; transform-origin: bottom right; }

/* ---------- Mobile : petite fenêtre flottante (pas de plein écran) ---------- */
@media (max-width: 720px) {
  .lc-fab { left: 14px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); width: 54px; height: 54px; }
  .lc-panel {
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: auto; max-width: none; height: min(440px, 62dvh);
    border-radius: 20px; transform-origin: bottom center;
  }
  .lc--right .lc-fab { left: auto; right: 14px; }
  .lc--right .lc-panel { left: 10px; right: 10px; transform-origin: bottom center; }
  .lc.is-open .lc-fab { display: none; }
  .lc-head { gap: 10px; padding: 11px 12px 11px 14px; }
  .lc-head__avatar { width: 34px; height: 34px; }
  .lc-head__text strong { font-size: 15px; }
  .lc-head__status { font-size: 12px; }
  .lc-head__close { width: 32px; height: 32px; border-radius: 10px; }
  .lc-body { gap: 8px; padding: 12px; }
  .lc-msg { max-width: 90%; }
  .lc-msg__bubble { padding: 8px 12px; font-size: 14px; }
  .lc-start { gap: 8px; padding: 12px; }
  .lc-start textarea { min-height: 64px; }
  .lc-start input[type="text"], .lc-start input[type="email"], .lc-start textarea { padding: 9px 11px; }
  .lc-start__btn { min-height: 42px; }
  .lc-composer { gap: 6px; padding: 8px 10px; }
  .lc-composer textarea { padding: 9px 11px; }
  .lc-composer__send { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .lc-panel, .lc-dot--on, .lc--nudge .lc-fab, .lc--unread .lc-fab, .lc--unread .lc-fab__badge { animation: none; } }

/* Photos dans le chat */
.lc-composer__attach { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #f1f5f9; color: #475569; display: grid; place-items: center; cursor: pointer; }
.lc-composer__attach:hover { background: #e2e8f0; }
.lc-msg__img { display: block; max-width: 100%; width: 220px; height: auto; max-height: 260px; object-fit: cover; border-radius: 10px; }
.lc-msg__bubble:has(.lc-msg__img) { padding: 6px; }
.lc-msg__img + * { margin-top: 6px; }

.lc-msg--me 
/* Au-dessus du bouton WhatsApp quand il occupe aussi le coin droit ; fenêtre ouverte au-dessus de tout (mobile) */
body:has(.wa-float.right:not([hidden])) .lc--right .lc-fab { bottom: 92px; }
body:has(.wa-float.right:not([hidden])) .lc--right .lc-panel { bottom: 164px; }
.lc.is-open { z-index: 400; }
@media (max-width: 720px) {
  body:has(.wa-float.right:not([hidden])) .lc--right .lc-fab { bottom: 86px; }
  .lc--right .lc-fab { bottom: 14px; }
  body:has(.wa-float.right:not([hidden])) .lc--right .lc-panel, .lc--right .lc-panel { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .lc.is-open .lc-panel { z-index: 400; }
}


/* ===== Messagerie admin (modèle Alojaideal) ===== */
.ca-status { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; }
.ca-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; animation: chat-ring 1.8s ease-out infinite; }
.ca-side { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ca-tabs { display: flex; gap: 6px; padding: 10px; border-bottom: 1px solid var(--line); }
.ca-tab { flex: 1; padding: 8px 6px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: 700 .86rem var(--sans); cursor: pointer; }
.ca-tab span { margin-left: 5px; padding: 1px 7px; border-radius: 99px; background: var(--mist); font-size: .72rem; }
.ca-tab.is-active { background: var(--blue-100); color: var(--blue-600); }
.ca-tab.is-active span { background: var(--blue-600); color: #fff; }
.ca-search { padding: 10px 10px 4px; }
.ca-list { flex: 1; max-height: 62dvh; overflow-y: auto; padding: 6px; }
.ca-empty-list { margin: 22px 14px; text-align: center; color: var(--muted); font-size: .9rem; } .ca-empty-list.bad { color: var(--bad); }
.ca-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.ca-item:hover { background: var(--mist); } .ca-item.is-active { background: var(--blue-100); }
.ca-avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: hsl(var(--h) 70% 92%); color: hsl(var(--h) 65% 30%); font: 800 1rem var(--sans); }
.ca-item__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ca-item__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ca-item__top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .94rem; }
.ca-item__top time { flex: none; font-size: .72rem; color: var(--muted); }
.ca-item__sub, .ca-item__geo { font-size: .76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-item__preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; color: var(--muted); }
.ca-item__preview em { font-style: normal; opacity: .75; }
.ca-item.is-unread .ca-item__preview { color: var(--ink); font-weight: 700; }
.ca-typing-inline { color: var(--blue-600); font-weight: 700; }
.ca-item__badge { flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--bad); color: #fff; font: 800 .72rem/22px var(--sans); text-align: center; }
.ca-placeholder { margin: auto; padding: 60px 24px; text-align: center; color: var(--muted); } .ca-placeholder span { display: block; margin-bottom: 8px; font-size: 42px; }
.ca-thread__head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ca-thread__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ca-thread__who > span { font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; } .ca-thread__who strong { font-size: 1rem; }
.ca-thread__place { font-weight: 700; color: var(--ink) !important; }
.ca-tag { margin-left: 8px; padding: 2px 8px; border-radius: 99px; background: var(--mist); color: var(--muted); font-size: .72rem; font-weight: 700; }
.ca-thread__actions { display: flex; gap: 8px; flex: none; } .ca-danger { color: var(--bad); border-color: #f1c4c2; }
.ca-hint { margin: 0; padding: 4px 16px 12px; font-size: .76rem; color: var(--muted); }
.chat-quick { display: flex; gap: 8px; padding: 8px 14px 0; overflow-x: auto; scrollbar-width: none; }
.chat-quick button { flex: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); font: 600 .8rem var(--sans); color: var(--ink); cursor: pointer; }
.chat-quick button:hover { border-color: var(--blue-600); color: var(--blue-600); background: var(--blue-100); }
.ca-push { margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid #cfe9d8; background: #f3fbf6; }
.ca-push--warn { border-color: #f2d49b; background: #fff8e9; }
.ca-push__main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ca-push__main > div { flex: 1; min-width: 220px; }
.ca-push__icon { font-size: 26px; line-height: 1; } .ca-push strong { display: block; } .ca-push p { margin: 2px 0 0; font-size: .86rem; color: var(--muted); }
.ca-push__msg { margin: 10px 0 0 !important; padding: 6px 10px; border-radius: 8px; background: #fff; } .ca-push__msg[data-tone="ok"] { color: var(--ok); } .ca-push__msg[data-tone="error"] { color: var(--bad); }
.ca-push__channels { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: .8rem; color: var(--muted); } .ca-push__channels .is-on { color: var(--ok); font-weight: 600; }
.chat-alerts { position: fixed; top: 16px; right: 16px; z-index: 500; display: flex; flex-direction: column; gap: 8px; width: min(340px, calc(100vw - 32px)); }
.chat-alert { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--navy-solid); color: #fff; text-decoration: none; box-shadow: 0 12px 30px rgba(0,0,0,.3); animation: chat-in .24s ease; }
.chat-alert__ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--blue-600); }
.chat-alert__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; } .chat-alert__txt strong { font-size: .92rem; } .chat-alert__txt span { font-size: .82rem; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-alert__x { flex: none; border: 0; background: transparent; color: #fff; font-size: 1.3rem; cursor: pointer; opacity: .7; }
@media (max-width: 860px) { .ca-list { max-height: none; } .ca-thread__actions { width: 100%; } }

/* Messagerie admin : dans une discussion, on masque le titre et le bloc de notifications pour laisser la place à la conversation */
.chat-admin.has-conv > .page-head, .chat-admin.has-conv > .ca-push { display: none; }

/* Parcours (entonnoir) */
.funnel-row { display: grid; grid-template-columns: minmax(150px, 1.4fr) 3fr 52px minmax(90px, .8fr); gap: 10px; align-items: center; font-size: .86rem; margin: 10px 0; }
.funnel-row .track { background: var(--mist); border-radius: 6px; height: 14px; overflow: hidden; }
.funnel-row .track i { display: block; height: 100%; width: var(--w, 0); background: var(--blue-600); border-radius: 6px; }
.funnel-row.is-strong .track i { background: #16a34a; }
.funnel-row .funnel-label small { display: block; color: var(--muted, #5a6784); font-size: .72rem; }
.funnel-row b { text-align: right; }
@media (max-width: 640px) { .funnel-row { grid-template-columns: 1fr 52px; } .funnel-row .track { grid-column: 1 / -1; grid-row: 2; } .funnel-rate { grid-column: 1 / -1; } }

/* ===== Administration : refonte visuelle (menu bleu nuit, barre supérieure, tableau de bord) ===== */
.shell.admin { --ad-blue: #1769e0; --ad-navy: #0b1736; --ad-ink2: #4a5878; --ad-line: #e2e9f5; grid-template-columns: 272px minmax(0, 1fr);
  background: radial-gradient(900px 420px at 85% -4%, #ffffff 0%, rgba(255,255,255,0) 70%), linear-gradient(160deg, #f4f7fd 0%, #edf2fb 100%); }
.shell.admin .sidebar { gap: 2px; padding: 22px 14px 16px; color: #cdd9f0;
  background: radial-gradient(420px 260px at 0% 100%, rgba(37, 99, 235, .55), rgba(37, 99, 235, 0) 70%), linear-gradient(180deg, #061331 0%, #0a2051 62%, #0b2a6b 100%); }
.shell.admin .sidebar .logo { padding: 4px 10px 14px; font-size: 1.05rem; }
.shell.admin .sidebar .logo svg { height: 42px; }
.shell.admin .sidebar .badge-role { margin: 0 10px 12px; color: #9fc0ff; border-color: rgba(120, 165, 255, .4); }
.shell.admin .sidebar a { gap: 14px; padding: 9px 14px; border-radius: 14px; font-weight: 600; font-size: .9rem; line-height: 1.25; color: #d7e1f5; }
.shell.admin .sidebar a svg { flex: none; opacity: .92; }
.shell.admin .sidebar a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.shell.admin .sidebar a[aria-current="page"] { background: linear-gradient(180deg, #2a78f0, #1565df); color: #fff; box-shadow: 0 8px 20px -8px rgba(23, 105, 224, .9); }
.shell.admin .sidebar .logout { margin: 4px 0 0; padding: 9px 14px; justify-content: flex-start; gap: 14px; border: 0; border-radius: 14px; background: transparent; color: #d7e1f5; font-weight: 600; font-size: .9rem; min-height: 0; }
.shell.admin .sidebar .logout:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sec-card { display: grid; justify-items: center; gap: 4px; margin: 14px 4px 10px; padding: 16px 12px; text-align: center; border: 1px solid rgba(120, 165, 255, .28); border-radius: 18px; background: rgba(8, 24, 64, .55); color: #8fb6ff; }
.sec-card b { color: #fff; font-size: .95rem; } .sec-card span { color: #b4c4e4; font-size: .82rem; line-height: 1.35; }
@media (max-height: 1000px) { .sec-card { display: none; } }

/* Barre supérieure */
.admin-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(16px, 3vw, 40px) 0; max-width: 1440px; }
.ab-search { flex: 1 1 0; min-width: 0; max-width: 430px; display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 18px; border-radius: 99px; background: rgba(226, 235, 252, .75); color: #5b6b8c; }
.ab-search input { all: unset; flex: 1; min-width: 0; font: 500 .95rem var(--sans); color: var(--ad-navy); }
.ab-search input::placeholder { color: #7a89a8; }
.ab-search:focus-within { box-shadow: 0 0 0 3px rgba(23, 105, 224, .25); background: #fff; }
.ab-right { display: flex; flex: none; align-items: center; gap: 18px; }
.ab-bell { position: relative; display: grid; place-items: center; width: 44px; height: 44px; color: var(--ad-navy); border-radius: 50%; text-decoration: none; }
.ab-bell:hover { background: rgba(23, 105, 224, .08); }
.ab-badge { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: #ef4444; color: #fff; font-size: .7rem; font-weight: 800; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px #f1f5fc; }
.ab-badge[hidden] { display: none; }
.ab-user { position: relative; }
.ab-user summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 4px 6px 4px 4px; border-radius: 99px; cursor: pointer; color: var(--ad-navy); }
.ab-user summary::-webkit-details-marker { display: none; }
.ab-avatar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #1769e0, #0a2a78); color: #fff; font-weight: 800; font-size: .95rem; }
.ab-who { display: grid; line-height: 1.2; } .ab-who b { font-size: .95rem; } .ab-who small { color: #5b6b8c; font-size: .84rem; }
.ab-user[open] summary svg { transform: rotate(180deg); }
.ab-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 90; min-width: 230px; display: grid; gap: 2px; padding: 8px; border: 1px solid var(--ad-line); border-radius: 16px; background: #fff; box-shadow: 0 24px 50px -18px rgba(14, 40, 100, .35); }
.ab-menu .ab-mail { padding: 8px 12px 10px; font-size: .82rem; color: #6a7a99; border-bottom: 1px solid var(--ad-line); margin-bottom: 4px; overflow-wrap: anywhere; }
.ab-menu a, .ab-menu button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font: 600 .9rem var(--sans); color: var(--ad-navy); }
.ab-menu a:hover, .ab-menu button:hover { background: #eef3fc; }

/* Pages d'administration : surfaces plus douces */
.shell.admin .content { padding-top: 18px; max-width: 1440px; }
.shell.admin .panel, .shell.admin .kpi { border: 1px solid rgba(226, 233, 245, .9); border-radius: 22px; background: #fff; box-shadow: 0 10px 30px -18px rgba(24, 56, 140, .28); }
.shell.admin .page-head h1 { font: 800 clamp(1.6rem, 2.6vw, 2.1rem)/1.1 var(--sans); letter-spacing: -.02em; color: var(--ad-navy); }

/* Tableau de bord */
.dash { display: grid; gap: 22px; }
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.dash-head h1 { margin: 0; font: 800 clamp(1.9rem, 3vw, 2.5rem)/1.1 var(--sans); letter-spacing: -.025em; color: var(--ad-navy); }
.dash-head p { margin: 4px 0 0; font-size: 1.05rem; color: var(--ad-ink2); }
.daterange { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 99px; background: rgba(255, 255, 255, .8); box-shadow: 0 8px 24px -14px rgba(24, 56, 140, .4); color: var(--ad-navy); font-weight: 600; font-size: .95rem; cursor: pointer; }
.daterange:focus-within { outline: 3px solid rgba(23, 105, 224, .35); }
.daterange svg:last-of-type { transform: rotate(90deg); }
.dr-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.dkpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.dkpi { --tone: #2f7bf0; --soft: #dbe8fe; --bg: linear-gradient(160deg, #eaf2ff, #f8faff);
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 14px; padding: 20px 20px 0; min-height: 150px; overflow: hidden; text-decoration: none; color: var(--ad-navy);
  border-radius: 22px; background: var(--bg); box-shadow: 0 12px 30px -20px rgba(24, 56, 140, .45); border: 1px solid rgba(255, 255, 255, .9); transition: transform .18s, box-shadow .18s; }
.dkpi.link:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -18px rgba(24, 56, 140, .5); }
.dkpi.green { --tone: #1fa874; --soft: #cdeedf; --bg: linear-gradient(160deg, #e4f6ee, #f7fcf9); }
.dkpi.orange { --tone: #f08a2b; --soft: #fbd9b7; --bg: linear-gradient(160deg, #fdeede, #fffaf5); }
.dkpi.purple { --tone: #7b5be0; --soft: #e0d6fa; --bg: linear-gradient(160deg, #eee8fc, #faf8ff); }
.dk-ico { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--soft); color: var(--tone); }
.dk-main { display: grid; gap: 2px; min-width: 0; }
.dk-val { font: 800 2rem/1.05 var(--sans); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.dk-lbl { font-size: .95rem; color: var(--ad-navy); font-weight: 500; }
.dk-chip { align-self: start; font-size: .82rem; font-weight: 700; color: var(--tone); white-space: nowrap; }
.dk-chip.up { color: #14946a; } .dk-chip.down { color: #e23b3b; }
.dk-viz { grid-column: 1 / -1; align-self: end; height: 58px; margin: 0 -20px; }
.dk-viz .spark { display: block; width: 100%; height: 100%; }
.dk-bar { display: block; height: 8px; margin: 34px 20px 0; border-radius: 99px; background: rgba(255, 255, 255, .8); overflow: hidden; }
.dk-bar i { display: block; height: 100%; border-radius: 99px; background: var(--tone); }
.dgrid { display: grid; gap: 18px; align-items: stretch; }
.dgrid.g-a { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.dgrid.g-b { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.dgrid.g-c { grid-template-columns: 1fr 1fr; align-items: start; }
.dpanel { padding: 22px 24px; }
.dpanel .panel-head h2 { font: 800 1.2rem var(--sans); letter-spacing: -.01em; color: var(--ad-navy); }
.ph-ico { display: inline-flex; align-items: center; gap: 12px; } .ph-ico svg { color: var(--ad-blue); }
.seg { display: inline-flex; padding: 4px; gap: 2px; border: 1px solid var(--ad-line); border-radius: 99px; background: #fff; }
.seg a { padding: 7px 16px; border-radius: 99px; font-size: .88rem; font-weight: 600; color: var(--ad-navy); text-decoration: none; }
.seg a[aria-current="true"] { background: var(--ad-blue); color: #fff; box-shadow: 0 6px 14px -6px rgba(23, 105, 224, .8); }
.seeall { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ad-blue); text-decoration: none; } .seeall:hover { text-decoration: underline; }
/* courbe */
.achart { position: relative; }
.achart-svg { display: block; width: 100%; height: auto; touch-action: pan-y; overflow: visible; }
.achart-svg text { font: 500 12px var(--sans); fill: #5b6b8c; }
.achart-svg .grid-l { stroke: #e6edf8; } .achart-svg .grid-v { stroke: #eef3fb; }
.achart-svg .a-line { fill: none; stroke: var(--ad-blue); stroke-width: 2.8; stroke-linecap: round; }
.achart-svg .a-dot { fill: #fff; stroke: var(--ad-blue); stroke-width: 2.4; } .achart-svg .a-dot.on { fill: var(--ad-blue); stroke: #fff; stroke-width: 2.5; }
.achart-svg .a-guide { stroke: #b9cdf0; stroke-width: 1.2; stroke-dasharray: 3 3; }
.achart-tip { position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 14px)); display: grid; gap: 1px; padding: 8px 14px; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px -10px rgba(14, 40, 100, .35); white-space: nowrap; pointer-events: none; font-size: .82rem; color: var(--ad-ink2); }
.achart-tip b { font-size: .95rem; color: var(--ad-navy); } .achart-tip[hidden] { display: none; }
/* anneau */
.donut { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 22px; }
.donut-ring { position: relative; width: clamp(150px, 15vw, 200px); } .donut-svg { display: block; width: 100%; height: auto; }
.donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut-center b { font: 800 1.9rem/1 var(--sans); color: var(--ad-navy); } .donut-center span { font-size: .95rem; color: var(--ad-navy); }
.donut-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; min-width: 0; }
.donut-legend li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; font-size: .98rem; color: var(--ad-navy); }
.donut-legend i { width: 14px; height: 14px; border-radius: 50%; } .donut-legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .donut-legend b { font-weight: 800; }
/* dernières demandes */
.lreq { list-style: none; margin: 0; padding: 0; }
.lreq li { display: grid; grid-template-columns: 44px minmax(120px, 1.3fr) minmax(90px, 1fr) auto minmax(110px, auto); align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--ad-line); font-size: .92rem; }
.lreq li:first-child { border-top: 0; }
.lreq .av { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #e8eefb; color: #31456f; font-weight: 800; font-size: .85rem; }
.lreq .nm { font-weight: 700; color: var(--ad-navy); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lreq .nm:hover { color: var(--ad-blue); }
.lreq .pr { color: var(--ad-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lreq time { color: var(--ad-ink2); font-size: .86rem; text-align: right; font-variant-numeric: tabular-nums; }
/* bandeau */
.promo { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; min-height: 220px; padding: 22px 26px; overflow: hidden; border-radius: 22px; color: #fff; text-decoration: none;
  background: linear-gradient(90deg, #0a1633 0%, #0a1633 38%, rgba(10, 22, 51, .55) 62%, rgba(10, 22, 51, 0) 100%), url("/img/admin-promo.jpg") right center / auto 100% no-repeat, #0a1633; box-shadow: 0 16px 36px -20px rgba(10, 22, 51, .8); }
.promo > * { position: relative; max-width: 62%; }
.promo .pm-ico { color: #cfe0ff; margin-bottom: auto; } .promo b { font: 800 1.15rem/1.25 var(--sans); } .promo .pm-sub { font-size: .9rem; color: #d3def5; line-height: 1.35; }
.promo .pm-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 18px; border-radius: 10px; background: linear-gradient(180deg, #2a78f0, #1565df); font-weight: 700; font-size: .88rem; }
.promo:hover .pm-cta svg { transform: translateX(3px); } .pm-cta svg { transition: transform .18s; }
.dash-sub { margin: 10px 0 -6px; font: 800 1.1rem var(--sans); color: var(--ad-navy); }
.dmini { margin-bottom: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1280px) { .dkpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dmini { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .dgrid.g-a, .dgrid.g-b, .dgrid.g-c { grid-template-columns: 1fr; } .promo { min-height: 200px; } .promo > * { max-width: 70%; } }
@media (max-width: 960px) {
  .shell.admin { grid-template-columns: minmax(0, 1fr); }
  .shell.admin .sidebar { width: 292px; }
  .admin-bar { padding-top: 12px; } .ab-who, .ab-user summary > svg { display: none; } .ab-right { gap: 8px; }
  .shell.admin .topbar { background: #fff; }
}
@media (max-width: 640px) {
  .dkpis { gap: 12px; } .dkpi { min-height: 132px; padding: 14px 14px 0; grid-template-columns: auto 1fr; } .dk-ico { width: 46px; height: 46px; } .dk-ico svg { width: 22px; height: 22px; }
  .dk-val { font-size: 1.5rem; } .dk-chip { grid-column: 1 / -1; grid-row: 3; } .dk-viz { margin: 0 -14px; height: 44px; } .dk-bar { margin: 20px 14px 0; }
  .dmini { grid-template-columns: 1fr 1fr; } .dpanel { padding: 16px; }
  .donut { grid-template-columns: 1fr; justify-items: center; } .donut-legend { width: 100%; }
  .lreq li { grid-template-columns: 38px 1fr auto; row-gap: 2px; } .lreq .pr { grid-column: 2; grid-row: 2; font-size: .82rem; color: var(--ad-ink2); } .lreq .st { grid-column: 3; grid-row: 1; } .lreq time { grid-column: 3; grid-row: 2; font-size: .78rem; }
  .lreq .av { grid-row: 1 / span 2; width: 36px; height: 36px; }
  .promo > * { max-width: 100%; } .daterange { width: 100%; justify-content: space-between; }
  .dash-head h1 { font-size: 1.8rem; }
}

/* Paramètres : taux et montants par type de prêt */
.rates-card { padding: 18px; border: 1px solid var(--ad-line, #e2e9f5); border-radius: 18px; background: #fafcff; }
.rates-head { display: flex; align-items: center; gap: 10px; } .rates-head h3 { margin: 0; }
.rt-list { display: grid; gap: 10px; }
.rt-row { display: grid; grid-template-columns: auto minmax(70px, 110px) auto auto minmax(80px, 110px) auto auto; align-items: center; gap: 8px 10px; }
.rt-row .input { min-height: 44px; }
.rt-l { font-size: .88rem; color: var(--ad-ink2, #4a5878); } .rt-u { font-size: .9rem; }
@media (max-width: 640px) { .rt-row { grid-template-columns: auto 1fr auto; } .rt-row .rt-l:nth-of-type(2) { grid-column: 1; } }
.rt-row .btn { width: auto; justify-self: start; padding-inline: 14px; }