:root {
  --brand: #14532d;
  --accent: #1d4ed8;
  --line: #e0ddd9;
  --ink: #1c1917;
  --muted: #6b6661;
  --man: #c2410c;
  --hdr: 3rem;
  --elev-h: 108px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); overscroll-behavior: none; }
#map { position: fixed; inset: 0; background: #eceae7; }
.leaflet-top { top: calc(var(--hdr) + .4rem); }

/* ---------- barre ---------- */
header {
  position: fixed; inset: 0 0 auto 0; z-index: 1100; /* au-dessus du panneau : le menu ⋯ doit passer devant */
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem;
  padding: .5rem .7rem;
  background: #fffffff5; backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--brand); letter-spacing: .01em; }
.brand .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--brand); }
.grow { flex: 1; }

header select, header button { font: inherit; color: inherit; }
header select, header button {
  padding: .32rem .6rem; border: 1px solid var(--line); border-radius: .5rem; background: #fff;
}
header select { cursor: pointer; }
header button { cursor: pointer; }
header button:hover:not(:disabled) { background: #f6f5f3; }
header button:disabled { opacity: .4; cursor: default; }
header .primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
header .primary:hover:not(:disabled) { background: #166534; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: .5rem; overflow: hidden; background: #fff; }
.seg label { display: block; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: .32rem .7rem; font-size: .9rem; color: var(--muted); cursor: pointer; }
.seg input:checked + span { background: var(--brand); color: #fff; }
.seg label + label span { border-left: 1px solid var(--line); }

/* ---------- carte flottante ---------- */
#stats {
  position: fixed; left: .7rem; bottom: .7rem; z-index: 1000;
  max-width: calc(100vw - 1.4rem);
  padding: .5rem .85rem; border-radius: .65rem;
  background: #fffffff5; backdrop-filter: blur(8px);
  border: 1px solid var(--line); box-shadow: 0 2px 12px #0002;
  font-variant-numeric: tabular-nums; font-size: .95rem;
}

/* ---------- profil altimétrique ---------- */
#elev {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; height: var(--elev-h);
  background: #fffffff5; backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); cursor: crosshair; touch-action: none;
}
#elev svg { width: 100%; height: 100%; display: block; }
#elev .area { fill: rgba(29, 78, 216, .13); }
#elev .line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
#elev .cursor { stroke: #44403c; stroke-width: 1; vector-effect: non-scaling-stroke; }
#elevInfo {
  position: absolute; top: .45rem; right: .8rem; padding: .05rem .4rem; border-radius: .3rem;
  background: #fff; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
body.has-profile #stats { bottom: calc(var(--elev-h) + .7rem); }
body.has-profile .leaflet-bottom { bottom: var(--elev-h); }

/* ---------- panneau des points ---------- */
#panel {
  position: fixed; z-index: 1001;
  top: calc(var(--hdr) + .5rem); right: .7rem; bottom: .7rem; width: 17.5rem;
  display: flex; flex-direction: column;
  background: #fffffff5; backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: .7rem; box-shadow: 0 2px 12px #0002;
  overflow: hidden;
}
body.has-profile #panel { bottom: calc(var(--elev-h) + .5rem); }
#panel h2 {
  display: flex; align-items: baseline; gap: .3rem;
  margin: 0; padding: .55rem .8rem; font-size: .88rem; font-weight: 600;
  border-bottom: 1px solid var(--line);
}
#panel h2 span { color: var(--muted); font-weight: 400; }
#ptList { list-style: none; margin: 0; padding: .25rem; overflow: auto; flex: 1; }
#ptList .empty { padding: .8rem; color: var(--muted); font-size: .85rem; }
.pt { display: flex; align-items: center; gap: .55rem; padding: .45rem .5rem; border-radius: .5rem; cursor: pointer; }
.pt:hover { background: #f5f4f2; }
.pt .grip { flex: 0 0 auto; width: 14px; text-align: center; color: #bdb7b1; cursor: grab; font-size: .85rem; line-height: 1; user-select: none; touch-action: none; }
.pt .grip:hover { color: var(--muted); }
body.dragging { cursor: grabbing; }
body.dragging .pt { background: transparent; }
.pt .idx { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font: 700 11px/1 system-ui; }
.pt .idx.mag { background: var(--accent); }
.pt .idx.man { background: var(--man); }
.pt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pt-txt b { font-weight: 600; font-size: .88rem; }
.pt-txt em { font-style: normal; color: var(--muted); font-size: .8rem; }
.pt-txt small { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.pt .del { flex: 0 0 auto; width: 26px; height: 26px; border: 0; border-radius: .4rem; background: transparent; color: var(--muted); cursor: pointer; font-size: .8rem; line-height: 1; }
.pt .del:hover { background: #fee2e2; color: #b91c1c; }
.panel-hint { margin: 0; padding: .5rem .8rem; border-top: 1px solid var(--line); font-size: .75rem; color: var(--muted); }
.only-mobile { display: none; }

/* ---------- marqueurs ---------- */
.wp {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font: 700 12px/1 system-ui; color: #fff; border: 2px solid #fff; box-shadow: 0 1px 4px #0005;
}
.wp.mag { background: var(--accent); }
.wp.man { background: var(--man); }

.popup { font-size: .85rem; }
.popup button { margin-top: .35rem; font: inherit; padding: .25rem .5rem; cursor: pointer; }

/* ---------- dialog ---------- */
dialog {
  border: 0; border-radius: .8rem; padding: 1.2rem 1.3rem; width: min(26rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem); overflow: auto; box-shadow: 0 16px 48px #0004; color: var(--ink);
}
dialog::backdrop { background: #0005; }
dialog h2 { margin: 0 0 .8rem; font-size: 1.05rem; }
dialog label { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: .5rem 0; }
dialog input { font: inherit; padding: .32rem .45rem; border: 1px solid var(--line); border-radius: .45rem; width: 11rem; }
dialog input:focus-visible, header select:focus-visible, header button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
dialog input[type=number] { width: 5rem; text-align: right; }
dialog details { margin-top: .8rem; border-top: 1px solid var(--line); padding-top: .6rem; }
dialog summary { cursor: pointer; color: var(--muted); }
dialog details label { flex-direction: column; align-items: stretch; gap: .25rem; }
dialog details input { width: 100%; }
.hint { font-size: .8rem; color: var(--muted); margin: .25rem 0 .5rem; }
dialog menu { display: flex; justify-content: flex-end; gap: .5rem; padding: 0; margin: 1rem 0 0; }
dialog menu button { font: inherit; padding: .4rem .85rem; border: 1px solid var(--line); border-radius: .5rem; background: #fff; cursor: pointer; }
dialog menu .primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }

@media (max-width: 560px) {
  header { gap: .35rem .45rem; }
  .brand { display: none; }
  header select { flex: 1; min-width: 0; }
  :root { --elev-h: 88px; }
}

@media (max-width: 899px) {
  .only-mobile { display: inline-block; }
  #panel {
    width: min(18rem, calc(100vw - 1.4rem));
    transform: translateX(calc(100% + 1rem));
    transition: transform .18s ease;
    box-shadow: 0 8px 30px #0003;
  }
  #panel.open { transform: none; }
}

/* ---------- légende / menu / nouveaux dialogues ---------- */
#legend { display: flex; flex-wrap: wrap; gap: .3rem .75rem; margin-top: .4rem; font-size: .78rem; }
#legend .lg { display: inline-flex; align-items: center; gap: .25rem; color: var(--muted); }
#legend .lg i { width: .75rem; height: .55rem; border-radius: 2px; }
#legend .lg em { font-style: normal; color: var(--ink); }
#legend .note { color: var(--ink); font-weight: 600; }

#more { position: relative; }
#more summary { list-style: none; padding: .32rem .7rem; border: 1px solid var(--line); border-radius: .5rem; background: #fff; cursor: pointer; user-select: none; font-weight: 700; }
#more summary::-webkit-details-marker { display: none; }
#more[open] summary { background: #f6f5f3; }
#more > div {
  position: absolute; right: 0; top: calc(100% + .35rem); z-index: 1200;
  display: flex; flex-direction: column; gap: .2rem; padding: .35rem;
  background: #fff; border: 1px solid var(--line); border-radius: .6rem; box-shadow: 0 8px 24px #0003;
  min-width: 13.5rem;
}
#more > div button { text-align: left; border-color: transparent; white-space: nowrap; }
#more > div button:hover:not(:disabled) { background: #f5f4f2; }

dialog label.col { flex-direction: column; align-items: stretch; gap: .25rem; }
dialog label.col input { width: 100%; font-size: .82rem; }
#qr { display: flex; justify-content: center; margin: .2rem 0 .8rem; }
#qr img, #qr canvas { border-radius: .4rem; }
#cuesList { margin: .3rem 0; padding-left: 1.3rem; max-height: 55vh; overflow: auto; font-size: .88rem; }
#cuesList li { margin: .3rem 0; }
#cuesList em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
#wxBody ul { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
#wxBody li { padding: .4rem 0; border-top: 1px solid var(--line); }
#wxBody li:first-child { border-top: 0; }
#wxBody .warn { color: #b45309; font-weight: 600; margin: .6rem 0 0; }

/* ---------- page de partage / suivi ---------- */
.viewbar #title { font-weight: 600; }
.viewbar #vstats { font-variant-numeric: tabular-nums; font-size: .9rem; color: var(--muted); }
.viewbar #dl[hidden], .viewbar #track[hidden] { display: none; }
#liveInfo {
  position: fixed; left: .7rem; bottom: .7rem; z-index: 1000;
  padding: .5rem .85rem; border-radius: .65rem;
  background: #fffffff5; backdrop-filter: blur(8px);
  border: 1px solid var(--line); box-shadow: 0 2px 12px #0002; font-size: .9rem;
}