/* Top bar, search, and menu */
.topbar {
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 1100;
  pointer-events: none; /* allow map interactions; re-enable on children */
}
.searchbar {
  position: relative; /* anchor autocomplete */
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  width: min(90vw, 800px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px;
  align-items: center;
}
.searchbar input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  font-size: 15px;
}
.logo-btn {
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  display: grid; place-items: center; padding: 0 8px;
}
.btp-logo { display: block; }

/* Remove explicit search button and show magnifier inside the input */
.searchbar .search-icon {
  position: absolute;
  right: 112px; /* space before logo button */
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none; /* non-clickable */
}
.searchbar input {
  padding-right: 44px; /* room for the icon */
}

/* State styling for the top-bar recenter button */
#btp-recenter-btn.state-ok { color: #1f6feb; border-color: rgba(31, 111, 235, 0.35); }
#btp-recenter-btn.state-unknown { color: var(--muted); }
#btp-recenter-btn.state-denied { color: #c62828; border-color: rgba(198, 40, 40, 0.35); }
#btp-recenter-btn:hover, #btp-recenter-btn:focus { box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.15); outline: none; }

/* Autocomplete suggestion box */
.btp-suggest-box {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  max-height: 280px;
  overflow-y: auto;
  z-index: 1200; /* above topbar */
}
/* Place suggestion box visually under the centered searchbar */
.btp-suggest-box .sugg-item { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--border); }
.btp-suggest-box .sugg-item:last-child { border-bottom: none; }
.btp-suggest-box .sugg-item:hover, .btp-suggest-box .sugg-item.active { background: #f3f6fb; }

/* Dropdown menu */
.menu {
  position: absolute;
  top: calc(100% + 8px);
  right: max((100vw - min(90vw, 800px)) / 2, 12px);
  width: min(280px, 90vw);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 10px;
  display: none;
  pointer-events: auto;
}
.menu.open { display: block; }
.menu-section { padding: 8px 6px; border-bottom: 1px solid var(--border); }
.menu-section:last-child { border-bottom: none; }
.menu-title { font-weight: 600; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.menu-item { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 14px; }
.menu-button { width: 100%; padding: 10px 14px; margin: 6px 0; border-radius: 10px; background: linear-gradient(135deg,#f3f6fb,#e8eef7); border: 1px solid var(--border); color: var(--text); cursor: pointer; font-size:14px; font-weight:500; text-align:left; transition:.15s background,.15s box-shadow,.15s transform; text-decoration:none; display:block; }
.menu-button:hover, .menu-button:focus { background: linear-gradient(135deg,#eef3fa,#dfe7f2); box-shadow:0 4px 16px rgba(19,33,68,.08); outline:none; }
.menu-button:active { transform:translateY(1px); }
.menu-button:focus-visible { outline:2px solid var(--primary-2); outline-offset:2px; }
.menu-button#btp-settings { background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff; border-color:transparent; }
.menu-button#btp-settings:hover, .menu-button#btp-settings:focus { background:linear-gradient(135deg,var(--primary-2),var(--primary)); }
/* Nouveau style propre pour le lien "Modèle : explications" */
.menu-link { background:linear-gradient(135deg,#ffffff,#f5f8fc); border:1px solid var(--border); color:var(--primary); font-weight:600; cursor:pointer; }
.menu-link:hover, .menu-link:focus { color:var(--primary-2); background:linear-gradient(135deg,#f9fbfe,#ecf2f9); }
.menu-link:active { transform:translateY(1px); }
.menu-link:visited { color:var(--primary); }
/* Suppression des anciens styles pseudo-éléments et règle obsolète disabled */
.menu-link { position:relative; padding-left:44px; }
.menu-link:before { content:""; position:absolute; left:14px; top:50%; width:20px; height:20px; transform:translateY(-50%); background: radial-gradient(circle at 30% 30%, var(--primary-2), var(--primary)); border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.18); }
.menu-link:hover:before, .menu-link:focus:before { filter:brightness(1.1); }
.menu-link { color:var(--primary); font-weight:600; }
.menu-link:hover, .menu-link:focus { color:var(--primary-2); text-decoration:none; }
.menu .basemap-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(56px,1fr)); gap:10px; margin:4px 0 2px; }
.basemap-tile { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; font-size:11px; line-height:1.1; }
.basemap-tile input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.basemap-tile .tile-thumb { width:56px; height:56px; border-radius:8px; background: #ddd center/cover no-repeat; background-image:var(--img); border:2px solid transparent; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.basemap-tile input:checked + .tile-thumb { border-color:#1f6feb; box-shadow:0 0 0 3px rgba(31,111,235,.25); }
.basemap-tile .tile-name { font-weight:600; color:var(--muted); }
.basemap-tile input:focus-visible + .tile-thumb { outline:2px solid #1f6feb; outline-offset:2px; }
/* Légende dans menu: retirer marges externes */
.legend-in-menu { margin:4px 0 0 0; box-shadow:none; background:transparent; border:none; padding:0; }
.legend-in-menu .legend-label { font-size:12px; }