:root{
  --gap: 14px;
  /* change only this to control card image height */
  --card-img-h: 260px;
  --radius: 12px;
  --muted: #6b7280;
  --border: #e5e7eb;
  --bg: #f7f7f8;
  --brand: #10b981;
}

*{box-sizing:border-box}
body{
  margin:0; background:#fff; color:#111827; font:14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-bottom:1px solid var(--border); background:#fff;
}
.brand{font-weight:700}
.controls{display:flex; gap:8px; align-items:center}
.ctl{padding:6px 8px; border:1px solid var(--border); border-radius:8px; background:#fff}
.btn{
  padding:6px 10px; border:1px solid #16a34a; color:#fff; background:#22c55e;
  border-radius:8px; cursor:pointer;
}
.btn.btn-sm{padding:4px 8px; font-size:12px}
.cbox{display:inline-flex; gap:6px; align-items:center}

.panel{padding:12px 14px}
.panel>h3{margin:8px 0 10px}

.map{height:340px; border:1px solid var(--border); border-radius:var(--radius)}

.zones-grid{
  display:grid;
  gap:var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.zone-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px;
  background:#fff;
}
.zone-head{display:flex; align-items:center; justify-content:space-between}
.zone-sub{color:#111827; margin:4px 0 8px; font-weight:600}
.zone-img{
  width:100%; height:var(--card-img-h); object-fit:cover;
  border-radius:10px; display:block; margin-bottom:8px;
}
.metrics{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px 10px; margin-bottom:8px; font-size:13px;
}
.muted{color:var(--muted)}

.cfg{border-top:1px dashed var(--border); padding-top:8px}
.opb-input{
  width:100%; padding:8px; border:1px solid var(--border); border-radius:8px; margin:6px 0;
}
.opb-results{display:flex; flex-direction:column; gap:6px}
.opb-row{
  display:grid; grid-template-columns:48px 1fr auto; gap:10px;
  align-items:center; border:1px solid var(--border); border-radius:10px; padding:6px;
}
.opb-row img{width:48px; height:48px; object-fit:cover; border-radius:8px}
.opb-row .opb-main{font-weight:600}
.opb-row .opb-sub{color:var(--muted); font-size:12px}



/* style.css */
.opb-results {
  margin-top: .5rem;
  max-height: 280px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columns */
  gap: 8px;
}

.opb-item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
}

.opb-item:hover { background: #f8fafc; }

.opb-result-img {
  width: 56px;
  height: 56px;
  object-fit: cover;      /* keeps images neat */
  border-radius: 6px;
}

.opb-result-name {
  font-size: .9rem;
  line-height: 1.2rem;
}
.opb-item img{ width:34px; height:34px; object-fit:cover; border-radius:4px; }
.opb-empty{ color:#6b7280; padding:.5rem; font-style:italic; }


.opb-source{
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  display:inline-block;
  background:#eef1ff;
  color:#334;
  margin:6px 0 4px 0;
}






/* Cartes */
.zone-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; background: #fff; }
.zone-title { margin: 0 0 8px 0; font-size: 1.05rem; }
.zone-body { display: grid; grid-template-columns: 320px 1fr; gap: 14px; align-items: start; }

.zone-img img {
  width: 100%;
  height: 220px;              /* ⬅️ borne la hauteur */
  object-fit: cover;          /* ⬅️ rogne proprement */
  border-radius: 10px;
  display: block;
}

.zone-metrics .metric { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; padding: 2px 0; }
.zone-metrics .micon { opacity: .8; }
.zone-metrics .mval { font-variant-numeric: tabular-nums; color: #111827; }

/* Recherche OPB */
.opb-box { position: relative; margin-bottom: 10px; }
.opb-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.opb-search { padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 8px; }
.opb-go { padding: 6px 10px; border: 1px solid #10b981; background: #10b981; color: #fff; border-radius: 8px; }

.opb-suggest {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
  max-height: 240px; overflow: auto; width: min(440px, 92%);
  z-index: 20; padding: 6px; 
}
.opb-suggest .sug-item { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; cursor: pointer; }
.opb-suggest .sug-item:hover { background: #f3f4f6; }
.opb-suggest .sug-item img { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; flex: 0 0 36px; }
.opb-suggest .nores { padding: 6px 8px; color: #6b7280; font-style: italic; }

/* Responsive */
@media (max-width: 1000px) {
  .zone-body { grid-template-columns: 1fr; }
  .zone-img img { height: 200px; }
}




/* Carte visible */
.map { height: 520px; min-height: 320px; border-radius: 10px; }

/* Mise en page */
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; padding: 0 10px 30px; }
.toolbar { display:flex; gap:16px; align-items:center; padding:10px 0; flex-wrap:wrap; }
.toolbar .brand { font-weight:700; margin-right:auto; }
.toolbar .lbl { margin-right:6px; }
.btn { border:0; padding:6px 10px; border-radius:8px; cursor:pointer; }
.btn-primary { background:#16a34a; color:#fff; }
.panel { margin:14px 0 26px; }
.zones-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap:16px; }

/* Carte zone + image */
.zone-card { border:1px solid #e6e6e6; border-radius:14px; padding:10px 12px; background:#fff; }
.zone-title { font-weight:600; margin:4px 0 8px; }
.zone-img { width:100%; height:240px; object-fit:cover; border-radius:10px; display:block; }

/* Recherche OPB */
.search-row { display:flex; gap:8px; margin:6px 0 10px; }
.opb-list { position:relative; }
.opb-results { position:absolute; top:34px; left:0; right:0; background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:6px; z-index:1000; max-height:280px; overflow:auto; }
.opb-item { display:flex; align-items:center; gap:10px; padding:6px; border-radius:8px; cursor:pointer; }
.opb-item:hover { background:#f3f4f6; }
.opb-item img { width:34px; height:34px; object-fit:cover; border-radius:6px; }