:root {
  --dmvip-blue:#1f3c88;
  --bg:#f6f7f9;
  --text:#101828;
  --muted:#667085;
  --new:#12b76a;
  --drop:#1f3c88;
  --up:#7f56d9;
  --res:#d92d20;
  --pc:#0ba5ec;
}
html, body { height: 100%; margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--text); background:var(--bg);}

.topbar{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
  justify-content:center;
  padding:16px 18px 14px 18px;
  background:white;
  border-bottom:1px solid #eaecf0;
  box-shadow:0 8px 24px rgba(16,24,40,.08);
  animation:fadeUp .45s ease both;
}


.brand{ font-weight:900; letter-spacing:.2px; color:var(--dmvip-blue); font-size:18px; }
.sub{ color:var(--muted); font-size:13px; margin-top:2px; }
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.chip{
  border:1px solid #d0d5dd;
  background:rgba(31,60,136,.06);
  border-radius:999px;
  padding:7px 10px;
  font-size:13px;
  cursor:pointer;
  user-select:none;
  color:var(--text);
}

.chip.active{ border-color:var(--dmvip-blue); background:rgba(31,60,136,.10); box-shadow:0 0 0 3px rgba(31,60,136,.12); }
.chip[data-filter="all"], .chip[data-filter="nouveaute"], .chip[data-filter="baisse_de_prix"]{ font-weight:700; }

#map{ height: 100%; }
.legend{
  position:absolute; right:12px; bottom:12px; background:white; border:1px solid #eaecf0;
  border-radius:12px; padding:12px 14px; box-shadow:0 10px 25px rgba(16,24,40,.08);
  font-size:15px; z-index:800;
}
.legend-row{ display:flex; align-items:center; gap:8px; margin:6px 0; }
.dot{ width:12px; height:12px; border-radius:50%; }
.dot.new{ background:var(--new);}
.dot.drop{ background:var(--drop);}
.dot.res{ background:var(--res);}
/* Custom marker */
.m{ width:20px; height:20px; border-radius:50%; border:3px solid white; box-shadow:0 6px 18px rgba(16,24,40,.18);}
.m.new{ background:var(--new);}
.m.drop{ background:var(--drop);}
.m.res{ background:var(--res);}
.m.std{ background:var(--new);}

/* Popup */
.popup-title{ font-weight:800; color:var(--dmvip-blue); margin-bottom:6px; }
.lot{ border-top:1px solid #eaecf0; padding-top:8px; margin-top:8px; }
.lot:first-of-type{ border-top:none; padding-top:0; margin-top:0; }
.lot-main{ font-weight:650; }
.prev{ color:var(--muted); font-weight:500; }
.lot-badges{ margin-top:6px; display:flex; gap:6px; flex-wrap:wrap; }
.badge{ font-size:11px; padding:3px 6px; border-radius:999px; border:1px solid #eaecf0; }
.b-new{ background:rgba(18,183,106,.10); border-color:rgba(18,183,106,.35); color:#067647; }
.b-drop{ background:rgba(217,45,32,.10); border-color:rgba(217,45,32,.35); color:#111827; }
.b-up{ background:rgba(127,86,217,.10); border-color:rgba(127,86,217,.35); color:#53389e; }
.b-res{ background:rgba(217,45,32,.95); border-color:rgba(217,45,32,.95); color:#111827; }
.b-pc{ background:rgba(11,165,236,.12); border-color:rgba(11,165,236,.35); color:#026aa2; }
.popup-notes{ margin-top:10px; color:var(--muted); font-size:12px; }

.logo-wrap{
  display:flex;
  align-items:center;
  gap:16px;
}

.logo-wrap img{
  height:78px; /* PLUS GROS */
  object-fit:contain;
}

.title-wrap{
  display:flex;
  flex-direction:column;
}

/* CTA buttons */
.ctas{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #d0d5dd;
  background:white;
  color:var(--dmvip-blue);
  font-weight:800;
  font-size:13px;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 6px 16px rgba(16,24,40,.06);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(16,24,40,.10);
  background:rgba(31,60,136,.04);
}
.btn.secondary{
  color:var(--text);
  background:rgba(31,60,136,.04);
}

/* Premium load animation */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(-8px);}
  to   { opacity:1; transform:translateY(0);}
}
.topbar{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
  justify-content:center;
  padding:16px 18px 14px 18px;
  background:white;
  border-bottom:1px solid #eaecf0;
  box-shadow:0 8px 24px rgba(16,24,40,.08);
  animation:fadeUp .45s ease both;
}

.legend{ animation:fadeUp .55s ease .06s both; }

/* Marker pop-in */
@keyframes popIn {
  0% { transform:scale(.5); opacity:0; }
  100% { transform:scale(1); opacity:1; }
}
.m{ animation:popIn .35s ease both; }


.topbar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.topbar-controls{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  flex-wrap:wrap;
}


/* Responsive */
@media (max-width: 900px){
  .topbar-header{ flex-direction:column; align-items:flex-start; }
  .logo-wrap{ width:100%; }
  .logo-wrap img{ height:64px; }
  .brand{ font-size:17px; }
  .sub{ font-size:12px; }
}

@media (max-width: 640px){
  .topbar{ padding:14px 12px 12px 12px; gap:10px; }
  .topbar-header{ align-items:center; }
  .logo-wrap{ flex-direction:column; align-items:center; text-align:center; gap:10px; }
  .title-wrap{ align-items:center; }
  .brand{ font-size:16px; text-align:center; }
  .sub{ font-size:12px; text-align:center; }
  .topbar-controls{ justify-content:center; gap:10px; }
  .filters{ justify-content:center; gap:6px; }
  .chip{ padding:7px 9px; font-size:12px; }
  .ctas{ justify-content:center; width:100%; }
  .btn{ width:100%; justify-content:center; padding:11px 12px; border-radius:12px; }
  .legend{ right:10px; left:10px; bottom:10px; width:auto; }
}

/* Make map and UI safe areas */
@supports(padding: max(0px)){
  body{ padding-bottom: env(safe-area-inset-bottom); }
}


/* ===== DMVIP: marker count ===== */
.m{
  display:flex;
  align-items:center;
  justify-content:center;
}
.m .m-count{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  user-select: none;
}


/* ===== DMVIP: couleurs des boutons de tri (Top bar) ===== */
.topbar .filters .chip[data-filter="nouveaute"]{
  background: rgba(46, 125, 50, .18) !important;
  border-color: rgba(46, 125, 50, .55) !important;
  color: #111827 !important; /* texte noir */
}
.topbar .filters .chip[data-filter="baisse_de_prix"]{
  background: rgba(21, 101, 192, .18) !important;
  border-color: rgba(21, 101, 192, .55) !important;
  color: #111827 !important;
}
.topbar .filters .chip[data-filter="reserve"]{
  background: rgba(198, 40, 40, .18) !important;
  border-color: rgba(198, 40, 40, .55) !important;
  color: #111827 !important;
}

/* Active = un peu plus marqué */
.topbar .filters .chip.active[data-filter="nouveaute"]{
  background: rgba(46, 125, 50, .28) !important;
  box-shadow: 0 0 0 3px rgba(46, 125, 50, .14) !important;
}
.topbar .filters .chip.active[data-filter="baisse_de_prix"]{
  background: rgba(21, 101, 192, .28) !important;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, .14) !important;
}
.topbar .filters .chip.active[data-filter="reserve"]{
  background: rgba(198, 40, 40, .28) !important;
  box-shadow: 0 0 0 3px rgba(198, 40, 40, .14) !important;
}



/* ===== DMVIP: lien Leboncoin dans popup ===== */
.lot-links{ margin: 6px 0 2px; }
a/* ===== DMVIP: badges cohérents (texte noir) ===== */
.badge{
  color:#111827 !important;
  font-weight: 800;
}

.badge.b-new{
  background: rgba(46, 125, 50, .18) !important;
  border: 1px solid rgba(46, 125, 50, .45) !important;
}

.badge.b-drop{
  background: rgba(21, 101, 192, .18) !important;
  border: 1px solid rgba(21, 101, 192, .45) !important;
}

.badge.b-res{
  background: rgba(198, 40, 40, .18) !important;
  border: 1px solid rgba(198, 40, 40, .45) !important;
}

.badge.b-pc{
  background: rgba(0,0,0,.06) !important;
  border: 1px solid rgba(0,0,0,.12) !important;
}


/* ===== Leboncoin (bouton) – style harmonisé ===== */
a.lbc{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius: 999px;
  background: rgba(255, 106, 0, .18);
  border: 1px solid rgba(255, 106, 0, .35);
  color: #111827 !important;
  font-weight: 700;
  text-decoration: none;
  font-size: 12.5px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
a.lbc:hover{
  filter: brightness(0.97);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
  color: #111827 !important;
}
/* Compat: classe conservée */
a.lbc.lbc--orange{
  background: rgba(255, 106, 0, .18) !important;
  border: 1px solid rgba(255, 106, 0, .35) !important;
  color: #111827 !important;
}



/* ===== V9 – UI polish (boutons, badges, popups) ===== */

/* Top CTA buttons: more premium + better touch target */
.btn{
  border-radius: 12px;
  padding: 11px 14px;
  letter-spacing: .2px;
}
.btn:active{ transform: translateY(0px) scale(.99); }

/* Make primary button more "primary" while keeping DMVIP blue */
.btn{
  border-color: rgba(31,60,136,.22);
}
.btn:hover{
  background: rgba(31,60,136,.06);
}

/* Chips: clearer active state */
.chip{
  border-radius: 999px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(16,24,40,.10);
}
.chip.active{
  background: rgba(31,60,136,.10) !important;
  border-color: rgba(31,60,136,.35) !important;
  box-shadow: 0 10px 22px rgba(16,24,40,.12);
}

/* Popup card container */
.popup-card{
  background: #fff;
  border-radius: 14px;
  padding: 10px 10px 8px;
  box-shadow: 0 10px 26px rgba(16,24,40,.14);
}

/* Slightly bigger title + better spacing */
.popup-title{
  font-size: 14.5px;
  margin-bottom: 8px;
}

/* Lot blocks in popup: card feel */
.lot{
  border-top: 1px solid rgba(234,236,240,.9);
  padding-top: 10px;
  margin-top: 10px;
}
.lot-main{
  font-weight: 750;
  line-height: 1.25;
}

/* Price "was" more subtle */
.prev{ opacity: .8; }

/* Badges: consistent sizing */
.badge{
  font-size: 11.5px;
  padding: 4px 8px;
  border-radius: 999px;
}

/* Leboncoin button: align with chips */
a.lbc{
  padding: 7px 12px;
  font-size: 12.5px;
}

/* Links area spacing */
.lot-links{ margin: 8px 0 2px; }

/* Improve readability on mobile */
@media (max-width: 640px){
  .btn{ padding: 12px 14px; }
  .popup-card{ padding: 12px 12px 10px; }
  .popup-title{ font-size: 15px; }
  a.lbc{ padding: 8px 12px; }
}



/* ===== YouTube (bouton) ===== */
.lot-links{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
a.ytb{ width:38px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background: rgba(255,0,0,.12); border:1px solid rgba(255,0,0,.25); text-decoration:none; }
a.ytb:hover{ filter: brightness(0.97); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.10); }
.yt-ico{ width:22px; height:22px; fill:#ff0000; }
.yt-ico .yt-play{ fill:#ffffff; }


/* ===== Leboncoin (icône) ===== */
a.lbcbtn{ width:38px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background: rgba(255,106,0,.12); border:1px solid rgba(255,106,0,.28); text-decoration:none; }
a.lbcbtn:hover{ filter: brightness(0.97); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.10); }
.lbc-ico{ width:22px; height:22px; }
.lbc-bg{ fill:#ff6a00; }
.lbc-txt{ fill:#ffffff; font-weight:800; font-size:8.5px; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; letter-spacing:.4px; }


/* ===== V17 – Réseaux : icônes alignées ===== */
.lot-links{
  display:flex;
  flex-direction:row;
  gap:8px;
  align-items:center;
  flex-wrap:nowrap;
}
@media (max-width: 640px){
  .lot-links{ flex-wrap:wrap; } /* autorise retour ligne si manque de place */
}
a.ytb, a.lbcbtn{
  width:38px;
  height:32px;
  flex: 0 0 auto;
}



/* ===== SeLoger (icône) ===== */
a.slgbtn{
  width:38px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background: rgba(220,0,0,.12);
  border:1px solid rgba(220,0,0,.28);
  text-decoration:none;
}
a.slgbtn:hover{
  filter: brightness(0.97);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.10);
}
.slg-ico{
  width:22px;
  height:22px;
}
.slg-bg{
  fill:#e30613;
}
.slg-txt{
  fill:#ffffff;
  font-weight:800;
  font-size:8.5px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing:.4px;
}


/* DMVIP retour à la vente */
.b-retour{
  background: rgba(217,45,32,.14);
  border-color: rgba(217,45,32,.45);
  color: #b42318;
}