/* Lieux: the map, its panels, and the list view. */
/* ---------- the map ---------- */
.map-pane { width: 100%; background: var(--surface-2); border: 1px solid var(--line); }
.map-pane.no-tiles { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 10px, var(--surface) 10px, var(--surface) 20px); }
.cab-pin-wrap { background: none; border: 0; }
.cab-pin { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 18px; line-height: 1; background: var(--surface); border: 2px solid var(--line-strong); box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.map-popup b { display: block; margin-bottom: .2rem; }
.map-popup button { margin-top: .3rem; }
/* The Lieux tool: map and its panels. Named for the tool, not for "places" in general — the stock tables
   have carried class="places" since long before, and a bare .places rule turned them into grids. */
/* The panels are to the left of the map, and the map takes what is left — which is most of the page,
   because reading a map is the point of this one. */
.lieux-layout { display: grid; grid-template-columns: 20rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.lieux-side { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.lieux-side > .card { margin-bottom: 0; }
.lieux-carte { padding: .4rem; }
.lieux-panneau { padding: 0; }
button.side-fold { display: flex; align-items: center; gap: .45rem; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line-strong);
  background: var(--surface-2); padding: .45rem .6rem; }
button.side-fold b { text-transform: uppercase; font-size: .8rem; letter-spacing: .05em; }
button.side-fold:hover { background: var(--accent-soft); }
.fold-mark { border: 0; background: none; color: var(--muted); padding: 0 .15rem; min-height: 0; font-size: .8rem; flex: 0 0 auto; }
button.fold-mark:hover { color: var(--accent); }
.lieux-arbre { max-height: min(26rem, 46vh); overflow: auto; }
.arbre-col { display: flex; align-items: center; gap: .35rem; padding: .3rem .5rem; border-bottom: 1px solid var(--line); }
/* the name stays on the same line as its box: wrapped, it looked like an empty row */
.arbre-col label { gap: .35rem; min-width: 0; flex-wrap: nowrap; align-items: baseline; }
.arbre-col label > span { min-width: 0; overflow-wrap: anywhere; }
.arbre-col span b { font-weight: 600; }
.arbre-feuille { display: flex; align-items: center; gap: .35rem; padding: .18rem .5rem .18rem 1.9rem; font-size: .9rem; }
.arbre-feuille:hover { background: var(--accent-soft); }
.lieux-arbre .side-hint { margin: 0; padding: .35rem .6rem; font-size: .78rem; color: var(--muted); }
.lieux-arbre > p.muted { padding: .5rem .6rem; margin: 0; }
.emoji-pal { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .3rem; }
button.emoji-btn { font-size: 1.1rem; padding: .1rem .3rem; min-height: 0; border-color: var(--line); }


/* The big map of the Lieux tool follows the height of the window rather than stopping at a fixed size:
   on a large screen the point of the page is to read the map, not the panels beside it. */
/* A map measured in JavaScript (map-plein) gets its height from what the window leaves below it;
   the rule here is only the floor, for the moment before the first measurement. */
.map-pane.map-plein { height: max(22rem, 50vh); }
@media (max-width: 900px) { .map-pane.map-plein { height: 62vh; min-height: 20rem; } }

/* ---- Lieux seen as a list: one collection after another ---- */
.lieux-liste + .lieux-liste { margin-top: 1.2rem; }
.lieux-liste .nt-h2 { display: flex; align-items: baseline; gap: .2rem; }
.lieux-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28rem; }