/* ============================================================
   Immo Gestion — Design system
   Palette pétrole profond + or discret. Aucune dépendance externe.
   ============================================================ */
:root{
  --ink:#152420;
  --bg:#f4f6f4;
  --surface:#ffffff;
  --primary:#0f5c57;
  --primary-dark:#0a423e;
  --primary-soft:#e5efed;
  --accent:#c29a3b;
  --accent-soft:#f6efdd;
  --muted:#6d7b76;
  --border:#e3e8e5;
  --ok:#1f8a5b;      --ok-bg:#e6f4ec;
  --info:#2b6cb0;    --info-bg:#e7f0f9;
  --warn:#b8860b;    --warn-bg:#fbf1d9;
  --danger:#c0392b;  --danger-bg:#fbe9e7;
  --radius:10px;
  --shadow:0 1px 2px rgba(21,36,32,.06), 0 4px 16px rgba(21,36,32,.05);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  font-size:14.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .4em;letter-spacing:-.01em;line-height:1.2}
.num{font-variant-numeric:tabular-nums}

/* ---------- Layout shell ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{
  width:238px;flex-shrink:0;background:var(--primary-dark);color:#cfe0dd;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.brand{
  padding:20px 22px 16px;font-size:19px;font-weight:700;color:#fff;
  letter-spacing:-.02em;display:flex;align-items:center;gap:10px;
}
.brand .dot{width:10px;height:10px;border-radius:3px;background:var(--accent);transform:rotate(45deg)}
.nav{padding:6px 12px;flex:1;overflow-y:auto}
.nav a{
  display:flex;align-items:center;gap:11px;padding:9px 12px;margin:2px 0;border-radius:8px;
  color:#bcd2ce;font-weight:500;text-decoration:none;font-size:14px;
}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.active{background:var(--primary);color:#fff}
.nav a.active .ic{opacity:1}
.nav .ic{width:18px;text-align:center;opacity:.8;font-size:15px}
.nav .sep{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#7fa29c;padding:14px 12px 6px}
.side-foot{padding:14px 18px;border-top:1px solid rgba(255,255,255,.08);font-size:12.5px;color:#9db8b3}
.side-foot a{color:#cfe0dd}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  height:60px;background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:16px;padding:0 26px;position:sticky;top:0;z-index:20;
}
.topbar .page-title{font-size:17px;font-weight:700;letter-spacing:-.01em}
.topbar .spacer{flex:1}
.userchip{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted)}
.userchip .av{width:32px;height:32px;border-radius:50%;background:var(--primary-soft);color:var(--primary);
  display:grid;place-items:center;font-weight:700}
.userchip .role{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);font-weight:700}
.content{padding:26px;max-width:1240px;width:100%}

/* ---------- Cards / KPI ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 18px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi .label{font-size:12.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.kpi .value{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-top:6px}
.kpi .sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.kpi .rail{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--primary)}
.kpi.accent .rail{background:var(--accent)}
.kpi.ok .rail{background:var(--ok)}
.kpi.info .rail{background:var(--info)}

.grid2{display:grid;grid-template-columns:1.6fr 1fr;gap:18px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:18px}
.card-head{padding:15px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.card-head h2{font-size:15px;margin:0;font-weight:700}
.card-head .spacer{flex:1}
.card-body{padding:16px 18px}
.card-body.flush{padding:0}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:13.8px}
table.data th{
  text-align:left;padding:11px 16px;background:#fafbfa;color:var(--muted);
  font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
table.data td{padding:11px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
table.data tr:last-child td{border-bottom:none}
table.data tbody tr:hover{background:#fafcfb}
.text-right{text-align:right}
.mini{font-size:12.5px;color:var(--muted)}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.empty .big{font-size:30px;margin-bottom:8px;opacity:.5}

/* ---------- Badges ---------- */
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:700;letter-spacing:.01em}
.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-info{background:var(--info-bg);color:var(--info)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-danger{background:var(--danger-bg);color:var(--danger)}
.badge-muted{background:#eef1ef;color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:8px;border:1px solid transparent;
  font-size:13.8px;font-weight:600;cursor:pointer;font-family:inherit;text-decoration:none;line-height:1;transition:.12s}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{filter:brightness(.95)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--border)}
.btn-ghost:hover{background:#f6f8f7}
.btn-danger{background:var(--danger-bg);color:var(--danger)}
.btn-danger:hover{background:#f7d9d5}
.btn-sm{padding:6px 11px;font-size:12.8px}
.btn-icon{padding:6px 9px}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px 18px}
.form-grid .full{grid-column:1/-1}
.field label{display:block;font-size:12.8px;font-weight:600;color:var(--ink);margin-bottom:5px}
.field input,.field select,.field textarea{
  width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:8px;font-size:14px;
  font-family:inherit;color:var(--ink);background:#fff;transition:.12s}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.field textarea{resize:vertical;min-height:80px}
.field .hint{font-size:11.5px;color:var(--muted);margin-top:4px}
.form-actions{display:flex;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}

/* ---------- Toolbar / filters ---------- */
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.toolbar .spacer{flex:1}
.search{position:relative}
.search input{padding:9px 12px 9px 34px;border:1px solid var(--border);border-radius:8px;font-size:14px;min-width:230px;font-family:inherit}
.search input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.search .mag{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted)}
.topbar-search{position:relative;margin-right:14px}
.topbar-search input{padding:8px 12px 8px 32px;border:1px solid var(--border);border-radius:20px;
  font-size:13.5px;width:210px;font-family:inherit;background:#fafbfa;transition:width .2s}
.topbar-search input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);width:280px;background:#fff}
.topbar-search .mag{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted)}
@media (max-width:760px){.topbar-search{display:none}}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters select{padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:13.5px;font-family:inherit;background:#fff}

/* ---------- Flash / alerts ---------- */
.flash{padding:12px 16px;border-radius:9px;margin-bottom:18px;font-weight:600;font-size:14px;display:flex;align-items:center;gap:9px}
.flash-success{background:var(--ok-bg);color:var(--ok)}
.flash-error{background:var(--danger-bg);color:var(--danger)}
.flash-info{background:var(--info-bg);color:var(--info)}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;
  background:radial-gradient(1200px 600px at 20% -10%, #12706a 0%, var(--primary-dark) 55%, #072e2b 100%)}
.login-card{background:var(--surface);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.35);width:380px;max-width:92vw;padding:34px 32px}
.login-card .brand{color:var(--ink);padding:0 0 4px;font-size:23px}
.login-card .sub{color:var(--muted);font-size:13.5px;margin-bottom:22px}
.login-card .field{margin-bottom:14px}
.login-card .btn{width:100%;justify-content:center;padding:11px}
.login-hint{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);font-size:12px;color:var(--muted);line-height:1.7}

/* ---------- Map ---------- */
#map{height:520px;width:100%;border-radius:var(--radius);z-index:1}
.map-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--muted)}
.map-legend span{display:inline-flex;align-items:center;gap:6px}
.pin-dot{width:12px;height:12px;border-radius:50%;display:inline-block;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.15)}

/* ---------- Receipt ---------- */
.receipt{max-width:720px;margin:24px auto;background:#fff;border:1px solid var(--border);border-radius:12px;padding:36px}
.receipt h1{font-size:22px}
.receipt .r-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--border)}
.receipt .r-total{font-size:20px;font-weight:800;color:var(--primary);margin-top:14px}

/* ---------- Misc ---------- */
.detail-list{list-style:none;margin:0;padding:0}
.detail-list li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);font-size:14px}
.detail-list li:last-child{border-bottom:none}
.detail-list .k{color:var(--muted)}
.detail-list .v{font-weight:600}
.pill{display:inline-block;padding:2px 9px;border-radius:6px;background:var(--primary-soft);color:var(--primary);font-size:12px;font-weight:600}
.list-mini{list-style:none;margin:0;padding:0}
.list-mini li{padding:12px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.list-mini li:last-child{border-bottom:none}
.list-mini .lead{flex:1;min-width:0}
.list-mini .lead .t{font-weight:600;font-size:13.8px}
.list-mini .lead .s{font-size:12.5px;color:var(--muted)}

/* Pied de page des documents imprimables (facture, reçu, contrat, relevés…)
   Style « papier à en-tête professionnel » : filet fin avec un trait d'accent
   centré aux couleurs de l'agence, raison sociale en petites majuscules,
   coordonnées minuscules et discrètes séparées par des points médians.
   La grande marge supérieure réserve l'espace nécessaire aux signatures. */
.doc-footer{
  margin-top:64px;                 /* espace confortable au-dessus : place pour signer */
  padding-top:11px;
  border-top:1px solid var(--border);
  position:relative;
  text-align:center;color:var(--muted);
  break-inside:avoid;page-break-inside:avoid;
}
.doc-footer::before{              /* petit trait d'accent centré sur le filet */
  content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:64px;height:3px;border-radius:2px;background:var(--primary);
}
.doc-footer .df-nom{
  font-weight:700;color:var(--ink);
  font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;
}
.doc-footer .df-lignes{
  margin-top:4px;font-size:8.5px;line-height:1.7;letter-spacing:.02em;
  display:flex;flex-wrap:wrap;justify-content:center;column-gap:0;
}
.doc-footer .df-item{white-space:normal;max-width:100%}   /* une ligne plus longue que la page passe à la ligne au lieu d'être coupée */
.doc-footer .df-item + .df-item::before{
  content:"·";margin:0 7px;color:var(--primary);font-weight:700;
}
@media print{
  .doc-footer{margin-top:56px;border-top-color:#ccc}
  .doc-footer::before,.doc-footer .df-item + .df-item::before{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
}

@media (max-width:920px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .grid2{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .sidebar{position:fixed;left:-260px;transition:left .2s;z-index:60;box-shadow:6px 0 30px rgba(0,0,0,.2)}
  .sidebar.open{left:0}
  .menu-toggle{display:inline-flex !important}
  .content{padding:18px}
}
.menu-toggle{display:none;background:none;border:1px solid var(--border);border-radius:8px;padding:7px 10px;cursor:pointer;font-size:16px}
/* En-tête d'impression : caché à l'écran, affiché sur papier */
.print-header{display:none}
@media print{
  .sidebar,.topbar,.no-print{display:none !important}
  .content{padding:0}
  body{background:#fff}
  .print-header{display:flex;justify-content:space-between;align-items:center;
    border-bottom:2px solid #333;padding-bottom:12px;margin-bottom:18px}
  .card{border:1px solid #ddd;box-shadow:none;break-inside:avoid}
}

/* ---------- Map picker (formulaire biens) ---------- */
.map-picker{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff}
.mp-toolbar{display:flex;gap:8px;padding:10px;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--border);background:#fafbfa}
.mp-search{flex:1;display:flex;gap:6px;min-width:220px}
.mp-search-input{flex:1;padding:8px 11px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit}
.mp-search-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.mp-map{height:340px;width:100%;z-index:1}
.mp-coords{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;padding:14px;align-items:end}
.mp-coords .mp-status{grid-column:1/-1}
@media (max-width:640px){.mp-coords{grid-template-columns:1fr}}

/* Fiche bien */
.fiche-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
@media (max-width:920px){.fiche-grid{grid-template-columns:1fr}}
#fiche-map{height:300px;border-radius:var(--radius);z-index:1}
.stat-inline{display:flex;gap:22px;flex-wrap:wrap;margin:4px 0 2px}
.stat-inline .s .n{font-size:20px;font-weight:800;letter-spacing:-.02em}
.stat-inline .s .l{font-size:12px;color:var(--muted)}

/* ---------- Documents & photos ---------- */
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-bottom:16px}
.doc{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff}
.doc-vue{display:block;height:110px;background:#f3f5f4;overflow:hidden}
.doc-vue img{width:100%;height:100%;object-fit:cover;display:block}
.doc-icone{height:100%;display:grid;place-items:center;font-weight:800;color:var(--muted);font-size:18px;letter-spacing:.04em}
.doc-info{padding:9px 10px}
.doc-nom{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-meta{display:flex;align-items:center;gap:6px;margin-top:5px;flex-wrap:wrap}
.doc-upload{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--border)}
.doc-upload input[type=file]{padding:7px;font-size:13px}

/* ---------- Journal ---------- */
.j-row td{vertical-align:top}
.j-desc{font-size:13.5px}