/* =========================================================
   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 { position: relative; }
.piece-del { position: absolute; bottom: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--ink-soft); cursor: pointer; font-size: 12px; line-height: 1; opacity: 0; transition: .15s; }
.rescard:hover .piece-del { opacity: 1; }
.piece-del:hover { background: var(--red-soft); color: var(--red); border-color: var(--red); }
.tree-file .tf-del { margin-left: 12px; color: #c9bcb1; cursor: pointer; opacity: 0; transition: .15s; }
.tree-file.clickable:hover .tf-del { opacity: 1; }
.tree-file .tf-del:hover { 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; }

@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; } }