:root {
  --fond: #f6f3ee;
  --texte: #1f2328;
  --discret: #5b6168;
  --trait: #d8d2c6;
  --choix: #e0552b;
  --h1: #eee9df;
  --h2: #d9d1c3;
  --h3: #bdb2a2;
  --h4: #9c8f7e;
}

html, body {
  margin: 0;
  height: 100%;
  background: #c9d3bd;
  color: var(--texte);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}

#ville {
  position: fixed;
  inset: 0;
}

#panneau {
  position: absolute;
  top: 12px;
  left: 12px;
  width: min(340px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  box-sizing: border-box;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--fond) 94%, transparent);
  border: 1px solid var(--trait);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgb(0 0 0 / 18%);
}

#panneau h1 { margin: 0 0 4px; font-size: 1.25rem; }
#panneau h2 { margin: 14px 0 6px; font-size: 1rem; }
#panneau p { margin: 4px 0; }
.aide, .source { color: var(--discret); font-size: 0.86rem; }

#attributs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
  margin: 0;
}
#attributs dt { color: var(--discret); }
#attributs dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.legende { list-style: none; margin: 0; padding: 0; }
.legende li { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.pastille { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgb(0 0 0 / 25%); }
.pastille.h1 { background: var(--h1); }
.pastille.h2 { background: var(--h2); }
.pastille.h3 { background: var(--h3); }
.pastille.h4 { background: var(--h4); }

.erreur { color: #a3261b; font-weight: 600; }

/* Le logo de Cesium mène à un service tiers : il n'est pas montré (la licence Apache-2.0 ne le demande pas ; la notice
   de la bibliothèque est servie dans cesium/LICENSE.md). */
.cesium-credit-logoContainer { display: none !important; }

@media (max-width: 640px) {
  #panneau { top: auto; bottom: 12px; max-height: 45vh; }
}