/* =========================================================
   Terra Capital — Espace dépôt sécurisé (POC)
   Charte extraite du logo : terracotta + accents pêche
   ========================================================= */

:root {
  --terra: #da5623;        /* orange vif (CAPITAL + monogramme) */
  --terra-dark: #a8431e;   /* rust foncé (TERRA) */
  --terra-rust: #c14d21;
  --terra-rose: #d4a18f;   /* accent rose/tan */
  --terra-peach: #edab91;  /* accent pêche clair */

  --ink: #2a201a;
  --ink-soft: #6b5d52;
  --line: #ece2da;
  --bg: #faf6f2;
  --bg-warm: #f4ece5;
  --card: #ffffff;
  --green: #2f8f5b;
  --green-soft: #e7f3ec;
  --red: #c0492b;
  --red-soft: #fbece7;
  --amber: #c98a1e;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(42,32,26,.04), 0 8px 28px rgba(168,67,30,.07);
  --shadow-lg: 0 12px 48px rgba(168,67,30,.14);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  background-image:
    radial-gradient(1200px 500px at 100% -10%, rgba(237,171,145,.18), transparent 60%),
    radial-gradient(900px 420px at -10% 110%, rgba(212,161,143,.14), transparent 55%);
  background-attachment: fixed;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 40px; width: auto; display: block; }
.brand .sub {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); border-left: 1px solid var(--line); padding-left: 12px;
}
.topbar-right { display: flex; align-items: center; gap: 16px; }
.secure-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--green); font-weight: 600;
  background: var(--green-soft); padding: 6px 12px; border-radius: 999px;
}
.viewlink {
  font-size: 14px; font-weight: 600; color: var(--terra-dark);
  text-decoration: none; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--terra-peach); transition: .18s;
}
.viewlink:hover { background: var(--terra); color: #fff; border-color: var(--terra); }

/* ---------- Layout ---------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 28px; }
.hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 24px; flex-wrap: wrap;
}
.hero h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.hero h1 .wave { font-weight: 400; }
.hero p { color: var(--ink-soft); font-size: 16px; margin-top: 8px; max-width: 620px; }
.hero .badge-from {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-soft);
  background: #fff; border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px;
}
.hero .avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--terra-dark);
  color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700;
}

.cols { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; }
@media (max-width: 980px) { .cols { grid-template-columns: 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px;
}
.card h2 { font-size: 17px; font-weight: 750; display: flex; align-items: center; gap: 9px; }
.card .hint { color: var(--ink-soft); font-size: 13.5px; margin-top: 4px; }
.section-gap { margin-top: 20px; }

/* ---------- Dropzone ---------- */
.dropzone {
  border: 2px dashed var(--terra-peach); border-radius: var(--radius);
  background: linear-gradient(180deg, #fffaf6, #fff);
  padding: 30px 24px; text-align: center; transition: .2s; cursor: pointer;
}
.dropzone.drag { border-color: var(--terra); background: #fff4ed; transform: scale(1.005); }
.dropzone .big { font-size: 40px; line-height: 1; }
.dropzone .t { font-size: 17px; font-weight: 700; margin-top: 12px; }
.dropzone .s { color: var(--ink-soft); font-size: 13.5px; margin-top: 6px; }
.dz-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font); font-size: 14.5px; font-weight: 650; cursor: pointer;
  border: none; border-radius: 999px; padding: 11px 20px; transition: .16s;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary { background: var(--terra); color: #fff; box-shadow: 0 6px 18px rgba(218,86,35,.28); }
.btn-primary:hover { background: var(--terra-dark); transform: translateY(-1px); }
.btn-primary:disabled { background: #d8ccc3; box-shadow: none; cursor: not-allowed; transform: none; }
.btn-ghost { background: #fff; color: var(--terra-dark); border: 1px solid var(--terra-peach); }
.btn-ghost:hover { background: var(--bg-warm); }
.btn-block { width: 100%; justify-content: center; padding: 14px; font-size: 16px; }

/* ---------- Staging (raw messy files) ---------- */
.staging { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.rawfile {
  display: flex; align-items: center; gap: 12px;
  background: #fbf4ef; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 13.5px;
  animation: pop .25s ease both;
}
.rawfile .ic { font-size: 20px; }
.rawfile .nm { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink-soft); flex: 1; word-break: break-all; }
.rawfile .tag {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--red-soft); color: var(--red);
}
.rawfile.is-photo .tag::before { content: "📷 "; }
.rawfile.clickable { cursor: pointer; }
.rawfile.clickable:hover { border-color: var(--terra-peach); background: #fff4ed; }
.raw-peek { font-size: 11px; font-weight: 700; color: var(--terra-dark); opacity: .55; white-space: nowrap; }
.rawfile.clickable:hover .raw-peek { opacity: 1; }

/* ---------- Processed result cards ---------- */
.results { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
@media (max-width: 600px) { .results { grid-template-columns: 1fr; } }
.rescard {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--terra);
  border-radius: var(--radius-sm); padding: 13px 15px;
  opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s;
}
.rescard.show { opacity: 1; transform: none; }
.rescard .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rescard .type { font-weight: 700; font-size: 14px; }
.rescard .fam {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; white-space: nowrap;
}
.rescard .who { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
.rescard .rename {
  margin-top: 9px; font-size: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.rescard .old { font-family: ui-monospace, monospace; color: #b7a99e; text-decoration: line-through; }
.rescard .new { font-family: ui-monospace, monospace; color: var(--green); font-weight: 600; word-break: break-all; }
.rescard .note { margin-top: 8px; font-size: 11.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 5px; }
.rescard .conf { font-size: 11px; color: var(--ink-soft); }
.rescard .moteur { font-size: 11px; color: var(--ink-soft); margin-top: 6px; font-weight: 600; }
.rescard .alerte { font-size: 11.5px; margin-top: 8px; padding: 6px 9px; border-radius: 8px; font-weight: 600;
  background: #fbf3e3; color: var(--amber); border: 1px solid #f0e0bb; }
.rescard { position: relative; }
.piece-del { position: absolute; bottom: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--ink-soft); cursor: pointer; font-size: 13px; line-height: 1; opacity: .55; transition: .15s; }
.rescard:hover .piece-del { opacity: 1; }
.piece-del:hover, .piece-del:active { background: var(--red-soft); color: var(--red); border-color: var(--red); opacity: 1; }
.tree-file .tf-del { margin-left: 10px; padding: 2px 7px; color: #b7a99e; cursor: pointer; opacity: .85; transition: .15s; }
.tree-file .tf-del:hover, .tree-file .tf-del:active { color: var(--red); }
.btn-danger { background: #fff; color: var(--red); border: 1px solid var(--red-soft); }
.btn-danger:hover { background: var(--red-soft); border-color: var(--red); }

/* family colors */
.fam-situation { background: #eef3fb; color: #3a5a8c; }
.fam-revenus   { background: #e9f5ec; color: #2f7a4d; }
.fam-patrimoine{ background: #f6eefb; color: #7a3a8c; }
.fam-charges   { background: #fbf0e7; color: var(--terra-dark); }

/* ---------- Processing overlay state ---------- */
.proc-line { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-soft); padding: 6px 0; }
.spinner {
  width: 16px; height: 16px; border: 2px solid var(--terra-peach); border-top-color: var(--terra);
  border-radius: 50%; animation: spin .7s linear infinite;
}

/* ---------- Checklist panel ---------- */
.sticky-side { position: sticky; top: 92px; }
.ring-wrap { display: flex; align-items: center; gap: 16px; }
.ring { position: relative; width: 92px; height: 92px; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring .pct {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 22px; font-weight: 800; color: var(--terra-dark);
}
.ring-meta .big { font-size: 15px; font-weight: 750; }
.ring-meta .small { font-size: 13px; color: var(--ink-soft); }

.fam-group { margin-top: 18px; }
.fam-group h3 {
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.fam-group h3 .dot { width: 9px; height: 9px; border-radius: 50%; }
.check {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  font-size: 13.5px; transition: background .25s;
}
.check + .check { margin-top: 2px; }
.check .box {
  width: 20px; height: 20px; border-radius: 6px; border: 2px solid #d9cdc3; flex: none;
  display: grid; place-items: center; color: #fff; font-size: 12px; transition: .25s;
}
.check.done { background: var(--green-soft); }
.check.done .box { background: var(--green); border-color: var(--green); }
.check.done .lbl { color: var(--ink); }
.check.partial .box { border-color: var(--amber); color: var(--amber); background: #fff; font-size: 10px; font-weight: 700; }
.check .lbl { flex: 1; color: var(--ink-soft); }
.check .cnt { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---------- Completion banner ---------- */
.done-banner {
  margin-top: 20px; background: linear-gradient(135deg, #2f8f5b, #247a4a);
  color: #fff; border-radius: var(--radius); padding: 20px; text-align: center;
  box-shadow: 0 12px 36px rgba(47,143,91,.3);
  animation: pop .4s ease both;
}
.done-banner .big { font-size: 20px; font-weight: 800; }
.done-banner .small { opacity: .92; font-size: 14px; margin-top: 5px; }
.incomplete-banner {
  margin-top: 20px; background: linear-gradient(135deg, #c98a1e, #b3781a);
  color: #fff; border-radius: var(--radius); padding: 18px;
  box-shadow: 0 12px 36px rgba(201,138,30,.28); animation: pop .4s ease both;
}
.incomplete-banner .big { font-size: 18px; font-weight: 800; }
.incomplete-banner .small { opacity: .95; font-size: 13.5px; margin-top: 4px; }
.miss-list { list-style: none; margin: 12px 0 8px; padding: 0; }
.miss-list li { font-size: 12.5px; padding: 6px 10px; background: rgba(255,255,255,.16); border-radius: 8px; margin-top: 5px; }
.miss-list li::before { content: "○  "; }
.incomplete-banner .btn { background: #fff; color: var(--terra-dark); }
.incomplete-banner .btn:hover { background: #fff4ed; }
.hidden { display: none !important; }

/* ---------- Courtier dashboard ---------- */
.kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 24px; }
@media (max-width: 820px){ .kpis{ grid-template-columns: repeat(2,1fr);} }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.kpi .v { font-size: 28px; font-weight: 800; color: var(--terra-dark); }
.kpi .l { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }

.dossier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px){ .dossier-grid{ grid-template-columns: 1fr;} }
.dossier {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow); cursor: pointer; transition: .18s;
  display: flex; align-items: center; gap: 16px;
}
.dossier:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--terra-peach); }
.dossier .who { font-weight: 750; font-size: 15.5px; }
.dossier .meta { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.dossier .state { font-size: 12px; font-weight: 700; margin-top: 8px; display: inline-block; padding: 3px 10px; border-radius: 999px; }
.state-ok { background: var(--green-soft); color: var(--green); }
.state-mid { background: #fbf3e3; color: var(--amber); }
.state-low { background: var(--red-soft); color: var(--red); }
.mini-ring { width: 64px; height: 64px; flex: none; position: relative; }
.mini-ring svg { transform: rotate(-90deg); }
.mini-ring .p { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-weight: 800; }

/* tree (organized dossier) */
.tree { margin-top: 6px; }
.tree-fam { margin-top: 14px; }
.tree-fam .h { font-weight: 750; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.tree-fam .h .dot { width: 9px; height: 9px; border-radius: 50%; }
.tree-file {
  display: flex; align-items: center; gap: 10px; font-size: 13px;
  padding: 7px 10px 7px 26px; color: var(--ink);
}
.tree-file .nm { font-family: ui-monospace, monospace; }
.tree-file .ic { color: var(--terra); }

/* analysis teaser */
.analysis { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 8px; }
@media (max-width: 600px){ .analysis{ grid-template-columns: 1fr;} }
.metric { background: var(--bg-warm); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; }
.metric .v { font-size: 22px; font-weight: 800; color: var(--terra-dark); }
.metric .l { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.metric.ok .v { color: var(--green); }
.metric.warn .v { color: var(--amber); }

.back { font-size: 14px; color: var(--terra-dark); text-decoration: none; font-weight: 650; display: inline-flex; gap: 6px; align-items: center; }
.back:hover { text-decoration: underline; }

.roadmap-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--terra-peach); color: var(--terra-dark); padding: 3px 9px; border-radius: 6px;
}

/* footer */
.foot { text-align: center; color: var(--ink-soft); font-size: 12.5px; padding: 30px; }
.foot b { color: var(--terra-dark); }

/* ---------- clickable doc affordance ---------- */
.rescard.clickable { cursor: pointer; }
.rescard.clickable:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.peek { margin-top: 11px; font-size: 12px; font-weight: 700; color: var(--terra-dark);
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  background: #fff4ed; border: 1px solid var(--terra-peach); border-radius: 999px; transition: .15s; }
.rescard.clickable:hover .peek { background: var(--terra); color: #fff; border-color: var(--terra); }
.tree-file.clickable { cursor: pointer; border-radius: 8px; transition: background .15s; }
.tree-file.clickable:hover { background: var(--bg-warm); }
.tree-file .peek-inline { margin-left: auto; color: var(--terra); opacity: 0; transition: .15s; }
.tree-file.clickable:hover .peek-inline { opacity: 1; }

/* ---------- lightbox aperçu document ---------- */
.lb {
  position: fixed; inset: 0; background: rgba(42,32,26,.55); backdrop-filter: blur(3px);
  z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px;
}
.lb.open { display: flex; }
.lb-card {
  background: #fff; width: min(920px, 100%); height: min(90vh, 1050px);
  border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; animation: pop .25s ease both;
}
.lb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-warm);
}
.lb-title { font-weight: 750; font-size: 14.5px; color: var(--ink); }
.lb-actions { display: flex; align-items: center; gap: 14px; }
.lb-open { font-size: 13px; font-weight: 650; color: var(--terra-dark); text-decoration: none; }
.lb-open:hover { text-decoration: underline; }
.lb-close { border: 1px solid var(--line); background: #fff; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--ink-soft); }
.lb-close:hover { background: var(--red-soft); color: var(--red); border-color: var(--red); }
.lb-host { flex: 1; width: 100%; overflow: auto; background: #f0e9e3; display: flex; justify-content: center; align-items: flex-start; }
.lb-frame { flex: 1; width: 100%; height: 100%; border: none; }
.lb-img { width: 100%; max-width: 760px; height: auto; display: block; }

/* ---------- scanner modal ---------- */
.scan-modal {
  position: fixed; inset: 0; background: rgba(42,32,26,.55); backdrop-filter: blur(3px);
  z-index: 220; display: none; align-items: center; justify-content: center; padding: 24px;
}
.scan-modal.open { display: flex; }
.scan-card {
  background: #fff; width: min(900px, 100%); max-height: 92vh; overflow-y: auto;
  border-radius: 16px; box-shadow: var(--shadow-lg); animation: pop .25s ease both;
}
.scan-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--bg-warm);
  position: sticky; top: 0; border-radius: 16px 16px 0 0;
}
.scan-head b { font-size: 16px; }
.scan-body { padding: 20px; }
.scan-actions { display: flex; justify-content: center; }
.scan-samples { margin-top: 22px; text-align: center; color: var(--ink-soft); font-size: 13.5px; }
.scan-sample-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.scan-sample-btns button {
  font-family: var(--font); font-size: 13.5px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--terra-peach); background: #fff; color: var(--terra-dark);
  border-radius: 999px; padding: 9px 16px; transition: .15s;
}
.scan-sample-btns button:hover { background: var(--terra); color: #fff; border-color: var(--terra); }
.scan-loading { display: flex; align-items: center; gap: 10px; justify-content: center; color: var(--ink-soft); padding: 40px; font-size: 15px; }
.scan-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
@media (max-width: 640px) { .scan-compare { grid-template-columns: 1fr; } .scan-arrow { transform: rotate(90deg); } }
.scan-pane { text-align: center; }
.scan-pane .lbl { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-bottom: 8px; }
.scan-pane .holder { display: flex; justify-content: center; }
.scan-arrow { font-size: 28px; color: var(--terra); font-weight: 800; }
.scan-result-actions { display: flex; gap: 12px; justify-content: center; }
.scan-fail { background: var(--red-soft); color: var(--red); border-radius: var(--radius-sm); padding: 18px; text-align: center; font-weight: 600; font-size: 14px; }
.scan-fail .hint { color: var(--red); opacity: .85; font-weight: 400; }

/* ---------- éditeur admin ---------- */
.adm-list { display: flex; flex-direction: column; gap: 8px; }
.adm-row { display: flex; align-items: center; gap: 8px; }
.adm-in { padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; font-family: var(--font); font-size: 14px; min-width: 0; }
.adm-sel { padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; font-family: var(--font); font-size: 14px; background: #fff; }
.adm-color { width: 40px; height: 38px; border: 1px solid var(--line); border-radius: 9px; padding: 2px; cursor: pointer; background: #fff; }
.adm-num { width: 64px; padding: 9px 8px; border: 1px solid var(--line); border-radius: 9px; font-family: var(--font); }
.adm-req { font-size: 12.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.adm-x { border: 1px solid var(--line); background: #fff; color: var(--ink-soft); border-radius: 8px; padding: 7px 10px; cursor: pointer; font-size: 12px; white-space: nowrap; }
.adm-x:hover { background: var(--red-soft); color: var(--red); border-color: var(--red); }
.adm-prev { background: var(--bg-warm); border: 1px dashed var(--terra-peach); border-radius: 9px; padding: 10px 12px; font-size: 13px; color: var(--terra-dark); font-family: ui-monospace, monospace; }
.adm-tpl { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; background: var(--bg); }
.adm-item { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.adm-savebar { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); padding: 14px 28px; display: flex; align-items: center; justify-content: flex-end; gap: 16px; z-index: 60; }
@media (max-width: 640px) { .adm-row, .adm-item { flex-wrap: wrap; } }

/* ---------- relances du jour (secrétaire) ---------- */
.relance-box {
  background: linear-gradient(135deg, #fff4ec, #fff);
  border: 1px solid var(--terra-peach); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 24px;
  animation: pop .35s ease both;
}
.rb-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rb-head b { font-size: 16px; color: var(--terra-dark); }
.rb-bell { font-size: 20px; }
.rb-sub { font-size: 13px; color: var(--ink-soft); }
.rb-list { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.rb-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px;
}
.rb-who { font-weight: 750; font-size: 14.5px; }
.rb-meta { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.rb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rb-actions .btn { padding: 9px 15px; font-size: 13.5px; }

/* ---------- envois d'un dossier ---------- */
.envoi-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.envoi { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px; margin-bottom: 10px; background: #fff; }
.envoi.replied { background: var(--green-soft); border-color: #cce8d8; }
.envoi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.envoi-act { display: flex; gap: 6px; flex-wrap: wrap; }
.envoi-act .btn { padding: 7px 12px; font-size: 12.5px; }
.rsteps { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.rstep {
  font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-soft); background: #faf6f2;
}
.rstep.done { background: var(--green-soft); color: var(--green); border-color: #cce8d8; }
.rstep.due { background: var(--red-soft); color: var(--red); border-color: #f3d6cc; }
.rstep.pending { background: #fbf3e3; color: var(--amber); border-color: #f0e0bb; }

/* ---------- pièce refusée / à refaire ---------- */
.rescard.refused { background: #fdf4f1; border-color: #f3d6cc; }
.rescard .redo {
  margin-top: 9px; font-size: 12.5px; font-weight: 700; color: var(--red);
  background: var(--red-soft); border: 1px solid #f3d6cc; border-radius: 8px; padding: 8px 10px;
}
.rescard .redo span { font-weight: 500; color: var(--terra-dark); }
.tree-file.refused .nm { color: var(--red); text-decoration: line-through; opacity: .8; }
.tf-redo {
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: var(--red-soft); color: var(--red); padding: 2px 8px; border-radius: 6px; margin-left: 8px;
}
.tree-file .tf-reject { margin-left: 8px; padding: 2px 7px; color: #b7a99e; cursor: pointer; opacity: .85; transition: .15s; font-weight: 700; }
.tree-file .tf-reject:hover, .tree-file .tf-reject:active { color: var(--amber); }
.tree-file.flagged { background: #fdf8ef; }
.tf-warn { font-size: 10.5px; font-weight: 700; background: #fbf3e3; color: var(--amber); padding: 2px 8px; border-radius: 6px; margin-left: 8px; border: 1px solid #f0e0bb; }

/* validité (doc périmé / mauvaise année / trop ancien) côté client */
.rescard.flagged { border-color: #f0d8a8; background: #fffdf7; }
.rescard .invalid {
  margin-top: 9px; font-size: 12.5px; font-weight: 700; color: var(--amber);
  background: #fbf3e3; border: 1px solid #f0e0bb; border-radius: 8px; padding: 8px 10px;
}
.rescard .invalid span { font-weight: 500; color: var(--terra-dark); }

/* ---------- LLM shell (sidebar + main, expérience ChatGPT-like) ---------- */
.app-body { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.app { display: flex; height: 100vh; height: 100dvh; }

.sidebar { position: fixed; top: 0; left: 0; width: 264px; height: 100vh; height: 100dvh; background: #fff; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 16px 12px; z-index: 60; transition: transform .2s ease; }
.sb-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: var(--terra-dark); padding: 6px 8px 14px; }
.sb-brand img { height: 30px; }
.sb-new { width: 100%; border: none; cursor: pointer; background: var(--terra); color: #fff; font-family: var(--font); font-weight: 700;
  font-size: 14.5px; padding: 11px 14px; border-radius: 12px; box-shadow: 0 6px 18px rgba(218,86,35,.25); margin-bottom: 14px; }
.sb-new:hover { background: var(--terra-dark); }
.sb-nav { display: flex; flex-direction: column; gap: 3px; flex: none; }
.sb-convs { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: 10px; }
.sb-subnew { border: 1px dashed var(--terra-peach); background: none; color: var(--terra-dark); cursor: pointer;
  font-family: var(--font); font-weight: 700; font-size: 13px; padding: 8px 12px; border-radius: 10px; margin-bottom: 6px; }
.sb-subnew:hover { background: #fff1ea; }
.conv-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.conv-item { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 9px; cursor: pointer; font-size: 13.5px; color: var(--ink); }
.conv-item:hover { background: var(--bg-warm); }
.conv-item.active { background: #fff1ea; color: var(--terra-dark); font-weight: 600; }
.conv-item .ct { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item .cx { opacity: 0; border: none; background: none; cursor: pointer; color: var(--ink-soft); font-size: 14px; }
.conv-item:hover .cx { opacity: 1; }
.conv-item .cx:hover { color: var(--red); }
.sb-foot { display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--line); padding-top: 8px; }
.sb-foot form { margin: 0; }
.sb-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; border: none; background: none; cursor: pointer;
  font-family: var(--font); font-size: 14.5px; color: var(--ink); padding: 10px 12px; border-radius: 10px; text-decoration: none; transition: .12s; }
.sb-item span { font-size: 17px; width: 20px; text-align: center; }
.sb-item:hover { background: var(--bg-warm); }
.sb-item.active { background: #fff1ea; color: var(--terra-dark); font-weight: 700; }
.sb-badge { margin-left: auto; background: var(--bg-warm); color: var(--ink-soft); font-size: 12px; font-weight: 800; font-style: normal;
  min-width: 20px; text-align: center; padding: 1px 7px; border-radius: 999px; }
.sb-badge:empty { display: none; }
.sb-badge.urgent:not(:empty) { background: var(--terra); color: #fff; }

.sb-overlay { display: none; position: fixed; inset: 0; background: rgba(42,32,26,.45); z-index: 55; }

.main { flex: 1; min-width: 0; margin-left: 264px; height: 100vh; height: 100dvh; display: flex; flex-direction: column; transition: margin-left .2s ease; }
.main-top { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.7); backdrop-filter: blur(8px); }
.burger { border: 1px solid var(--line); background: #fff; border-radius: 9px; width: 38px; height: 38px; cursor: pointer; font-size: 17px; color: var(--ink); }
.burger:hover { background: var(--bg-warm); }
.main-title { font-weight: 750; font-size: 15.5px; }
.main-body { flex: 1; min-height: 0; display: flex; }

.app.sidebar-hidden .sidebar { transform: translateX(-100%); }
.app.sidebar-hidden .main { margin-left: 0; }
@media (max-width: 820px) {
  .main { margin-left: 0; }
  .sidebar { box-shadow: var(--shadow-lg); }
  .app:not(.sidebar-hidden) .sb-overlay { display: block; }
}

.chat-full { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-full .ask-msgs { flex: 1; }

.view-pad { flex: 1; overflow-y: auto; padding: 24px 28px; }
.view-inner { max-width: 1180px; margin: 0 auto; }
@media (max-width: 600px) { .view-pad { padding: 16px; } }

/* ---------- assistant Hary (chat) ---------- */
.ask-fab {
  position: fixed; bottom: 102px; right: 22px; z-index: 210;
  background: #fff; color: var(--terra-dark); border: 1px solid var(--terra-peach); cursor: pointer;
  font-family: var(--font); font-size: 13.5px; font-weight: 700;
  padding: 10px 16px; border-radius: 999px; box-shadow: var(--shadow);
  display: inline-flex; align-items: center; gap: 7px; transition: .16s;
}
.ask-fab:hover { background: var(--bg-warm); transform: translateY(-2px); }

/* gros bouton mains libres */
.conv-fab {
  position: fixed; bottom: 22px; right: 22px; z-index: 210;
  width: 68px; height: 68px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--terra); color: #fff; font-size: 28px; line-height: 1;
  box-shadow: 0 10px 30px rgba(218,86,35,.42); transition: .16s;
  display: grid; place-items: center;
}
.conv-fab:hover { background: var(--terra-dark); transform: translateY(-2px) scale(1.04); }
.conv-fab.on { animation: convpulse 1.1s ease-in-out infinite; }
@keyframes convpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(218,86,35,.5); } 50% { box-shadow: 0 0 0 16px rgba(218,86,35,0); } }
@media (max-width: 520px) { .conv-fab { bottom: 16px; right: 16px; } .ask-fab { bottom: 94px; right: 16px; } }
.ask-panel {
  position: fixed; bottom: 22px; right: 22px; z-index: 211;
  width: min(420px, calc(100vw - 32px)); height: min(620px, calc(100vh - 44px));
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-lg); display: none; flex-direction: column; overflow: hidden;
}
.ask-panel.open { display: flex; animation: pop .2s ease both; }
.ask-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--bg-warm); border-bottom: 1px solid var(--line); }
.ask-head b { font-size: 16px; }
.ask-sub { font-size: 12px; color: var(--ink-soft); }
.ask-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
.ask-b { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; }
.ask-b ul { margin: 4px 0 4px 2px; padding-left: 18px; }
.ask-b li { margin: 2px 0; }
.ask-user { align-self: flex-end; background: var(--terra); color: #fff; border-bottom-right-radius: 5px; }
.ask-bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.ask-action { align-self: flex-start; margin-top: -2px; }
.ask-action .btn { padding: 9px 15px; font-size: 13.5px; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 8px; background: var(--bg); }
.ask-chip { font-family: var(--font); font-size: 12.5px; color: var(--terra-dark); background: #fff; border: 1px solid var(--terra-peach); border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: .15s; }
.ask-chip:hover { background: var(--terra); color: #fff; border-color: var(--terra); }
.ask-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: #fff; align-items: flex-end; }
.ask-conv { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--terra-peach); background: #fff; color: var(--terra-dark); cursor: pointer; font-size: 15px; transition: .15s; }
.ask-conv:hover { background: var(--bg-warm); }
.ask-conv.on { background: var(--terra); color: #fff; border-color: var(--terra); animation: micpulse 1.2s ease-in-out infinite; }
.conv-status { padding: 9px 16px; font-size: 13px; font-weight: 700; color: var(--ink-soft); background: var(--bg-warm); border-bottom: 1px solid var(--line); text-align: center; }
.conv-status.listen { color: var(--green); }
.conv-status.speak { color: var(--terra-dark); }
.conv-status.work { color: var(--amber); }
.ask-mic { flex: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 18px; transition: .15s; }
.ask-mic:hover { background: var(--bg-warm); }
.ask-mic.rec { background: var(--red-soft); border-color: var(--red); animation: micpulse 1s ease-in-out infinite; }
@keyframes micpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(192,73,43,.35); } 50% { box-shadow: 0 0 0 7px rgba(192,73,43,0); } }
.ask-input textarea { flex: 1; resize: none; max-height: 110px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-family: var(--font); font-size: 14px; line-height: 1.4; }
.ask-input .btn { padding: 10px 16px; border-radius: 12px; font-size: 17px; font-weight: 800; }
@media (max-width: 520px) { .ask-panel { bottom: 0; right: 0; width: 100vw; height: 100dvh; border-radius: 0; } }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* confetti */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 999; overflow: hidden; }
.confetti i {
  position: absolute; top: -10px; width: 9px; height: 14px; border-radius: 2px;
  animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(105vh) rotate(540deg); opacity: .9; } }