:root{
  --sable:#EDE4D3; --sable-clair:#F7F2E7; --terre:#C1622D; --terre-fonce:#9B4A20;
  --baobab:#3F5C43; --anthracite:#2B2622; --or:#B8923D; --carte:#FAF6EE; --ligne:rgba(43,38,34,0.12);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--sable); color:var(--anthracite); font-family:'General Sans',sans-serif;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:'Fraunces',serif;}
.mono{font-family:'IBM Plex Mono',monospace;}
svg.ic{ width:17px; height:17px; flex-shrink:0; }
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}

/* ===== app shell ===== */
#app{
  max-width:480px; margin:0 auto; min-height:100vh; background:var(--sable-clair);
  position:relative; padding-bottom:90px;
}
.screen{ display:none; }
.screen.active{ display:block; }

.topbar{
  padding:22px 20px 14px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; background:var(--sable-clair); z-index:1500; border-bottom:1px solid transparent;
}
.topbar h2{font-size:20px; font-weight:600;}
.icon-btn{
  width:34px; height:34px; border-radius:50%; background:var(--carte);
  border:1px solid var(--ligne); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--anthracite);
}

.bottom-nav{
  position:fixed; bottom:16px; left:16px; right:16px; max-width:448px; margin:0 auto; z-index:1500;
  background:rgba(43,38,34,0.94); backdrop-filter:blur(8px);
  border-radius:100px; padding:10px 8px;
  display:flex; justify-content:space-around; align-items:center;
}
.nav-item{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  color:rgba(247,242,231,0.5); font-size:9.5px; cursor:pointer; padding:4px 10px;
  border:none; background:none; font-family:'General Sans';
}
.nav-item.active{color:var(--sable-clair);}
.nav-item svg.ic{width:19px; height:19px;}
.nav-icon-wrap{position:relative; display:inline-flex;}
.nav-badge{
  position:absolute; top:-2px; right:-4px; width:8px; height:8px; border-radius:50%;
  background:#E24C3B; border:1.5px solid rgba(43,38,34,0.94);
}

/* ===== badges / chips ===== */
.tag{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:600; white-space:nowrap;
  padding:6px 12px 6px 9px;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.tag svg.ic{width:12px; height:12px;}
.tag-ok{ background:rgba(63,92,67,.13); color:var(--baobab); }
.tag-warn{ background:rgba(184,146,61,.18); color:#8a6b23; }
.tag-neutral{ background:rgba(43,38,34,.08); color:var(--anthracite); }
.tag-terre{ background:rgba(193,98,45,.14); color:var(--terre-fonce); }

.chip{
  white-space:nowrap; background:var(--carte); border:1px solid var(--ligne);
  padding:7px 14px; font-size:12.5px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.chip.on{background:var(--terre); color:var(--sable-clair); border-color:var(--terre);}
.chips{display:flex; gap:8px; padding:0 20px 16px; overflow-x:auto;}

.search-bar{
  margin:0 20px 14px; background:var(--carte); border:1px solid var(--ligne);
  padding:12px 16px; font-size:14px; color:rgba(43,38,34,0.5);
  display:flex; align-items:center; gap:9px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* ===== listing ===== */
.list{padding:0 20px 20px; display:flex; flex-direction:column; gap:14px;}
.m-card{
  background:var(--carte); border:1px solid var(--ligne); border-radius:18px; overflow:hidden;
  display:flex; cursor:pointer;
}
.m-thumb{width:96px; flex-shrink:0; background:linear-gradient(135deg,var(--baobab),#7d8a5c); position:relative;}
.m-thumb.t2{background:linear-gradient(135deg,#a6784a,var(--terre));}
.m-thumb.t3{background:linear-gradient(135deg,#6b6650,#8a8354);}
.m-thumb svg{position:absolute; inset:0; margin:auto; opacity:.35; color:#fff;}
.m-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.m-info{padding:12px 14px; flex:1;}
.m-zone{font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; opacity:.55; margin-bottom:4px;}
.m-title{font-size:15px; font-weight:600; margin-bottom:6px;}
.m-row{display:flex; justify-content:space-between; align-items:center;}
.m-price{font-family:'Fraunces',serif; font-weight:600; color:var(--terre-fonce); font-size:14.5px;}
.empty-state{padding:60px 30px; text-align:center; opacity:.5; font-size:13.5px;}

.m-actions{display:flex; gap:8px; margin-top:10px;}
.m-action-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  background:var(--sable-clair); border:1px solid var(--ligne); border-radius:10px;
  padding:8px; font-size:11.5px; font-weight:600; color:var(--anthracite); cursor:pointer;
  font-family:'General Sans';
}
.m-action-btn svg.ic{width:13px; height:13px;}
.m-action-danger{color:#a83a2c; border-color:rgba(168,58,44,.3); background:rgba(168,58,44,.06);}

/* ===== fiche terrain ===== */
.hero-img{ height:230px; background:linear-gradient(160deg,#4a5a3f,#8a8354); position:relative; }
.hero-img .back{
  position:absolute; top:22px; left:20px; width:34px; height:34px; border-radius:50%;
  background:rgba(250,246,238,.9); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.hero-img .score-float{
  position:absolute; bottom:14px; right:14px; background:rgba(250,246,238,.95);
  padding:7px 13px 7px 10px; font-size:11.5px; font-weight:600; display:flex; align-items:center; gap:6px;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.score-float svg.ic{width:13px; height:13px; color:var(--baobab);}
.sheet{padding:20px 20px 0;}
.sheet .zone{font-size:12px; text-transform:uppercase; letter-spacing:.5px; opacity:.55; margin-bottom:6px;}
.sheet h1{font-size:24px; font-weight:600; margin-bottom:14px;}
.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px;}
.stat{background:var(--carte); border:1px solid var(--ligne); border-radius:14px; padding:12px; text-align:center;}
.stat .v{font-family:'IBM Plex Mono'; font-weight:500; font-size:14px;}
.stat .l{font-size:10px; opacity:.55; margin-top:3px;}
.badges-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;}
.desc{font-size:13.5px; opacity:.75; margin-bottom:20px; line-height:1.6;}
.seller{
  display:flex; align-items:center; gap:12px; background:var(--carte); border:1px solid var(--ligne);
  border-radius:16px; padding:14px; margin-bottom:20px;
}
.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--or),var(--terre));
  display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Fraunces';font-weight:600; flex-shrink:0;}
.seller .name{font-weight:600; font-size:14px;}
.seller .sub{font-size:11.5px; opacity:.55;}
.cta-row{display:flex; gap:10px; padding:0 20px 20px;}
.btn-p, .btn-s{
  flex:1; border:none; padding:14px; border-radius:14px; font-weight:600; font-size:13.5px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-p{background:var(--terre); color:#fff;}
.btn-s{background:var(--anthracite); color:#fff;}
.btn-p svg.ic, .btn-s svg.ic{width:15px; height:15px;}
.btn-full{width:100%;}
.btn-p:disabled, .btn-s:disabled{opacity:.6; cursor:not-allowed;}

/* ===== formulaires ===== */
.steps-dots{display:flex; gap:6px; padding:0 20px 20px;}
.steps-dots span{flex:1; height:4px; border-radius:4px; background:var(--ligne);}
.steps-dots span.done{background:var(--terre);}
.form-block{padding:0 20px 20px;}
.form-block label{font-size:12.5px; font-weight:600; opacity:.7; display:block; margin-bottom:7px;}
.form-block input, .form-block select, .form-block textarea{
  width:100%; background:var(--carte); border:1px solid var(--ligne); border-radius:12px;
  padding:12px 14px; font-size:13.5px; margin-bottom:16px; font-family:'General Sans'; color:var(--anthracite);
}
.upload-box{
  border:1.5px dashed var(--ligne); border-radius:14px; padding:22px; text-align:center;
  margin-bottom:16px; font-size:12.5px; opacity:.65; display:flex; flex-direction:column; align-items:center; gap:8px;
  cursor:pointer; position:relative;
}
.upload-box input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer;}
.upload-box svg.ic{width:22px; height:22px; opacity:.6;}
.step-nav{display:flex; gap:10px; padding:10px 20px 20px;}

/* ===== messages ===== */
.conv{ display:flex; align-items:center; gap:12px; padding:14px 20px; cursor:pointer; border-bottom:1px solid var(--ligne); }
.conv .name{font-weight:600; font-size:14px;}
.conv .last{font-size:12px; opacity:.55; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px;}
.conv .time{font-size:10.5px; opacity:.4; margin-left:auto;}
.conv-non-lu .name{font-weight:700;}
.conv-non-lu .last{opacity:.85; font-weight:500; color:var(--anthracite);}
.dot-non-lu{display:inline-block; width:7px; height:7px; border-radius:50%; background:#E24C3B; margin-left:6px; vertical-align:middle;}

.chat-thread{padding:14px 20px; display:flex; flex-direction:column; gap:10px;}
.bubble{max-width:75%; padding:10px 14px; border-radius:16px; font-size:13.5px;}
.bubble.mine{align-self:flex-end; background:var(--terre); color:#fff; border-bottom-right-radius:4px;}
.bubble.theirs{align-self:flex-start; background:var(--carte); border:1px solid var(--ligne); border-bottom-left-radius:4px;}
.chat-input{
  position:sticky; bottom:0; display:flex; gap:8px; padding:12px 20px; background:var(--sable-clair);
  border-top:1px solid var(--ligne);
}
.chat-input input{flex:1; background:var(--carte); border:1px solid var(--ligne); border-radius:100px; padding:11px 16px; font-size:13.5px;}
.chat-input button{background:var(--terre); color:#fff; border:none; width:40px; height:40px; border-radius:50%; cursor:pointer;}

/* ===== notaires ===== */
.not-item{
  display:flex; align-items:center; gap:12px; padding:14px 20px; margin:0 20px 12px;
  background:var(--carte); border:1px solid var(--ligne); border-radius:16px;
}
.not-item .info{flex:1;}
.not-item .name{font-weight:600; font-size:14px;}
.not-item .ville{font-size:11.5px; opacity:.55;}
.not-item .go{width:32px;height:32px;border-radius:50%;background:var(--anthracite);color:#fff;display:flex;align-items:center;justify-content:center; flex-shrink:0; border:none; cursor:pointer;}
.not-item .go svg.ic{width:14px;height:14px;}

/* ===== profil ===== */
.profil-head{display:flex; flex-direction:column; align-items:center; padding:10px 20px 24px; text-align:center;}
.profil-avatar{width:74px;height:74px;border-radius:50%;background:linear-gradient(135deg,var(--or),var(--terre));
  display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Fraunces';font-weight:600;font-size:26px;margin-bottom:12px;}
.menu-item{
  display:flex; align-items:center; gap:14px; padding:15px 20px; border-bottom:1px solid var(--ligne);
  font-size:13.5px; cursor:pointer;
}
.menu-item svg.ic{width:17px; height:17px; opacity:.7;}
.menu-item .arrow{margin-left:auto; opacity:.35; display:flex;}
.menu-item .arrow svg.ic{width:14px;height:14px;}

/* ===== auth ===== */
.auth-wrap{padding:60px 24px; display:flex; flex-direction:column; min-height:100vh; justify-content:center;}
.auth-wrap h1{font-size:30px; margin-bottom:8px;}
.auth-wrap p.lead{opacity:.65; font-size:14px; margin-bottom:28px;}
.role-picker{display:flex; gap:8px; margin-bottom:18px;}
.role-opt{
  flex:1; text-align:center; padding:12px 6px; border-radius:12px; border:1px solid var(--ligne);
  background:var(--carte); font-size:12.5px; cursor:pointer;
}
.role-opt.on{background:var(--anthracite); color:#fff; border-color:var(--anthracite);}
.auth-switch{text-align:center; margin-top:16px; font-size:13px; opacity:.7;}
.auth-switch a{color:var(--terre); font-weight:600;}
.error-msg{background:rgba(193,98,45,.12); color:var(--terre-fonce); padding:10px 14px; border-radius:10px; font-size:12.5px; margin-bottom:14px; display:none;}
.error-msg.show{display:block;}

.loader{padding:80px 30px; text-align:center; opacity:.5; font-size:13px;}