/* ============================================================
   KEYSACTIV' — Recherche de biens (liste + carte) · design Claude Design
   ============================================================ */
:root{
  --nuit:#0B1F3A; --nuit-700:#0E2545; --nuit-900:#081627;
  --or:#C9A961; --or-clair:#E4CE9C; --or-fonce:#8C6A22;
  --creme:#F8F7F4; --bg:#FBFAF7; --sable:#EDE7DC;
  --ink:#10151C; --gris:#5D6573; --gris-2:#8A919C;
  --line:#E7E2D8; --line-2:#EFEBE2;
  --ok:#1F8A5B; --danger:#B8412A;
  --logo:'Philosopher',Georgia,serif; --serif:'Playfair Display',Georgia,serif;
  --sans:'DM Sans','Helvetica Neue',Arial,sans-serif;
  --r:14px; --r-sm:10px;
  --shadow:0 1px 2px rgba(8,22,39,.05),0 10px 30px rgba(8,22,39,.07);
  --shadow-lg:0 24px 60px rgba(8,22,39,.20);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5;}
body.p-recherche{overflow:hidden;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,select,textarea{font-family:inherit;font-size:inherit;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--or-clair);}
:focus-visible{outline:2px solid var(--or);outline-offset:2px;}

.page{display:flex;flex-direction:column;height:100vh;height:100dvh;}

/* ---------- Header ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px clamp(16px,3vw,32px);border-bottom:1px solid var(--line);background:#fff;z-index:40;position:relative;}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;}
.brand svg{height:34px;width:auto;}.brand svg path{fill:var(--nuit);}
.brand__w{font-family:var(--logo);font-size:24px;line-height:1;}
.brand__w .k{font-weight:700;color:var(--nuit);}.brand__w .a{font-weight:400;font-style:italic;color:var(--or);}
.top__nav{display:flex;gap:6px;}
.top__tab{font-size:14px;font-weight:600;color:var(--gris);padding:8px 12px;border-radius:999px;white-space:nowrap;}
.top__tab:hover{color:var(--nuit);background:var(--creme);}
.top__tab.is-on{color:var(--nuit);background:var(--sable);}
.searchbar{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:999px;padding:5px 5px 5px 12px;box-shadow:var(--shadow);background:#fff;min-width:0;}
.searchbar .seg{display:flex;flex-direction:column;padding:2px 12px;border-right:1px solid var(--line);min-width:0;}
.searchbar .seg:last-of-type{border-right:none;}
.searchbar .seg .l{font-size:11px;font-weight:700;color:var(--nuit);letter-spacing:.02em;}
.searchbar .seg .v{font-size:13px;color:var(--gris);border:none;background:transparent;padding:0;outline:none;min-width:0;max-width:150px;cursor:pointer;}
.searchbar__go{width:40px;height:40px;border-radius:50%;background:var(--or);color:var(--nuit);display:flex;align-items:center;justify-content:center;margin-left:4px;flex:0 0 40px;}
.searchbar__go svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4;}
.top__r{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.ghostlink{font-size:14px;font-weight:600;color:var(--nuit);white-space:nowrap;}
.ghostlink:hover{text-decoration:underline;}
.avatar-btn{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;padding:6px 8px 6px 14px;box-shadow:var(--shadow);}
.avatar-btn svg{width:16px;height:16px;stroke:var(--nuit);fill:none;stroke-width:2;}
.avatar-btn .av{width:30px;height:30px;border-radius:50%;background:var(--nuit);color:var(--creme);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;}

/* ---------- Filtres ---------- */
.filterbar{display:flex;align-items:center;gap:10px;padding:12px clamp(16px,3vw,32px);border-bottom:1px solid var(--line);background:#fff;z-index:30;overflow-x:auto;position:relative;}
.filterbar::-webkit-scrollbar{height:0;}
.fchip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;font-weight:600;color:var(--nuit);white-space:nowrap;transition:.15s;background:#fff;}
.fchip svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.fchip .chev{width:14px;height:14px;}
.fchip:hover{border-color:var(--nuit);}
.fchip.on{background:var(--nuit);color:var(--creme);border-color:var(--nuit);}
.fchip.on .cnt{background:rgba(255,255,255,.2);}
.fchip .cnt{font-size:11px;background:var(--sable);padding:1px 7px;border-radius:999px;}
.fcount{margin-left:auto;font-size:13.5px;color:var(--gris);white-space:nowrap;padding-left:14px;}
.fcount b{color:var(--nuit);}
.scrim{position:fixed;inset:0;z-index:50;}

.fwrap{position:relative;}
.panel{position:fixed;margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:20px;z-index:60;min-width:300px;max-width:calc(100vw - 32px);animation:pop .16s ease;}
@keyframes pop{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.panel h4{font-size:13px;font-weight:700;color:var(--nuit);margin-bottom:14px;letter-spacing:.02em;}
.panel__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.opt{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:13.5px;font-weight:500;color:var(--nuit);transition:.15s;text-align:left;}
.opt svg{width:18px;height:18px;stroke:var(--gris);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 18px;}
.opt:hover{border-color:var(--or);}
.opt.on{border-color:var(--nuit);background:var(--creme);}
.opt.on svg{stroke:var(--or-fonce);}
.opt .ck{margin-left:auto;opacity:0;}
.opt.on .ck{opacity:1;}
.panel__foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
.linkbtn{font-size:13px;font-weight:600;color:var(--nuit);text-decoration:underline;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:999px;font-size:13.5px;font-weight:600;transition:.18s;}
.btn--dark{background:var(--nuit);color:var(--creme);}.btn--dark:hover{background:var(--nuit-700);}
.btn--gold{background:var(--or);color:var(--nuit);}.btn--gold:hover{background:var(--or-clair);}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;}

.rangewrap{padding:6px 4px 0;}
.rangewrap input[type=range]{width:100%;accent-color:var(--nuit);}
.rangevals{display:flex;justify-content:space-between;margin-top:12px;}
.rangevals .box{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 14px;font-size:13px;}
.rangevals .box b{font-family:var(--serif);font-size:16px;color:var(--nuit);}

/* ---------- Corps ---------- */
.body{flex:1;display:grid;grid-template-columns:1fr 44%;min-height:0;}
.list{overflow-y:auto;padding:22px clamp(16px,3vw,28px) 40px;}
.list__head{margin-bottom:18px;}
.list__head h1{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--nuit);}
.list__head p{font-size:13.5px;color:var(--gris);margin-top:3px;}
.list__foot{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--gris);}
.list__foot a:hover{color:var(--nuit);text-decoration:underline;}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.aucun{grid-column:1/-1;text-align:center;padding:50px 20px;color:var(--gris);display:flex;flex-direction:column;align-items:center;gap:14px;}
.aucun svg{height:60px;width:auto;opacity:.18;}
.aucun svg path{fill:var(--nuit);}

/* rendu serveur (avant chargement du JavaScript) */
.ssr{padding:24px clamp(16px,3vw,32px);overflow:auto;}
.ssr h1{font-family:var(--serif);font-size:26px;color:var(--nuit);}
.ssr ul{margin-top:14px;padding-left:18px;display:flex;flex-direction:column;gap:6px;}
.ssr a{color:var(--nuit);text-decoration:underline;}

/* ---------- Carte de résultat ---------- */
.card{display:block;border-radius:var(--r);transition:transform .18s;}
.card:hover{transform:translateY(-3px);}
.card.active{outline:2px solid var(--nuit);outline-offset:4px;}
.card__media{position:relative;aspect-ratio:20/17;border-radius:var(--r);overflow:hidden;}
.card__media img{width:100%;height:100%;object-fit:cover;}
.card__media .ph{position:absolute;inset:0;display:flex;align-items:flex-end;padding:14px;pointer-events:none;}
.card__media .silhouette{position:absolute;right:-10px;bottom:-6px;width:62%;opacity:.16;}
.card__media .silhouette path{fill:#fff;}
.card__type{position:relative;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(8,22,39,.5);backdrop-filter:blur(4px);padding:6px 11px;border-radius:999px;}
.card__fav{position:absolute;top:10px;right:10px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;}
.card__fav svg{width:24px;height:24px;fill:rgba(8,22,39,.34);stroke:#fff;stroke-width:1.8;transition:.15s;}
.card__fav:hover svg{transform:scale(1.1);}
.card__fav.on svg{fill:var(--or);stroke:var(--or);}
.card__tags{position:absolute;left:12px;top:12px;display:flex;gap:6px;flex-wrap:wrap;right:56px;}
.tagmini{font-size:11px;font-weight:600;color:var(--nuit);background:rgba(255,255,255,.94);padding:5px 9px;border-radius:999px;display:flex;align-items:center;gap:5px;}
.tagmini svg{width:12px;height:12px;stroke:var(--nuit);fill:none;stroke-width:2;}
.card__b{padding:12px 2px 0;}
.card__row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.card__name{font-size:15.5px;font-weight:600;color:var(--nuit);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.card__rating{display:flex;align-items:center;gap:4px;font-size:13.5px;color:var(--nuit);font-weight:500;flex:0 0 auto;}
.card__rating svg{width:14px;height:14px;fill:var(--nuit);}
.card__loc{font-size:13.5px;color:var(--gris);margin-top:2px;}
.card__am{display:flex;flex-wrap:wrap;gap:9px;margin-top:9px;}
.amico{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--gris);}
.amico svg{width:14px;height:14px;stroke:var(--gris-2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.card__price{margin-top:10px;font-size:14px;color:var(--nuit);}
.card__price b{font-size:16px;font-weight:700;}
.card__ch{color:var(--gris);font-size:12.5px;}

/* ---------- Carte Leaflet ---------- */
.mapwrap{position:relative;background:#CBD9DF;overflow:hidden;}
.mapleaf{position:absolute;inset:0;}
.leaflet-container{font-family:var(--sans);background:#CBD9DF;}
.leaflet-control-zoom a{color:var(--nuit)!important;}
.mapnote{position:absolute;left:16px;bottom:22px;z-index:500;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:12.5px;color:var(--gris);box-shadow:var(--shadow);pointer-events:none;}
.mapnote b{color:var(--nuit);}

.leaflet-marker-icon.pin{background:none;border:none;width:auto!important;height:auto!important;}
.pin__b{display:block;transform:translate(-50%,-50%);background:#fff;color:var(--nuit);font-size:13px;font-weight:700;padding:7px 12px;border-radius:999px;box-shadow:0 3px 10px rgba(8,22,39,.25);border:1px solid rgba(8,22,39,.08);white-space:nowrap;transition:transform .15s,background .15s,color .15s,opacity .15s;cursor:pointer;font-family:var(--sans);}
.pin__b:hover{transform:translate(-50%,-50%) scale(1.08);}
.pin.active .pin__b{background:var(--nuit);color:var(--creme);transform:translate(-50%,-50%) scale(1.12);}
.pin.dim .pin__b{opacity:.55;}

.mappop{position:absolute;right:16px;top:16px;z-index:600;width:260px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow-lg);overflow:hidden;animation:pop .16s ease;display:block;}
.mappop__media{position:relative;height:140px;}
.mappop__media img{width:100%;height:100%;object-fit:cover;}
.mappop__x{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;z-index:2;}
.mappop__x svg{width:14px;height:14px;stroke:var(--nuit);fill:none;stroke-width:2.2;}
.mappop__b{padding:11px 13px 13px;}
.mappop__b .nm{font-size:14px;font-weight:600;color:var(--nuit);display:flex;justify-content:space-between;gap:8px;}
.mappop__b .rt{display:flex;align-items:center;gap:3px;font-size:12.5px;}
.mappop__b .rt svg{width:12px;height:12px;fill:var(--nuit);}
.mappop__b .lc{font-size:12.5px;color:var(--gris);margin-top:2px;}
.mappop__b .pr{font-size:13.5px;color:var(--nuit);margin-top:7px;}
.mappop__b .pr b{font-size:15px;}

.mobtoggle{display:none;position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:700;background:var(--nuit);color:var(--creme);padding:13px 22px;border-radius:999px;font-size:14px;font-weight:600;box-shadow:var(--shadow-lg);align-items:center;gap:9px;}
.mobtoggle svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;}

/* ---------- Responsive ---------- */
@media (max-width:1280px){ .top__nav{display:none;} }
@media (max-width:1100px){ .cards{grid-template-columns:1fr;} .body{grid-template-columns:1fr 42%;} .ghostlink{display:none;} }
@media (max-width:860px){
  .top{flex-wrap:wrap;}
  .searchbar{order:3;width:100%;overflow-x:auto;}
  .searchbar .seg .v{max-width:120px;}
  .top__r .top__tab{display:none;}
  .body{grid-template-columns:1fr;}
  .mapwrap{display:none;}
  .body.showmap .list{display:none;}
  .body.showmap .mapwrap{display:block;}
  .cards{grid-template-columns:repeat(2,1fr);}
  .mobtoggle{display:flex;}
  .list{padding-bottom:90px;}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr;}
  .panel{left:16px!important;right:16px;min-width:0;}
  .panel__grid{grid-template-columns:1fr;}
  .brand__w{font-size:21px;}
}