/* v4 · La carte des Weppes (maquette 11b) */
.wpc { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: clamp(600px, calc(100dvh - 150px), 960px); background: var(--wp-bg); border-bottom: 1px solid var(--wp-line); }
.wpc [hidden] { display: none !important; }

.wpc-panel { background: var(--wp-paper); border-right: 1px solid var(--wp-line); min-height: 0; display: flex; flex-direction: column; }
.wpc-panel__body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; }
.wpc-sheet { display: none; }
.wpc-title { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: -.02em; line-height: 1.05; }

.wpc-search { display: flex; align-items: center; gap: 8px; border: 2px solid var(--wp-ink); border-radius: 12px; padding: 0 12px; background: var(--wp-paper); }
.wpc-search .lw-icon { color: var(--wp-faint); font-size: 19px; }
.wpc-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 0; font: 500 14px/1.2 var(--wp-sans); color: var(--wp-ink); outline: none; }
.wpc-search input::placeholder { color: var(--wp-faint); }
.wpc-search:focus-within { box-shadow: 0 0 0 4px rgba(232, 112, 31, .16); }

.wpc-kick { font: 500 11px/1.3 var(--wp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--wp-muted); }

.wpc-layers { display: flex; flex-direction: column; gap: 4px; margin-top: -6px; }
.wpc-layer { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 0; border: 0; background: none; font: 400 14px/1.3 var(--wp-sans); color: var(--wp-ink); text-align: left; cursor: pointer; }
.wpc-layer__box { flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--wp-ink); background: transparent; position: relative; }
.wpc-layer.is-active .wpc-layer__box { background: var(--wp-ink); }
.wpc-layer.is-active .wpc-layer__box::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--wp-paper); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.wpc-layer__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.wpc-layer__t { flex: 1; }
.wpc-layer__n { font: 400 11px/1 var(--wp-mono); color: var(--wp-faint); }
.wpc-layer:hover .wpc-layer__t { text-decoration: underline; text-underline-offset: 3px; }

.wpc-chips { display: flex; flex-direction: column; gap: 6px; }
.wpc-chips__set { display: flex; flex-wrap: wrap; gap: 6px; }
.wpc-chip { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--wp-line-2); background: transparent; font: 600 13px/1.1 var(--wp-sans); color: var(--wp-ink); cursor: pointer; white-space: nowrap; }
.wpc-chip:hover { border-color: var(--wp-ink); }
.wpc-chip.is-active { background: var(--wp-dark); border-color: var(--wp-dark); color: var(--wp-paper); }
.wpc-chip span { font: 400 11px/1 var(--wp-mono); opacity: .6; }
.wpc-chip--sub.is-active { background: #2E5A3A; border-color: #2E5A3A; }

.wpc-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wpc-selects .wpc-select[hidden] + .wpc-select { grid-column: 1 / -1; }
.wpc-select .wp-select { width: 100%; font-size: 13px; }
.wpc-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--wp-sand); font-size: 13px; }

.wpc-list { list-style: none; margin: -6px 0 0; padding: 0; display: flex; flex-direction: column; }
.wpc-list .carte-list__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 0; border: 0; border-bottom: 1px solid var(--wp-line); background: none; text-align: left; color: var(--wp-ink); cursor: pointer; font: inherit; }
.wpc-list .carte-list__item:hover .mono, .wpc-list .carte-list__item.is-active .mono, .wpc-list .carte-list__item.is-map-active .mono { color: var(--wp-acc-2); }
.wpc-list .carte-list__item.is-active { box-shadow: inset 3px 0 0 var(--wp-acc); padding-left: 8px; }
.wpc-list .carte-list__dot { flex: none; width: 44px; height: 38px; border-radius: 8px; background: color-mix(in srgb, var(--dot) 16%, var(--wp-paper)); color: var(--dot); display: inline-flex; align-items: center; justify-content: center; }
.wpc-list .carte-list__dot .lw-icon { font-size: 19px; }
.wpc-list .carte-list__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wpc-list .carte-list__body .mono { font: 700 14px/1.25 var(--wp-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpc-list .carte-list__body .serif { font: 400 12px/1.3 var(--wp-sans); color: var(--wp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpc-list .carte-list__more { padding: 12px 0; font-size: 13px; color: var(--wp-muted); }

.wpc-foot { display: flex; gap: 14px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 700; }
.wpc-foot a:hover { color: var(--wp-acc-2); }

.wpc-map { position: relative; z-index: 0; min-width: 0; min-height: 0; background: #DCD5C3; }
.wpc-map__canvas { position: absolute; inset: 0; background: #DCD5C3; }
.wpc-place { position: absolute; z-index: 450; left: 16px; top: 16px; background: var(--wp-paper); font-size: 13px; font-weight: 800; padding: 8px 13px; border-radius: 999px; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .4); pointer-events: none; }
.wpc-hint { position: absolute; z-index: 450; left: 16px; top: 56px; margin: 0; max-width: 300px; font-size: 12px; color: var(--wp-ink-2); background: rgba(251, 249, 244, .86); padding: 6px 10px; border-radius: 8px; pointer-events: none; }
.wpc-legend { position: absolute; z-index: 450; left: 16px; bottom: 64px; display: flex; flex-wrap: wrap; gap: 6px 12px; background: var(--wp-paper); border-radius: 10px; padding: 8px 12px; font-size: 12px; max-width: min(420px, calc(100% - 32px)); }
.wpc-missing { position: absolute; z-index: 450; left: 16px; bottom: 16px; background: var(--wp-paper); font-size: 13px; font-weight: 700; padding: 9px 14px; border-radius: 999px; box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .45); }
.wpc-missing:hover { background: var(--wp-ink); color: var(--wp-paper); }
.wpc-near { position: absolute; z-index: 450; right: 16px; top: 104px; min-height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--wp-paper); font: 700 13px/1 var(--wp-sans); color: var(--wp-ink); cursor: pointer; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .4); }
.wpc-near::before { content: '◎'; margin-right: 6px; font-size: 15px; }
.wpc-near.is-active { background: var(--wp-ink); color: var(--wp-paper); }
.wpc-loading { position: absolute; z-index: 460; left: 50%; top: 16px; transform: translateX(-50%); display: none; align-items: center; gap: 8px; background: var(--wp-dark); color: var(--wp-paper); font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 999px; }
.wpc.is-loading .wpc-loading { display: inline-flex; }
.wpc-loading__spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); border-top-color: var(--wp-acc); animation: wpc-spin .7s linear infinite; }
@keyframes wpc-spin { to { transform: rotate(360deg); } }

/* Leaflet */
.wpc .leaflet-container { font-family: var(--wp-sans); background: #DCD5C3; }
.wpc .leaflet-top.leaflet-left { left: auto; right: 16px; top: 16px; }
.wpc .leaflet-control-zoom { border: 0 !important; box-shadow: none !important; margin: 0 !important; display: flex; flex-direction: column; gap: 6px; }
.wpc .leaflet-control-zoom a { width: 38px !important; height: 38px !important; line-height: 38px !important; border: 0 !important; border-radius: 10px !important; background: var(--wp-paper) !important; color: var(--wp-ink) !important; font: 800 18px/38px var(--wp-sans) !important; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .4); }
.wpc .leaflet-control-zoom a:hover { background: var(--wp-sand) !important; }
.wpc .leaflet-control-attribution { font-size: 10px; background: rgba(251, 249, 244, .8); }

.carte-pin { background: none !important; border: 0 !important; position: relative; }
.carte-pin__dot { display: block; border-radius: 50%; background: var(--pin); border: 2px solid var(--wp-paper); box-shadow: 0 1px 4px rgba(27, 26, 23, .35); box-sizing: border-box; }
.carte-pin__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--pin); opacity: .5; }
.carte-pin--boost .carte-pin__dot { position: absolute; left: 5px; top: 5px; }

.marker-cluster { background: none !important; }
.marker-cluster div { width: 34px; height: 34px; margin: 3px; border-radius: 50%; background: var(--wp-dark); color: var(--wp-paper); border: 2px solid var(--wp-paper); display: flex; align-items: center; justify-content: center; font: 800 11px/1 var(--wp-sans); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5); }
.marker-cluster-large div { width: 40px; height: 40px; margin: 0; }
.marker-cluster span { line-height: 1; }


@media (max-width: 1100px) {
  .wpc { grid-template-columns: 300px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .wpc { display: block; position: relative; height: calc(100dvh - 93px - var(--wp-tabbar-h, 0px)); min-height: 520px; overflow: hidden; }
  .wpc-map { position: absolute; inset: 0; }
  .wpc-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 700; max-height: min(80%, 640px); border-right: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .3); transform: translateY(calc(100% - 58px)); transition: transform .28s ease; }
  .wpc.is-sheet-open .wpc-panel { transform: translateY(0); }
  .wpc-sheet { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 10px 16px 12px; border: 0; background: transparent; font: 700 13px/1.2 var(--wp-sans); color: var(--wp-ink); cursor: pointer; flex: none; }
  .wpc-sheet__grip { width: 42px; height: 4px; border-radius: 4px; background: var(--wp-ink); opacity: .25; }
  .wpc-panel__body { padding: 4px 18px 18px; }
  .wpc-title { font-size: 22px; }
  .wpc-hint { display: none; }
  .wpc-place { top: 12px; left: 12px; }
  .wpc .leaflet-top.leaflet-left { top: 12px; right: 12px; }
  .wpc-near { top: auto; right: 12px; bottom: 72px; }
  .wpc-missing { left: 12px; bottom: 72px; }
  .wpc-legend { bottom: 118px; left: 12px; }
  .wpc .leaflet-bottom { margin-bottom: 58px; }
}