/* ════════════════════════════════════════════════
   Guichet Géologique Cantonal – Shared Stylesheet
   ════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Roboto+Slab:wght@400;500;600;700&display=swap');

:root {
  --hdr:    #f0f3f1;
  --hdr2:   #000000;
  --accent: #129A39;
  --accent2:#129A39;
  --green:  #2E7D52;
  --bh:     #D4890A;
  --bg:     #f0f3f1;       /* light grey */
  --bg2:    #e8ece9;
  --white:  #ffffff;
  --txt:    #18293A;
  --txt2:   #5a6b7a;
  --border: #dfe1e0;       /* darker grey */
  --fd: 'Roboto Slab', serif;
  --fb: 'Open Sans', sans-serif;
  --fm: 'Open Sans', sans-serif;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html {
  font-size: 15px;
}
body {
  height:100%; overflow:hidden;
  font-family:var(--fb); background:var(--bg); color:var(--txt);
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-thumb { background:#c4c8c6; border-radius:2px; }

/* ════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════ */
header {
  height:54px; background:var(--hdr);
  border-bottom:3px solid var(--accent);
  display:flex; align-items:center; padding:0 18px; gap:14px;
  position:relative; z-index:1000; flex-shrink:0;
}
.hdr-logo {
  height:32px; width:auto; display:block; flex-shrink:0;
}
.hdr-brand { display:flex; flex-direction:column; line-height:1.15; }
.hdr-title {
  font-family:var(--fd); font-size:15px; font-weight:600;
  color:var(--txt); letter-spacing:0.02em;
}
.hdr-sub {
  font-size:9.5px; font-weight:300; color:rgba(255,255,255,0.45);
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--txt);
}
.hdr-sep { width:1px; height:28px; background:rgba(255,255,255,0.12); flex-shrink:0; }
.hdr-nav { display:flex; gap:1px; }
.hdr-nav a {
  color:var(--txt2); text-decoration:none;
  font-size:13px; font-weight:400; padding:6px 10px; border-radius:3px;
  transition:all .15s; letter-spacing:0.03em;
}
.hdr-nav a:hover  { color:var(--txt); background:rgba(0,0,0,0.04); }
.hdr-nav a.active { color:var(--accent); }
.hdr-space { flex:1; }
.hdr-tools { display:flex; gap:8px; align-items:center; }

/* ════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════ */
.btn {
  font-family:var(--fb); font-weight:500; font-size:12.5px;
  letter-spacing:0.05em; border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  transition:all .15s; text-transform:uppercase; border-radius:3px;
}
.btn-ghost {
  padding:6px 13px; background:transparent;
  color:var(--txt2); border:1px solid var(--border);
}
.btn-ghost:hover { background:var(--bg2); color:var(--txt); }
.btn-ghost.on { background:rgba(18,154,57,0.1); border-color:var(--accent); color:var(--accent); }
.btn-primary {
  padding:6px 14px; background:var(--accent); color:#fff;
}
.btn-primary:hover { background:var(--accent2); }
.btn-primary:disabled { opacity:.45; cursor:default; }
.btn-secondary {
  padding:6px 12px; background:var(--bg); color:var(--txt);
  border:1px solid var(--border);
}
.btn-secondary:hover { background:var(--bg2); }

/* ════════════════════════════════════════════════
   PAGE BODY  (below header)
   ════════════════════════════════════════════════ */
.page-body {
  height:calc(100vh - 57px);
  display:flex; flex-direction:row; overflow:hidden;
}

/* ════════════════════════════════════════════════
   MAP  (index.html)
   ════════════════════════════════════════════════ */
.map-wrap {
  flex:1; position:relative; min-width:0;
}
#map { width:100%; height:100%; }

/* toolbar overlay */
.map-bar {
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  background:var(--white); border-radius:6px;
  padding:9px 16px; display:flex; align-items:center; gap:12px;
  box-shadow:0 4px 18px rgba(0,0,0,0.14); z-index:600;
  font-size:13px; white-space:nowrap;
  max-width:calc(100vw - 24px);
}
.map-bar.hidden { display:none !important; }
.bar-label { font-weight:600; color:var(--txt); }
.bar-sep   { color:var(--border); }
.pts-count { color:var(--accent); font-weight:600; }

/* layer panel */
.layer-panel {
  position:absolute; bottom:82px; left:12px; background:var(--white);
  border-radius:6px; z-index:400;
  box-shadow:0 2px 14px rgba(0,0,0,0.14); min-width:210px; overflow:hidden;
}
.layer-panel-hdr {
  font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.09em; color:var(--txt2);
  padding:9px 14px 8px; border-bottom:1px solid var(--border);
}
.layer-item {
  display:flex; align-items:center; gap:9px;
  padding:8px 12px 8px 14px; font-size:12.5px;
  border-bottom:1px solid var(--border); cursor:pointer;
  transition:background .12s; user-select:none;
}
.layer-item:last-child { border-bottom:none; }
.layer-item:hover { background:var(--bg); }
.layer-swatch { width:20px; height:12px; border-radius:2px; flex-shrink:0; }
.layer-swatch-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.layer-name { flex:1; }
.layer-name-type { font-size:9.5px; color:var(--txt2); text-transform:uppercase; letter-spacing:0.05em; margin-left:6px; flex-shrink:0; }

.layer-group-hdr {
  font-size:9px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--txt2);
  padding:7px 14px 4px; background:var(--bg);
  border-bottom:1px solid var(--border);
}
.layer-item-empty {
  padding:8px 14px; font-size:11.5px; color:var(--txt2); border-bottom:1px solid var(--border);
}

/* toggle switch */
.tog { position:relative; display:inline-block; width:30px; height:16px; flex-shrink:0; }
.tog input { opacity:0; width:0; height:0; position:absolute; }
.tog-slider {
  position:absolute; cursor:pointer; inset:0;
  background:#d4d8d6; border-radius:16px; transition:background .18s;
}
.tog-slider::before {
  content:''; position:absolute; width:11px; height:11px;
  left:2.5px; top:2.5px; background:#fff; border-radius:50%;
  transition:transform .18s; box-shadow:0 1px 3px rgba(0,0,0,0.22);
}
.tog input:checked + .tog-slider { background:var(--accent); }
.tog input:checked + .tog-slider::before { transform:translateX(14px); }

/* status bar */
.sbar {
  position:absolute; bottom:0; left:0; right:0; height:27px;
  background:rgba(24,41,58,0.88); display:flex; align-items:center;
  padding:0 14px; gap:14px; font-size:12px; color:rgba(255,255,255,0.6);
  z-index:500; backdrop-filter:blur(4px);
}
.sbar-mode { color:#7dccaa; font-weight:500; }
.sbar-dot  { color:rgba(255,255,255,0.2); }

/* WMS control */
.map-layer-btn {
  position:absolute; top:12px; left:12px; z-index:760;
  width:34px; height:34px; border-radius:6px;
  border:1px solid var(--border); background:var(--white); color:var(--txt2);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,0.15);
}
.map-layer-btn:hover { color:var(--txt); background:var(--bg2); }

.wms-menu {
  position:absolute; top:52px; left:12px; z-index:750;
  width:335px; max-height:58vh; background:var(--white);
  border:1px solid var(--border); border-radius:8px;
  box-shadow:0 6px 24px rgba(0,0,0,0.16); overflow:hidden;
}
.wms-menu.hidden { display:none; }
.wms-menu-hdr {
  padding:10px 13px; font-size:11px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase;
  border-bottom:1px solid var(--border); color:var(--txt2);
}
.wms-custom-toggle-wrap {
  padding:8px 13px;
  border-bottom:1px solid var(--border);
  background:#fbfcfb;
}
.wms-custom-toggle-btn {
  width:100%;
  border:1px dashed #c8d1cc;
  background:transparent;
  color:var(--txt2);
  border-radius:4px;
  padding:5px 8px;
  font-size:11px;
  letter-spacing:0.02em;
  cursor:pointer;
}
.wms-custom-toggle-btn:hover {
  background:#f4f7f5;
  border-color:#b9c5bf;
  color:var(--txt);
}
.wms-custom {
  padding:10px 13px;
  border-bottom:1px solid var(--border);
  background:#fbfcfb;
}
.wms-custom.hidden { display:none; }
.wms-custom-title {
  font-size:10px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--txt2);
  margin-bottom:8px;
}
.wms-custom input {
  width:100%;
  box-sizing:border-box;
  margin-bottom:6px;
  padding:6px 7px;
  border:1px solid var(--border);
  border-radius:4px;
  font-size:12px;
  color:var(--txt);
  background:var(--white);
}
.wms-custom button {
  width:100%;
  border:1px solid #9bb4a8;
  background:#f2f6f4;
  color:var(--txt);
  border-radius:4px;
  padding:6px 8px;
  font-size:12px;
  cursor:pointer;
}
.wms-custom button:hover {
  background:#e9f0ec;
}
.wms-custom-msg {
  min-height:14px;
  margin-top:6px;
  font-size:11px;
  color:var(--txt2);
}
.wms-menu-body { max-height:calc(58vh - 42px); overflow:auto; padding:6px 0; }
.wms-empty { padding:14px; font-size:12px; color:var(--txt2); }
.wms-cat { padding:10px 13px 6px; font-size:10px; font-weight:700; color:var(--txt2); letter-spacing:0.08em; text-transform:uppercase; }
.wms-item { padding:7px 13px 10px; border-top:1px solid #f1f3f2; }
.wms-row { display:flex; align-items:center; gap:8px; }
.wms-label { flex:1; font-size:12.5px; color:var(--txt); }
.wms-remove-btn {
  border:1px solid #d6dbd8;
  background:#f7f9f8;
  color:var(--txt2);
  border-radius:4px;
  padding:2px 6px;
  font-size:10px;
  cursor:pointer;
}
.wms-remove-btn:hover { background:#eef2f0; color:var(--txt); }
.wms-opacity { margin-top:7px; display:flex; align-items:center; gap:8px; font-size:11px; color:var(--txt2); }
.wms-opacity.hidden { display:none; }
.wms-opacity input[type="range"] { flex:1; }
.wms-legend { margin-top:7px; border:1px solid var(--border); border-radius:4px; overflow:hidden; background:var(--bg); }
.wms-legend.hidden { display:none; }
.wms-legend img { display:block; max-width:100%; height:auto; }

/* Basemap selector */
.basemap-control {
  position:absolute; left:12px; bottom:36px; z-index:700;
  display:flex; align-items:center; gap:8px;
  background:var(--white); border:1px solid var(--border); border-radius:6px;
  box-shadow:0 2px 12px rgba(0,0,0,0.14); padding:6px 8px;
}
.basemap-control label {
  font-size:10px; font-weight:700; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--txt2);
}
.basemap-control select {
  border:1px solid var(--border); border-radius:4px; background:var(--bg);
  color:var(--txt); font-size:12px; padding:4px 6px;
}

/* ════════════════════════════════════════════════
   POPUP  (Leaflet)
   ════════════════════════════════════════════════ */
.leaflet-popup-content-wrapper {
  border-radius:6px; box-shadow:0 4px 20px rgba(0,0,0,0.16); padding:0;
}
.leaflet-popup-content { margin:0; }
.bh-pop { padding:16px 18px; min-width:230px; font-family:var(--fb); }
.bh-pop-id {
  font-size:11px; text-transform:uppercase; letter-spacing:0.09em;
  color:var(--txt2); margin-bottom:8px; font-weight:600;
}
.bh-pop-name {
  font-family:var(--fd); font-size:18px; font-weight:600;
  margin-bottom:12px; color:var(--txt);
}
.bh-pop table { width:100%; border-collapse:collapse; font-size:13px; }
.bh-pop td { padding:5px 0; border-bottom:1px solid #edecea; }
.bh-pop td:first-child { color:var(--txt2); }
.bh-pop td:last-child  { text-align:right; font-weight:500; }
.bh-pop .btn-full {
  margin-top:13px; width:100%; padding:10px;
  background:var(--accent); color:#fff; border-radius:3px;
  font-size:12px; cursor:pointer; border:none; font-family:var(--fb);
  font-weight:600; text-transform:uppercase; letter-spacing:0.06em;
  transition:background .15s;
}
.bh-pop .btn-full:hover { background:var(--accent2); }

/* ════════════════════════════════════════════════
   RESULT LAYOUT  (sidebar + main – shared by all result pages)
   ════════════════════════════════════════════════ */
.rsidebar {
  width:360px; flex-shrink:0; background:var(--white);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; overflow:hidden;
}
.rsidebar-hdr {
  padding:18px 22px 15px; border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.back-link {
  display:flex; align-items:center; gap:5px; font-size:10px;
  color:var(--txt2); cursor:pointer; margin-bottom:11px;
  text-transform:uppercase; letter-spacing:0.07em; transition:color .15s;
  text-decoration:none;
}
.back-link:hover { color:var(--accent); }
.r-title  { font-family:var(--fd); font-size:21px; font-weight:600; margin-bottom:3px; }
.r-sub    { font-size:11px; color:var(--txt2); display:flex; align-items:center; gap:6px; }
.badge {
  display:inline-flex; align-items:center; gap:3px;
  padding:2px 7px; background:#edf5f0; color:var(--green);
  border-radius:20px; font-size:9.5px; font-weight:600; letter-spacing:0.04em;
}
.rsidebar-body { flex:1; overflow-y:auto; padding:18px 22px; }

.sec-ttl {
  font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.09em; color:var(--txt2); margin-bottom:9px;
}
.kv {
  display:flex; justify-content:space-between; font-size:13px;
  padding:4px 0; border-bottom:1px solid var(--border);
}
.kv span:first-child { color:var(--txt2); }
.kv span:last-child  { font-weight:500; }

.rmain { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--bg); }
.rmain-hdr {
  padding:14px 22px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0; background:var(--white);
}
.rmain-ttl { font-family:var(--fd); font-size:17px; font-weight:600; }
.rmain-sub { font-size:10.5px; color:var(--txt2); margin-top:2px; }
.rmain-body { flex:1; overflow:auto; padding:22px; }

/* ── LITHO ROWS ── */
.lrow {
  display:flex; align-items:stretch; margin-bottom:2px;
  border-radius:2px; overflow:hidden; font-size:11px;
}
.l-bar { width:7px; flex-shrink:0; }
.l-dep {
  width:82px; font-family:var(--fm); font-size:9.5px;
  color:var(--txt2); padding:4px 7px; background:var(--bg); flex-shrink:0;
}
.l-desc { flex:1; padding:4px 8px; background:var(--bg); color:var(--txt); }

/* ── FORAGE LOG ── */
#forage-log-wrap { display:flex; justify-content:center; padding:10px; }

/* ── COUPE ── */
.cu-row {
  display:flex; align-items:center; gap:8px;
  font-size:11.5px; padding:4px 0; border-bottom:1px solid var(--border);
}
.cu-swatch { width:14px; height:14px; border-radius:2px; flex-shrink:0; }
.cu-code   { font-family:var(--fm); font-size:9px; font-weight:700; color:var(--accent); flex-shrink:0; min-width:28px; }
.mini-map-wrap {
  height:196px; border-radius:5px; overflow:hidden;
  border:1px solid var(--border); margin-top:4px;
}
#mini-map { width:100%; height:100%; }

/* Scale bar – more legible than Leaflet's default */
#mini-map .leaflet-control-scale-line {
  font-size:9.5px; line-height:1.3; padding:1px 5px;
  background:rgba(255,255,255,.92); border-color:rgba(0,0,0,.45); color:#18293A;
}
/* Attribution dot – keep it tidy */
#mini-map .leaflet-control-attribution { display:none; }

/* ── SIDEBAR SECTIONS ── */
.bh-section { margin-bottom:22px; }
.bh-section + .bh-section { border-top:1px solid var(--border); padding-top:18px; }

/* ════════════════════════════════════════════════
   INTERACTIVE LOG  (ilog-*)
   ════════════════════════════════════════════════ */

/* Shared tooltip */
.ilog-tip {
  position:fixed; z-index:9999; pointer-events:none;
  background:var(--white); border:1px solid var(--border);
  border-radius:8px; padding:13px 16px;
  box-shadow:0 8px 28px rgba(0,0,0,0.15);
  max-width:310px; min-width:200px; font-family:var(--fb);
  opacity:0; transition:opacity .1s;
}
.ilog-tip.on { opacity:1; }
.ilog-tip-head {
  font-size:13.5px; font-weight:600; color:var(--txt);
  margin-bottom:8px; padding-bottom:8px;
  border-bottom:1px solid var(--border); line-height:1.3;
}
.ilog-tip-row {
  display:flex; justify-content:space-between; gap:14px;
  font-size:12px; padding:2.5px 0;
}
.ilog-tip-row span:first-child { color:var(--txt2); flex-shrink:0; }
.ilog-tip-row span:last-child  { font-weight:500; text-align:right; }
.ilog-tip-desc {
  font-size:11.5px; color:var(--txt2); margin-top:8px;
  line-height:1.65; padding-top:8px;
  border-top:1px solid var(--border);
}

/* Wrapper */
.ilog-wrap { display:flex; position:relative; user-select:none; }

/* Depth scale */
.ilog-scale { position:relative; flex-shrink:0; width:42px; }
.ilog-tick {
  position:absolute; right:8px; transform:translateY(-50%);
  font-size:10.5px; font-family:var(--fm); color:#ccc;
  white-space:nowrap; line-height:1;
}
.ilog-tick.major { color:#999; font-weight:500; }
.ilog-tick::after {
  content:''; position:absolute; left:calc(100% + 2px); top:50%;
  width:3px; height:1px; background:#ddd;
}
.ilog-tick.major::after { width:6px; background:#bbb; }

/* Coloured log column */
.ilog-col {
  width:72px; position:relative; flex-shrink:0;
  border-left:2px solid #ccc;
}
.ilog-layer {
  position:absolute; left:0; right:0; cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,0.55);
}
.ilog-layer::after {
  content:''; position:absolute; inset:0;
  background:transparent; transition:background .12s;
}
.ilog-layer:hover::after,
.ilog-layer.hi::after { background:rgba(255,255,255,0.28); }
.ilog-layer.hi { outline:2px solid rgba(0,0,0,0.3); outline-offset:-1px; z-index:3; }

/* Reference lines (NE, toit rocher) */
.ilog-refline {
  position:absolute; left:-8px; right:-4px;
  pointer-events:none; z-index:4;
}
.ilog-refline.ne   { border-top:2px dashed #4A90C4; opacity:.9; }
.ilog-refline.toit { border-top:2px dashed #7B4F2E; opacity:.7; }

/* ════════════════════════════════════════════════
   MODEL DETAIL PAGE  (/models/<id>)
   ════════════════════════════════════════════════ */
body.page-model { overflow-y:auto; height:auto; }

/* ── mdetail layout (model detail pages) ── */
.mdetail-wrap { background:var(--bg); min-height:calc(100vh - 57px); }
.mdetail-inner { max-width:1000px; margin:0 auto; padding:32px 28px 80px; }
.mdetail-nav { margin-bottom:22px; }
.mdetail-hero { margin-bottom:28px; }
.mdetail-title {
  font-family:var(--fd); font-size:34px; font-weight:700;
  color:var(--txt); margin-bottom:8px; line-height:1.1;
}
.mdetail-subtitle { font-size:13.5px; color:var(--txt2); line-height:1.65; max-width:660px; }
.mdetail-body {
  display:grid; grid-template-columns:1fr 290px; gap:18px;
  margin-bottom:18px; align-items:start;
}
@media (max-width:720px) { .mdetail-body { grid-template-columns:1fr; } }
.mdetail-content { display:flex; flex-direction:column; gap:14px; }
.mdetail-sidebar { display:flex; flex-direction:column; gap:14px; position:sticky; top:16px; }
.mdetail-map-wrap {
  height:220px; border-radius:8px; overflow:hidden;
  border:1px solid var(--border);
}
.mdetail-map { width:100%; height:100%; }
.mdetail-map .leaflet-control-container,
.mdetail-map .leaflet-pane { pointer-events:none; }
.mdetail-stats-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:8px; overflow:hidden;
}
.mdetail-stats-hdr {
  padding:9px 14px; font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--txt2); background:var(--bg); border-bottom:1px solid var(--border);
}
.mdetail-kv {
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 14px; border-bottom:1px solid var(--border);
  font-size:12px; color:var(--txt2); gap:8px;
}
.mdetail-kv:last-child { border-bottom:none; }
.mdetail-kv span:last-child { color:var(--txt); font-weight:500; text-align:right; }

/* ── legacy model-page (kept for safety) ── */
.model-page { min-height:calc(100vh - 57px); background:var(--bg); }
.model-page-inner { max-width:900px; margin:0 auto; padding:36px 24px 80px; }
.model-hero { margin-bottom:32px; }
.model-kicker {
  font-size:10.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--accent); margin-bottom:10px;
}
.model-title {
  font-family:var(--fd); font-size:34px; font-weight:700;
  color:var(--txt); margin-bottom:8px; line-height:1.1;
}
.model-subtitle {
  font-size:14px; color:var(--txt2); line-height:1.6;
  max-width:680px;
}
.model-section {
  background:var(--white); border-radius:6px;
  border:1px solid var(--border); margin-bottom:16px; overflow:hidden;
}
.model-section-hdr {
  padding:11px 20px; border-bottom:1px solid var(--border);
  font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.09em; color:var(--txt2); background:var(--bg);
}
.model-desc {
  padding:18px 20px; font-size:13.5px; line-height:1.7; color:var(--txt);
}
.model-horizons {
  padding:14px 20px 18px; display:flex; flex-wrap:wrap; gap:7px;
}
.model-horizon-tag {
  padding:4px 12px; border-radius:20px; font-size:11.5px;
  background:var(--bg); color:var(--txt); border:1px solid var(--border);
  white-space:nowrap;
}
.model-kv-grid { display:grid; grid-template-columns:1fr 1fr; }
.model-kv {
  padding:12px 20px; border-bottom:1px solid var(--border); font-size:13px;
}
.model-kv:not(.model-kv-full):nth-child(odd) { border-right:1px solid var(--border); }
.model-kv.model-kv-full { grid-column:1/-1; }
.model-kv-label {
  font-size:10px; color:var(--txt2); margin-bottom:3px;
  font-weight:600; text-transform:uppercase; letter-spacing:0.06em;
}
.model-kv-val { font-weight:500; color:var(--txt); }
.model-kv:last-child,
.model-kv:nth-last-child(2):nth-child(odd) { border-bottom:none; }

/* ════════════════════════════════════════════════
   MODEL LIST PAGE  (/models/)
   ════════════════════════════════════════════════ */
.model-list-grid {
  display:grid; grid-template-columns:repeat(2, 1fr); gap:16px;
}
@media (max-width:680px) { .model-list-grid { grid-template-columns:1fr; } }

.model-card {
  background:var(--white); border-radius:6px; border:1px solid var(--border);
  overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow .15s, transform .15s;
}
.model-card:hover { box-shadow:0 4px 18px rgba(0,0,0,.1); transform:translateY(-1px); }
.model-card-map { height:160px; flex-shrink:0; background:var(--bg2); }
.model-card-body { padding:14px 18px; flex:1; display:flex; flex-direction:column; gap:8px; }
.model-card-name {
  font-family:var(--fd); font-size:17px; font-weight:600; color:var(--txt); line-height:1.2;
}
.model-card-tags { display:flex; flex-wrap:wrap; gap:5px; }
.model-card-tag {
  font-size:10.5px; padding:2px 9px; border-radius:20px;
  background:var(--bg); border:1px solid var(--border); color:var(--txt2);
}
.model-card-link {
  display:inline-flex; align-items:center; gap:5px; margin-top:4px;
  font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--accent); text-decoration:none; transition:gap .12s;
}
.model-card-link:hover { gap:8px; }

/* ── model-chip (cross-section + virtual borehole sidebars) ── */
.model-chip {
  cursor: default;
  border-radius: 4px;
  transition: background .12s, opacity .15s;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px;
}
.model-chip:hover           { background: var(--bg); }
.model-chip.clickable       { cursor: pointer; }
.model-chip.off             { opacity: .35; }
.model-chip.on              { background: var(--bg); }
.model-chip-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.model-chip-name { font-size:12px; font-weight:600; color:var(--txt); flex:1; }
.model-chip-res  { font-size:10px; color:var(--txt2); white-space:nowrap; }
.model-chip-badge {
  font-size:9px; font-weight:700; padding:1px 5px; border-radius:3px;
  background:var(--accent); color:#fff; white-space:nowrap; flex-shrink:0;
}
.model-chip-link {
  display:inline-flex; align-items:center; padding:2px 4px; border-radius:3px;
  color:var(--txt2); text-decoration:none; flex-shrink:0; transition:color .12s;
}
.model-chip-link:hover { color:var(--accent); }

/* recalculate button below model chip list */
.recalc-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 8px 10px; margin-top: 8px;
  border: none; border-radius: 6px;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: opacity .15s;
}
.recalc-btn:hover:not(:disabled) { opacity: .85; }
.recalc-btn:disabled { opacity: .38; cursor: not-allowed; }

/* Labels column */
.ilog-lbls { flex:1; min-width:130px; position:relative; padding-left:10px; }
.ilog-lbl {
  position:absolute; left:0; right:0;
  display:flex; align-items:center; gap:6px;
  transform:translateY(-50%); pointer-events:none;
}
.ilog-lbl-line { width:10px; height:1px; background:#ccc; flex-shrink:0; }
.ilog-lbl-text {
  font-size:11.5px; color:var(--txt); line-height:1.3;
  white-space:normal;
}
.ilog-lbl-text.sm { font-size:10.5px; color:var(--txt2); }

/* Right elevation scale (existing borehole) */
.ilog-scale-right {
  position:relative; flex-shrink:0; width:66px;
  border-left:1.5px solid #ddd;
}
.ilog-tick-r {
  position:absolute; left:8px; transform:translateY(-50%);
  font-size:10.5px; font-family:var(--fm); color:#ccc;
  white-space:nowrap; line-height:1;
}
.ilog-tick-r.major { color:#888; font-weight:500; }
.ilog-tick-r::before {
  content:''; position:absolute; right:calc(100% + 1px); top:50%;
  width:3px; height:1px; background:#ddd;
}
.ilog-tick-r.major::before { width:5px; background:#bbb; }

/* Highlighted table row (cross-link with log) */
tr[data-hz] { transition:background .12s; cursor:default; }
tr[data-hz].hi { background:#eef2ff !important; }

/* Highlighted sidebar litho row */
.lrow { transition:background .12s; cursor:default; }
.lrow.hi { background:var(--bg2); }

/* ════════════════════════════════════════════════
   SONDAGES – bouton filtre dans le layer panel
   ════════════════════════════════════════════════ */

/* Row sondages : pas de onclick sur tout le div → curseur normal */
.layer-item-bh { cursor:default; }
.layer-item-bh:hover { background:var(--bg); }

/* Légende types de sondage */
.bh-leg-row {
  display:flex; align-items:center; gap:7px;
  font-size:11.5px; color:var(--txt); padding:2px 0;
}
.bh-leg-dot {
  width:9px; height:9px; border-radius:50%; flex-shrink:0;
  box-shadow:0 0 0 1.2px rgba(255,255,255,.55);
}

/* Bouton icône filtre */
.bh-filter-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:4px; flex-shrink:0;
  border:1px solid var(--border); background:transparent;
  color:var(--txt2); cursor:pointer; transition:all .15s; padding:0;
}
.bh-filter-btn:hover { background:var(--bg2); color:var(--txt); }
.bh-filter-btn.on {
  background:rgba(18,154,57,0.12); border-color:var(--accent);
  color:var(--accent);
}

/* ════════════════════════════════════════════════
   SONDAGES – panel filtre flottant
   ════════════════════════════════════════════════ */
.bh-filter-float {
  position:absolute; bottom:82px; left:236px; z-index:410;
  width:262px; background:var(--white);
  border:1px solid var(--border); border-radius:8px;
  box-shadow:0 6px 24px rgba(0,0,0,0.16); overflow:hidden;
}
.bh-filter-float.hidden { display:none; }

.bh-filter-float-hdr {
  display:flex; align-items:center; gap:7px;
  padding:9px 12px; font-size:11px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase;
  border-bottom:1px solid var(--border); color:var(--txt2);
  background:var(--bg);
}
.bh-filter-float-hdr svg { flex-shrink:0; }
.bh-filter-float-hdr span, .bh-filter-float-hdr { flex:1; }
.bh-filter-close {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border:none; background:transparent;
  color:var(--txt2); cursor:pointer; border-radius:3px; padding:0;
  transition:all .12s; flex-shrink:0;
}
.bh-filter-close:hover { background:var(--bg2); color:var(--txt); }

.bh-filter-float-body { padding:12px 13px 14px; }

.bh-filter-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-bottom:10px;
}
.bh-filter-lbl {
  font-size:10px; font-weight:600; color:var(--txt2);
  letter-spacing:0.05em; text-transform:uppercase; white-space:nowrap;
  flex-shrink:0; min-width:76px;
}
.bh-filter-inputs {
  display:flex; align-items:center; gap:4px; flex:1; justify-content:flex-end;
}
.bh-filter-input {
  width:60px; border:1px solid var(--border); border-radius:3px;
  padding:4px 6px; font-size:11px; color:var(--txt); background:var(--white);
  font-family:var(--fm);
}
.bh-filter-input:focus { outline:none; border-color:var(--accent); }
.bh-filter-sep { font-size:11px; color:var(--txt2); }
.bh-filter-select {
  border:1px solid var(--border); border-radius:3px; background:var(--white);
  color:var(--txt); font-size:11px; padding:4px 6px; flex:1;
}
.bh-filter-select:focus { outline:none; border-color:var(--accent); }
.bh-filter-apply-row {
  display:flex; align-items:center; gap:8px; margin-top:4px;
}
.bh-filter-count {
  font-size:10.5px; color:var(--txt2); flex:1; text-align:right;
}

/* Checkbox rows in filter panel */
.bh-filter-row-check { align-items:center; }
.bh-filter-check-wrap {
  display:flex; align-items:center; gap:5px;
  font-size:10.5px; color:var(--txt2); cursor:pointer; flex:1; justify-content:flex-end;
}
.bh-filter-check-wrap input[type=checkbox] {
  accent-color:var(--accent); width:13px; height:13px; cursor:pointer; flex-shrink:0;
}

/* ── Labels permanents sur la carte (niveau d'eau / toit rocher) ──── */
.leaflet-tooltip.bh-val-tip {
  background:transparent; border:none; box-shadow:none;
  padding:0; white-space:nowrap; pointer-events:none;
  display:flex; flex-direction:column; gap:2px;
}
.leaflet-tooltip.bh-val-tip::before { display:none; }
.bh-val-nappe {
  display:inline-block; font-size:9px; font-weight:700; line-height:1.4;
  padding:1px 3px; border-radius:2px;
  background:rgba(74,144,196,0.92); color:#fff;
}
.bh-val-toit {
  display:inline-block; font-size:9px; font-weight:700; line-height:1.4;
  padding:1px 3px; border-radius:2px;
  background:rgba(123,79,46,0.88); color:#fff;
}

/* Popup sondage – légende des couleurs */
.bh-type-dot {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  margin-right:4px; flex-shrink:0;
}

/* ════════════════════════════════════════════════
   RESPONSIVE – TABLET  (≤ 900px)
   ════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .hdr-sub    { display:none; }
  .hdr-sep    { display:none; }
  .hdr-nav a  { font-size:12px; padding:6px 8px; }

  .rsidebar   { width:300px; }
}

/* ════════════════════════════════════════════════
   MOBILE TAB SWITCHER  (hidden by default, shown by JS on mobile result pages)
   ════════════════════════════════════════════════ */
.mobile-tab-bar { display:none; }

/* ════════════════════════════════════════════════
   RESPONSIVE – MOBILE  (≤ 640px)
   ════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Viewport height: prevents content cut off by mobile browser chrome ── */
  .page-body {
    height: calc(100vh  - 51px);   /* fallback for older browsers */
    height: calc(100dvh - 51px);   /* dynamic viewport: adjusts as chrome hides/shows */
  }

  /* ── Header ── */
  header { height:48px; padding:0 10px; gap:8px; }
  .hdr-logo  { height:26px; }
  .hdr-brand { min-width:0; overflow:hidden; }
  .hdr-title { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .hdr-sub, .hdr-sep, .hdr-nav { display:none; }
  .hdr-tools { gap:4px; flex-shrink:0; }
  .btn-ghost { padding:6px 9px; }
  /* Icon-only: hide text labels (wrapped in .btn-label spans) */
  .btn-label { display:none; }

  /* ── Map toolbar bars ── */
  .map-bar {
    flex-wrap:wrap; white-space:normal;
    font-size:12px; padding:8px 11px; gap:6px;
    left:8px; right:8px; transform:none; width:auto;
  }
  .bar-sep  { display:none; }
  .bar-hint { display:none; }

  /* ── WMS layer menu: full-width on mobile ── */
  .wms-menu { left:8px; right:8px; width:auto; }

  /* ── Layer panel: scrollable, stays bottom-left ──
     max-width = viewport minus basemap width (≈100px) minus gaps (8+8+8) */
  .layer-panel {
    bottom: 32px; left: 8px;
    min-width: 180px;
    max-width: calc(100vw - 124px);
    max-height: calc(55vh);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .layer-item { font-size:11.5px; padding:7px 10px 7px 12px; }

  /* ── Basemap control: bottom-right, label hidden to keep it narrow ── */
  .basemap-control {
    left: auto; right: 8px; bottom: 32px;
    padding: 5px 7px; gap:0;
  }
  .basemap-control label  { display:none; }
  .basemap-control select { font-size:11px; padding:3px 5px; max-width:100px; }

  /* ── Borehole filter panel: fixed full-width above the status bar ── */
  .bh-filter-float {
    position: fixed;
    left: 8px; right: 8px; bottom: 32px;
    width: auto;
    max-height: 60vh;
    overflow-y: auto;
  }

  /* ── Status bar ── */
  .sbar { font-size:10.5px; gap:8px; padding:0 10px; height:24px; }
  .sbar > span:nth-child(n+4) { display:none; }

  /* ── Popup ── */
  .leaflet-popup-content-wrapper { width:calc(100vw - 32px) !important; }
  .bh-pop { padding:14px; min-width:0; }

  /* ── Mobile tab bar (injected by JS on result pages) ── */
  .mobile-tab-bar {
    display: flex;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .mobile-tab {
    flex: 1; padding: 11px 6px;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--txt2); background: transparent;
    border: none; border-bottom: 2px solid transparent;
    cursor: pointer; transition: all .15s;
    font-family: var(--fb);
  }
  .mobile-tab.on { color:var(--accent); border-bottom-color:var(--accent); }

  /* ── Tab-mode page layout ── */
  .page-body.has-tabs { flex-direction:column; overflow:hidden; }

  /* Both panels hidden until one gets .tab-active */
  .page-body.has-tabs .rsidebar,
  .page-body.has-tabs .rmain {
    display: none;
    width: 100%; flex: 1;
    max-height: none;
    border-right: none; border-bottom: none;
    overflow: hidden;
    min-height: 0;
  }

  /* Active panel takes all remaining height */
  .page-body.has-tabs .rsidebar.tab-active,
  .page-body.has-tabs .rmain.tab-active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  .page-body.has-tabs .rsidebar.tab-active .rsidebar-body { overflow-y:auto;  flex:1; }
  .page-body.has-tabs .rmain.tab-active .rmain-body       { overflow:auto;    flex:1; }

  /* ── Result page layout tightening ── */
  .rsidebar-hdr  { padding:14px 16px 12px; }
  .rmain-hdr     { padding:10px 14px; flex-wrap:wrap; gap:8px; }
  .rmain-ttl     { font-size:15px; }
  .rmain-body    { padding:12px; }
}