/* Velyx Management — styles du module Monde & carte (variables et classes du socle uniquement).
   Socle (app.css) : .map-page, .map-wrap, .map-side, .map-player, .map-coords, habillage Leaflet. */

/* Carte */
.map-wrap .leaflet-container { cursor: crosshair; }
.map-wrap .leaflet-tile-pane { filter: none; }
.map-toolbar { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 600; display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; pointer-events: none; }
.map-toolbar > * { pointer-events: auto; }
.map-toolbar .seg button { box-shadow: var(--shadow); }
.map-search { position: relative; width: min(340px, 100%); }
.map-search input { padding: 9px 14px 9px 40px; background: var(--surface); box-shadow: var(--shadow); }
.map-search .results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 0; 
  box-shadow: var(--shadow); max-height: 340px; overflow-y: auto; padding: 6px; display: grid; gap: 2px; }
.map-search .results button { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; width: 100%;
  background: none; border: 0; color: var(--ink); padding: 7px 9px; cursor: pointer; font: inherit; font-size: 13px; }
.map-search .results button:hover, .map-search .results button.on { background: var(--surface-3); }
.map-search .results small { color: var(--muted); }
.map-search .results img { width: 20px; height: 20px; object-fit: contain; }
.map-banner { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 600; max-width: calc(100% - 24px); font-size: 12.5px;
  padding: 7px 12px; background: var(--surface); border: 0; box-shadow: var(--shadow); display: flex; gap: 8px; align-items: center; }
.map-banner.warn { background: rgba(var(--c-orange-soft-rgb), .2); }
.map-banner svg { width: 15px; height: 15px; color: var(--warn); }
.map-coords { cursor: pointer; user-select: all; }

/* Zoom : un seul groupe de plaques carrées (34 px), en bas à droite. */
.map-zoom { position: absolute; right: 12px; bottom: 12px; z-index: 600; display: grid; gap: 2px; box-shadow: var(--inv-shadow); }
.map-zoom .btn.icon { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; background: var(--inv-pop); color: var(--inv-ink); }
.map-zoom .btn.icon svg { width: 16px; height: 16px; }
.map-minus { display: block; width: 12px; height: 2px; background: currentColor; }

/* Chargement : voile tant que les premières tuiles arrivent, pastille pendant le chargement des couches. */
.map-loading { position: absolute; inset: 0; z-index: 650; display: grid; place-items: center; background: rgb(var(--c-night-950-rgb));
  transition: opacity var(--v-slow, .3s) ease, visibility 0s linear var(--v-slow, .3s); }
.map-loading.done { opacity: 0; visibility: hidden; pointer-events: none; }
.map-loading-box { display: grid; gap: 10px; justify-items: center; color: var(--inv-ink-2); font-size: 12.5px; font-weight: 600; }
.map-busy { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; background: var(--inv-pop); color: var(--inv-ink-2);
  box-shadow: var(--inv-shadow); font-size: 12px; font-weight: 600; }
.map-busy.hidden { display: none; }

/* Popup joueur : actions rapides. */
.map-pop .row { flex-wrap: wrap; }
.map-quick { flex: 1 1 100%; display: flex; gap: 4px; flex-wrap: wrap; padding-top: 8px; box-shadow: inset 0 1px 0 var(--c-separator); }
.map-key { display: flex; gap: 14px; font-size: 12px; color: var(--inv-ink-2); }
.map-key span { display: inline-flex; align-items: center; gap: 6px; }
.map-key i { width: 10px; height: 10px; display: inline-block; }
.map-key i.warn { background: var(--warn); }
.map-key i.danger { background: var(--danger); }

/* Panneau latéral */
.map-side h3 { margin: 0 0 8px; font-size: 11.5px; font-weight: 600; color: var(--muted); font-weight: 600; }
.map-side section { display: grid; gap: 8px; }
.map-side .seg { width: 100%; }
.map-side .seg button { flex: 1; }
.layer-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; font-size: 13.5px; padding: 6px 8px;
  border: 0; }
.layer-row:hover { background: var(--surface-2); }
.layer-row.on { background: rgba(var(--c-glass-rgb), .08); }
.layer-row .ic { width: 20px; height: 20px; display: grid; place-items: center; color: var(--muted); }
.layer-row .ic img { width: 20px; height: 20px; object-fit: contain; }
.layer-row .n { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.layer-row .toggle { transform: scale(.85); }
.map-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 4px; max-height: 260px; overflow-y: auto; }
.map-legend button { display: flex; gap: 7px; align-items: center; background: none; border: 0; color: var(--ink-2); font: inherit; font-size: 12px;
  padding: 4px 6px; cursor: pointer; text-align: left; min-width: 0; }
.map-legend button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-legend button:hover { background: var(--surface-2); }
.map-legend button.off { opacity: .4; }
.map-legend img { width: 18px; height: 18px; object-fit: contain; flex: none; }
.map-plist { display: grid; gap: 2px; max-height: 340px; overflow-y: auto; }
.map-plist button { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 9px; align-items: center; background: none; border: 0; color: var(--ink);
  font: inherit; font-size: 13px; padding: 6px 8px; cursor: pointer; text-align: left; }
.map-plist button:hover, .map-plist button.on { background: var(--surface-3); }
.map-plist small { color: var(--muted); font-size: 11.5px; }
.map-tools { display: grid; gap: 6px; font-size: 12.5px; }
.map-tools .mono { font-size: 12px; }
.heat-scale { height: 8px; background: linear-gradient(90deg, transparent, var(--warn), var(--danger)); border: 0; }

/* Marqueurs */
.map-blip { display: grid; place-items: center; }
.map-blip img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); pointer-events: none; }
.map-blip.staff.editable { cursor: grab; }
.map-blip.dim { opacity: .45; }
.map-blip.sel img { filter: drop-shadow(0 0 4px var(--accent)) drop-shadow(0 0 2px var(--accent)); }
.map-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-2), 0 2px 6px rgba(0, 0, 0, .5); }
.map-dot.sq { }
.map-player { background: var(--accent); position: relative; }
.map-player.job { background: var(--blue); }
.map-player.staff { background: var(--danger); }
.map-player.dead { background: var(--muted); }
.map-player.stale { opacity: .6; border-style: dashed; }
.map-player.follow { box-shadow: 0 0 0 4px var(--accent-line), 0 0 14px rgba(0, 0, 0, .6); }
.map-player-label { background: var(--surface) !important; color: var(--ink) !important; font-size: 11px !important; padding: 2px 6px !important; }
.map-pin { color: var(--accent); }
.map-pin svg { width: 28px; height: 28px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.map-pop { display: grid; gap: 10px; min-width: 260px; max-width: 320px; }
.map-pop .t { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 14px; }
.map-pop .t img { width: 22px; height: 22px; object-fit: contain; }
.map-pop dl.kv { font-size: 12px; margin: 0; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; }
.map-pop dl.kv dd { margin: 0; overflow-wrap: anywhere; }
.map-pop .row { gap: 6px; }

/* Menu contextuel de la carte */
.map-ctx { display: grid; gap: 2px; min-width: 190px; }
.map-ctx button { display: flex; gap: 8px; align-items: center; background: none; border: 0; color: var(--ink); font: inherit; font-size: 13px; padding: 7px 8px;
  cursor: pointer; text-align: left; }
.map-ctx button:hover { background: var(--surface-3); }
.map-ctx button svg { width: 15px; height: 15px; color: var(--muted); }

/* Éditeur de blip : grille d'icônes et palette */
.blip-editor { display: grid; gap: 14px; }
.blip-preview { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 0; background: var(--check-a); }
.blip-preview img { width: 36px; height: 36px; object-fit: contain; }
.sprite-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 4px; max-height: 320px; overflow-y: auto; padding: 4px;
  border: 0; background: var(--check-a); }
.sprite-grid button { aspect-ratio: 1; display: grid; place-items: center; background: none; border: 0; cursor: pointer; padding: 5px; position: relative; }
.sprite-grid button:hover { background: var(--surface-3); }
.sprite-grid button.on { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.sprite-grid button img { width: 100%; height: 100%; object-fit: contain; }
.sprite-grid button small { position: absolute; right: 3px; bottom: 1px; font-size: 9px; color: var(--faint); font-variant-numeric: tabular-nums; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); gap: 4px; }
.swatches button { aspect-ratio: 1; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); padding: 0; }
.swatches button.on { box-shadow: 0 0 0 2px var(--ink); }

/* Lieux */
.mini-map { height: 240px; overflow: hidden; border: 0; background: var(--check-a); position: relative; }
.mini-map .leaflet-container { position: absolute; inset: 0; background: var(--check-a); }
.place-form { display: grid; gap: 12px; }
.place-form .form-grid { gap: 12px; }
.place-meta { font-size: 12px; color: var(--muted); }

/* Une colonne (≤ 1100 px) : la carte garde une hauteur fixe, le panneau passe dessous et la page défile. */
@media (max-width: 1100px) {
  .page.map-page, .page.map-page:has(> .subnav) { grid-template-rows: none; grid-auto-rows: auto; align-content: start; }
  .page.map-page > .map-wrap { height: 64vh; min-height: 360px; }
  .page.map-page > .map-side { overflow: visible; min-height: auto; }
}
@media (max-width: 960px) {
  .map-toolbar { left: 8px; right: 8px; top: 8px; }
  .map-search { width: 100%; }
  .map-zoom { right: 8px; bottom: 8px; }
  .map-coords { display: none; }
  .map-pop { min-width: 220px; }
}
@media (max-width: 720px) {
  .map-toolbar { left: 8px; top: 8px; }
  .map-search { width: 100%; }
  .map-legend { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}
/* Leaflet 1.9 additionne les tuiles qui se chevauchent (mix-blend-mode: plus-lighter) : en zoom fractionnaire, liserés clairs.
   Mélange normal et recouvrement d'un pixel pour masquer les jointures. */
.map-wrap .leaflet-container img.leaflet-tile, .mini-map .leaflet-container img.leaflet-tile { mix-blend-mode: normal; width: 257px !important; height: 257px !important; }