:root {
  --orange:   #FF6B2B;
  --orange-l: rgba(255,107,43,.1);
  --dark:     #0d0e14;
  --card-bg:  rgba(255,255,255,.04);
  --border:   rgba(255,255,255,.10);
  --muted:    rgba(255,255,255,.45);
  --r:        14px;
  --shadow-h: 0 8px 32px rgba(0,0,0,.5);
}

/* ── Layout desktop : tout dans l'écran, pas de scroll page ── */
html, body { height: 100%; margin: 0; padding: 0; }
body {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--dark); color: #fff;
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
}

/* ── Toolbar ────────────────────────────────────────────────── */
.an-toolbar {
  flex-shrink: 0; z-index: 200;
  background: rgba(13,14,20,.97); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: .55rem 1.1rem; display: flex; align-items: center;
  gap: .6rem; flex-wrap: wrap;
}
.an-toolbar-title { font-weight: 800; font-size: .9rem; white-space: nowrap; flex-shrink: 0; }
.an-search { flex: 1; min-width: 160px; max-width: 360px; position: relative; }
.an-search input {
  width: 100%; padding: .45rem 1rem .45rem 2.2rem;
  background: rgba(255,255,255,.06); border: 1.5px solid var(--border);
  border-radius: 50px; color: #fff; font-family: inherit; font-size: .83rem;
  outline: none; transition: border-color .2s;
}
.an-search input::placeholder { color: var(--muted); }
.an-search input:focus { border-color: var(--orange); }
.an-search .ico { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .8rem; pointer-events: none; }
.an-res { font-size: .78rem; color: var(--muted); white-space: nowrap; flex-shrink: 0; }

.an-chips {
  display: flex; gap: .35rem; width: 100%;
  overflow-x: auto; flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.an-chips::-webkit-scrollbar { display: none; }
.an-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .25rem .7rem; border-radius: 50px;
  border: 1.5px solid var(--border); background: transparent;
  color: var(--muted); font-size: .74rem; font-weight: 600;
  cursor: pointer; transition: all .15s; white-space: nowrap; flex-shrink: 0;
}
.an-chip:hover { border-color: rgba(255,255,255,.3); color: #fff; }
.an-chip.active { border-color: var(--orange); color: var(--orange); background: var(--orange-l); }

.btn-map-toggle {
  display: none; align-items: center; gap: .25rem;
  padding: .3rem .8rem; border-radius: 50px;
  border: 1.5px solid var(--border); background: transparent;
  color: var(--muted); font-size: .76rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.btn-map-toggle.active { border-color: var(--orange); color: var(--orange); background: var(--orange-l); }

/* ── Split body ─────────────────────────────────────────────── */
.an-body {
  flex: 1; display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0; /* indispensable pour que flex:1 fonctionne */
  overflow: hidden;
}

/* ── Liste ──────────────────────────────────────────────────── */
.an-list {
  overflow-y: auto; padding: .85rem;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: .75rem; align-content: start;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.an-list::-webkit-scrollbar { width: 4px; }
.an-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ── Carte ──────────────────────────────────────────────────── */
.an-map {
  position: relative;          /* contexte pour #leaflet-map */
  border-left: 1px solid var(--border);
  overflow: hidden;
}
/* LA CLÉ : position absolute pour que Leaflet ait une taille réelle */
#leaflet-map {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}

/* ── Cards ──────────────────────────────────────────────────── */
.an-card {
  background: var(--card-bg); border: 1.5px solid var(--border);
  border-radius: var(--r); overflow: hidden; cursor: pointer;
  transition: border-color .2s, transform .18s, box-shadow .2s;
  display: flex; flex-direction: column;
  animation: fadeUp .3s ease both;
}
.an-card:hover { border-color: var(--orange); transform: translateY(-2px); box-shadow: var(--shadow-h); }
.an-card.active { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,107,43,.22); }

.an-card__img-wrap {
  position: relative; height: 115px; flex-shrink: 0;
  background: rgba(255,255,255,.03);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.an-card__img { width: 100%; height: 100%; object-fit: contain; padding: .5rem; display: block; transition: transform .3s; }
.an-card:hover .an-card__img { transform: scale(1.04); }
.an-card__ph { font-size: 2.4rem; }
.an-card__badge {
  position: absolute; top: .4rem; right: .4rem;
  background: var(--orange); color: #fff;
  border-radius: 50px; font-size: .63rem; font-weight: 700; padding: .1rem .4rem;
}

.an-card__body {
  padding: .65rem; flex: 1; display: flex; flex-direction: column; gap: .28rem;
}
.an-card__name {
  font-weight: 800; font-size: .85rem; color: #fff; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.an-card__cat { font-size: .68rem; color: var(--muted); display: flex; align-items: center; gap: .2rem; }
.an-card__desc {
  font-size: .72rem; color: #fff; line-height: 1.5;
  max-height: 150px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent;
  padding-right: 2px;
}
.an-card__desc::-webkit-scrollbar { width: 3px; }
.an-card__desc::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }
.an-card__lot {
  font-size: .73rem; color: var(--orange); font-weight: 700; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.an-card__addr { font-size: .66rem; color: var(--muted); display: flex; align-items: flex-start; gap: .18rem; overflow: hidden; }
.an-card__addr span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: .35rem;
  margin-top: auto; padding-top: .45rem; border-top: 1px solid var(--border); flex-wrap: wrap;
}
.an-card__game { font-size: .66rem; color: var(--muted); flex-shrink: 0; }
.an-card__btn {
  background: var(--orange); color: #fff !important; border: none; border-radius: 50px;
  font-size: .67rem; font-weight: 700; padding: .28rem .7rem;
  text-decoration: none !important; white-space: nowrap; flex-shrink: 0;
  transition: filter .18s; cursor: pointer;
}
.an-card__btn:hover { filter: brightness(1.1); }

/* ── Vide / no-result ───────────────────────────────────────── */
.an-empty { grid-column: 1/-1; text-align: center; padding: 3rem 1.5rem; color: var(--muted); }

/* ── Popup Leaflet ──────────────────────────────────────────── */
.leaflet-popup-content-wrapper {
  background: #1a1b26 !important; padding: 0 !important;
  border: 1.5px solid rgba(255,107,43,.3) !important;
  border-radius: 14px !important; box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
}
.leaflet-popup-content { margin: .8rem .95rem !important; }
.leaflet-popup-tip { background: #1a1b26 !important; }
.leaflet-popup-close-button { color: rgba(255,255,255,.45) !important; }
.leaflet-popup-close-button:hover { color: #FF6B2B !important; }
.lp-wrap { font-family: 'Plus Jakarta Sans', Arial, sans-serif; min-width: 195px; }
.lp-logo-wrap { display: flex; align-items: center; gap: .55rem; margin-bottom: .55rem; }
.lp-logo { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; border: 2px solid rgba(255,107,43,.3); flex-shrink: 0; }
.lp-logo-ph { width: 42px; height: 42px; border-radius: 9px; background: rgba(255,107,43,.12); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.lp-name { font-weight: 800; font-size: .9rem; color: #fff; line-height: 1.2; }
.lp-cat  { font-size: .68rem; color: rgba(255,255,255,.45); }
.lp-lot  { font-size: .76rem; color: #FF6B2B; font-weight: 700; margin: .3rem 0; }
.lp-addr { font-size: .66rem; color: rgba(255,255,255,.35); margin-bottom: .5rem; }
.lp-btn  {
  display: block; text-align: center; background: #FF6B2B;
  color: #fff !important; border-radius: 50px; padding: .42rem .9rem;
  font-size: .76rem; font-weight: 800; text-decoration: none !important;
}

/* ── Drawer mobile ──────────────────────────────────────────── */
.f-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(80vw, 290px);
  background: #13141f; border-right: 1px solid var(--border);
  z-index: 900; transform: translateX(-100%); transition: transform .28s ease;
  display: flex; flex-direction: column; padding: 1rem; overflow-y: auto;
}
.f-drawer.open { transform: translateX(0); }
.f-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; padding-bottom: .65rem; border-bottom: 1px solid var(--border);
}
.f-drawer__nav { display: flex; flex-direction: column; gap: .2rem; }
.f-drawer__link {
  display: block; padding: .65rem .8rem; color: rgba(255,255,255,.7);
  text-decoration: none; border-radius: 10px; font-size: .88rem; font-weight: 600;
}
.f-drawer__link:hover { background: rgba(255,255,255,.06); color: #fff; }
.f-drawer-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.55); z-index: 850; backdrop-filter: blur(3px);
}
.f-drawer-overlay.open { display: block; }

/* ── Bouton fermer carte (mobile) ───────────────────────────── */
#btn-close-map {
  display: none; position: fixed; top: .7rem; right: .7rem; z-index: 700;
  background: var(--orange); color: #fff; border: none; border-radius: 50%;
  width: 38px; height: 38px; align-items: center; justify-content: center;
  font-size: 1rem; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.4);
}

/* ── Animations ─────────────────────────────────────────────── */
@keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ══ RESPONSIVE ═══════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .an-body { grid-template-columns: 1fr 1fr; }
  .an-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 800px) {
  /* Mobile : scroll naturel de la page */
  html, body { height: auto !important; overflow: auto !important; }

  .an-body { display: block; height: auto; overflow: visible; }

  .an-list {
    display: grid; grid-template-columns: repeat(2, 1fr);
    height: auto; overflow: visible; padding: .65rem;
  }

  /* Carte : cachée, passe en plein écran fixed quand .visible */
  .an-map {
    display: none;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 600; border: none;
  }
  .an-map.visible { display: block; }

  .btn-map-toggle { display: inline-flex; }

  .an-toolbar { padding: .45rem .7rem; gap: .45rem; }
  .an-search  { max-width: 100%; }
}

@media (max-width: 520px) {
  .an-list { grid-template-columns: 1fr; }
  .an-toolbar-title { display: none; }
  .an-chip  { font-size: .7rem; padding: .2rem .55rem; }
}