*, *::before, *::after { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; background: #f5f3ee; font-family: system-ui, -apple-system, sans-serif; }
    #map { height: 100%; }

    /* Utilitaire global */
    .hidden { display: none !important; }

    /* Quand une modale est ouverte, on désactive les interactions carte */
    body.auth-open #map,
    body.auth-open .maplibregl-canvas,
    body.auth-open .maplibregl-canvas-container {
      pointer-events: none !important;
    }

    /* ── Shared card ──────────────────────────────────────────────────────── */
    .card {
      background: rgba(255,255,255,0.96); border: 1px solid rgba(0,0,0,0.09);
      border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.10);
      backdrop-filter: blur(8px);
    }

    /* ── HUD ──────────────────────────────────────────────────────────────── */
    #hud {
      position: absolute; top: 12px; left: 12px; z-index: 10;
      padding: 10px 14px; font-size: 12px; max-width: 210px; pointer-events: none;
    }
    #hud strong { display: block; font-size: 13px; font-weight: 700; margin-bottom: 2px; }
    #hud small  { display: block; opacity: .6; line-height: 1.5; font-size: 11px; }
    #status     { margin-top: 5px; font-size: 11px; color: #666; }

    /* ── Layers panel ─────────────────────────────────────────────────────── */
    #layers-panel {
      position: absolute; top: 12px; right: 12px; z-index: 19;
      width: 300px; display: flex; flex-direction: column;
      max-height: calc(100vh - 108px); overflow: hidden;
    }
    .lp-header {
      display: flex; align-items: flex-start; justify-content: space-between;
      padding: 12px 14px 10px; border-bottom: 1px solid rgba(0,0,0,.07); gap: 8px; flex-shrink: 0;
    }
    .lp-title { font-size: 13px; font-weight: 700; color: #1c1a18; }
    .lp-sub   { font-size: 11px; color: #aaa; margin-top: 2px; }
    .lp-tools {
      display: flex; align-items: center; gap: 6px;
      padding: 9px 12px; border-bottom: 1px solid rgba(0,0,0,.06); flex-shrink: 0;
    }
    #lp-search {
      flex: 1; min-width: 0; padding: 6px 9px; font-size: 12px;
      border: 1px solid rgba(0,0,0,.12); border-radius: 7px; outline: none; background: #fbfaf8;
    }
    #lp-search:focus { border-color: #2563eb; background: #fff; }
    .lp-tool-btn {
      flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
      border: 1px solid rgba(0,0,0,.10); border-radius: 7px; background: #fff; cursor: pointer; color: #777;
      transition: color .1s, border-color .1s;
    }
    .lp-tool-btn:hover { color: #2563eb; border-color: rgba(37,99,235,.4); }
    .lp-tool-btn svg { width: 15px; height: 15px; }

    .lp-list { overflow-y: auto; padding: 6px 8px 10px; }
    .lp-group + .lp-group { margin-top: 4px; }
    .lp-group-head {
      display: flex; align-items: center; gap: 6px; width: 100%;
      padding: 6px 6px; background: none; border: none; cursor: pointer;
      font-size: 10px; font-weight: 700; color: #aaa;
      text-transform: uppercase; letter-spacing: .06em; text-align: left;
    }
    .lp-group-head:hover { color: #666; }
    .lp-caret { width: 8px; flex-shrink: 0; transition: transform .12s; font-size: 9px; color: #ccc; }
    .lp-group.collapsed .lp-caret { transform: rotate(-90deg); }
    .lp-group.collapsed .lp-rows { display: none; }
    .lp-group-count { margin-left: auto; font-weight: 600; color: #ccc; font-variant-numeric: tabular-nums; }
    .lp-group-eye {
      flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      width: 18px; height: 18px; border: none; background: none; cursor: pointer; color: #c4c0ba; padding: 0;
    }
    .lp-group-eye:hover { color: #2563eb; }
    .lp-group-eye svg { width: 14px; height: 14px; }

    .lp-rows { display: flex; flex-direction: column; gap: 1px; }
    .lp-row {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 7px; border-radius: 8px; cursor: pointer;
      border: 1px solid transparent; background: none; width: 100%; text-align: left;
      transition: background .1s;
    }
    .lp-row:hover { background: #f4f2ee; }
    .lp-row.active { background: #eaf1fd; border-color: rgba(37,99,235,.30); }
    .lp-row.off .lp-name, .lp-row.off .lp-swatch { opacity: .38; }

    .lp-eye {
      flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      width: 20px; height: 20px; border: none; background: none; cursor: pointer;
      color: #b9b5ae; padding: 0; border-radius: 5px;
    }
    .lp-eye:hover { color: #2563eb; background: rgba(37,99,235,.09); }
    .lp-row.off .lp-eye { color: #d8d4ce; }
    .lp-eye svg { width: 15px; height: 15px; }

    .lp-swatch {
      flex-shrink: 0; width: 18px; height: 18px; border-radius: 5px;
      border: 1px solid rgba(0,0,0,.16); position: relative; overflow: hidden;
      background-image: linear-gradient(45deg,#e4e0da 25%,transparent 25%,transparent 75%,#e4e0da 75%),
                        linear-gradient(45deg,#e4e0da 25%,transparent 25%,transparent 75%,#e4e0da 75%);
      background-size: 8px 8px; background-position: 0 0, 4px 4px;
    }
    .lp-swatch i { position: absolute; inset: 0; display: block; }
    .lp-swatch.symbol i {
      display: flex; align-items: center; justify-content: center;
      font: 700 11px/1 Georgia, serif; background: #fff !important;
    }
    .lp-swatch.line i { top: 50%; height: 4px; margin-top: -2px; }
    .lp-swatch.circle { background: #fff; }
    .lp-swatch.circle i { inset: 3px; border-radius: 50%; }
    .lp-swatch.line { background: #fff; }

    .lp-name { flex: 1; min-width: 0; font-size: 12px; color: #26241f; line-height: 1.25; }
    .lp-name small { display: block; font-size: 10px; color: #aaa; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .lp-mod { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: #2563eb; opacity: 0; }
    .lp-row.modified .lp-mod { opacity: 1; }
    .lp-empty { padding: 18px 10px; text-align: center; font-size: 12px; color: #bbb; }

    /* ── Edit panel ───────────────────────────────────────────────────────── */
    #edit-panel {
      position: absolute; top: 12px; right: 12px; z-index: 20;
      width: 272px; max-height: calc(100vh - 108px);
      display: flex; flex-direction: column; overflow: hidden;
      transition: opacity .15s, transform .15s, right .15s;
    }
    #edit-panel.hidden { opacity: 0; pointer-events: none; transform: translateY(-6px); }
    body.layers-open #edit-panel { right: 324px; }

    .ep-header {
      display: flex; align-items: flex-start; justify-content: space-between;
      padding: 12px 14px 10px; border-bottom: 1px solid rgba(0,0,0,.07); gap: 8px; flex-shrink: 0;
    }
    .ep-badge {
      display: inline-block; font-size: 10px; font-weight: 600;
      padding: 2px 7px; border-radius: 20px; margin-bottom: 4px;
      letter-spacing: .04em; text-transform: uppercase;
    }
    .ep-badge.fill   { background: #e8f0fb; color: #3b6ab5; }
    .ep-badge.line   { background: #fdeee8; color: #b55a30; }
    .ep-badge.symbol { background: #eef8ea; color: #3d8038; }
    .ep-badge.background { background: #f0eeea; color: #6b6558; }
    .ep-badge.circle { background: #fdf0f6; color: #b53b7a; }
    .ep-badge.fill-extrusion { background: #f1eefb; color: #6d4fb5; }
    .ep-name    { font-size: 13px; font-weight: 600; color: #1c1a18; line-height: 1.3; }
    .ep-sublayer{ font-size: 11px; color: #999; margin-top: 2px; }
    .ep-close   { background: none; border: none; cursor: pointer; font-size: 18px; color: #bbb; line-height: 1; padding: 0; flex-shrink: 0; transition: color .1s; }
    .ep-close:hover { color: #444; }

    .ep-scroll { overflow-y: auto; }
    .ep-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
    .ep-pick { padding: 8px 14px 10px; border-bottom: 1px solid rgba(0,0,0,.06); flex-shrink: 0; }
    .ep-pick summary { cursor: pointer; font-size: 11px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: .06em; }
    .ep-pick-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
    .ep-pick-item {
      text-align: left;
      padding: 7px 10px;
      border-radius: 8px;
      border: 1px solid rgba(0,0,0,.08);
      background: #fff;
      cursor: pointer;
      font-size: 12px;
      color: #222;
    }
    .ep-pick-item small { display:block; opacity:.65; font-size:11px; margin-top:2px; }
    .ep-pick-item.active { outline: 2px solid rgba(37,99,235,.35); border-color: rgba(37,99,235,.35); }

    /* section title inside body */
    .ep-section {
      font-size: 10px; font-weight: 700; color: #aaa;
      text-transform: uppercase; letter-spacing: .06em;
      padding-bottom: 6px; border-bottom: 1px solid #f0ede8;
      margin-bottom: -2px;
    }
    .ep-group { display: flex; flex-direction: column; gap: 10px; }

    .ep-field > label { display: block; font-size: 11px; font-weight: 600; color: #888; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .05em; }

    .ep-visible-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .ep-visible-row span { font-size: 12px; color: #555; font-weight: 500; }
    .ep-switch {
      position: relative; width: 38px; height: 21px; border-radius: 20px; border: none;
      background: #d8d4ce; cursor: pointer; padding: 0; flex-shrink: 0; transition: background .12s;
    }
    .ep-switch::after {
      content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
      border-radius: 50%; background: #fff; transition: transform .12s;
      box-shadow: 0 1px 3px rgba(0,0,0,.22);
    }
    .ep-switch.on { background: #2563eb; }
    .ep-switch.on::after { transform: translateX(17px); }

    .ep-color-row { display: flex; align-items: center; gap: 8px; }
    .ep-color-input {
      -webkit-appearance: none; appearance: none;
      width: 38px; height: 30px; border: 1px solid rgba(0,0,0,.14);
      border-radius: 6px; cursor: pointer; padding: 2px; background: none; flex-shrink: 0;
    }
    .ep-color-input::-webkit-color-swatch-wrapper { padding: 0; }
    .ep-color-input::-webkit-color-swatch { border-radius: 4px; border: none; }
    .ep-color-hex { font-size: 12px; font-family: monospace; color: #555; background: #f3f2ef; border: 1px solid rgba(0,0,0,.09); border-radius: 5px; padding: 4px 8px; flex: 1; }

    .ep-slider-row { display: flex; align-items: center; gap: 8px; }
    .ep-slider-row input[type=range] { flex: 1; min-width: 0; accent-color: #2563eb; }
    .ep-slider-row .val { font-size: 12px; color: #555; min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }

    /* Édition d'un bâtiment précis */
    .ep-bld-id {
      font-family: monospace; font-size: 11px; color: #888;
      background: #f3f2ef; border: 1px solid rgba(0,0,0,.08);
      border-radius: 6px; padding: 4px 8px;
    }
    .ep-bld-input {
      width: 100%; padding: 6px 8px; font-size: 12px;
      border: 1px solid rgba(0,0,0,.12); border-radius: 7px; outline: none; background: #fbfaf8;
    }
    .ep-bld-input:focus { border-color: #2563eb; background: #fff; }
    .ep-bld-hint { font-size: 10px; color: #bbb; line-height: 1.45; }
    .ep-bld-hint.warn { color: #b45309; }
    .ep-bld-hint.ok { color: #15803d; }

    /* Sélecteur de catégories POI */
    .ep-poi-tools { display: flex; gap: 6px; align-items: center; }
    #ep-poi-search {
      flex: 1; min-width: 0; padding: 5px 8px; font-size: 12px;
      border: 1px solid rgba(0,0,0,.12); border-radius: 7px; outline: none; background: #fbfaf8;
    }
    #ep-poi-search:focus { border-color: #2563eb; background: #fff; }
    .ep-poi-btn {
      flex-shrink: 0; padding: 5px 9px; font-size: 11px; font-weight: 600; color: #777;
      border: 1px solid rgba(0,0,0,.10); border-radius: 7px; background: #fff; cursor: pointer;
    }
    .ep-poi-btn:hover { color: #2563eb; border-color: rgba(37,99,235,.4); }
    .ep-poi-list {
      max-height: 240px; overflow-y: auto; border: 1px solid rgba(0,0,0,.08);
      border-radius: 8px; padding: 4px; background: #fdfcfa;
    }
    .ep-poi-theme + .ep-poi-theme { margin-top: 3px; }
    .ep-poi-theme-head {
      display: flex; align-items: center; gap: 6px; width: 100%;
      padding: 4px 5px; background: none; border: none; cursor: pointer;
      font-size: 10px; font-weight: 700; color: #999;
      text-transform: uppercase; letter-spacing: .05em; text-align: left;
    }
    .ep-poi-theme-head:hover { color: #555; }
    .ep-poi-theme-count { margin-left: auto; color: #c4c0ba; font-variant-numeric: tabular-nums; }
    .ep-poi-item {
      display: flex; align-items: center; gap: 7px;
      padding: 3px 5px 3px 16px; border-radius: 6px; cursor: pointer; font-size: 12px; color: #33302b;
    }
    .ep-poi-item:hover { background: #f1efeb; }
    .ep-poi-item input { accent-color: #2563eb; cursor: pointer; flex-shrink: 0; margin: 0; }
    .ep-poi-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ep-poi-item em { font-style: normal; color: #bbb; font-size: 11px; font-variant-numeric: tabular-nums; }
    .ep-poi-hint { font-size: 10px; color: #bbb; line-height: 1.4; }
    .ep-poi-empty { padding: 14px 8px; text-align: center; font-size: 11px; color: #bbb; }

    .ep-select {
      width: 100%; padding: 6px 8px; font-size: 12px; color: #333;
      border: 1px solid rgba(0,0,0,.12); border-radius: 7px; background: #fbfaf8; cursor: pointer;
    }

    .ep-zoom-row { display: flex; flex-direction: column; gap: 5px; }
    .ep-zoom-line { display: flex; align-items: center; gap: 8px; }
    .ep-zoom-line .lbl { font-size: 11px; color: #aaa; min-width: 24px; }
    .ep-zoom-line input[type=range] { flex: 1; min-width: 0; accent-color: #2563eb; }
    .ep-zoom-line .val { font-size: 12px; font-family: monospace; color: #555; min-width: 20px; text-align: right; }
    .ep-zoom-hint { font-size: 10px; color: #bbb; margin-top: 2px; }

    .ep-actions { display: flex; gap: 8px; }
    .ep-btn { flex: 1; padding: 7px 0; border-radius: 7px; border: none; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .1s; }
    .ep-btn.reset { background: #f0ede8; color: #777; }
    .ep-btn.reset:hover { background: #e4e0db; }
    .ep-btn.reset:disabled { opacity: .45; cursor: default; }
    .ep-btn.apply { background: #2563eb; color: #fff; }
    .ep-btn.apply:hover { background: #1d4ed8; }

    /* ── Config bar ───────────────────────────────────────────────────────── */
    #config-bar {
      position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
      z-index: 10; display: flex; align-items: center; gap: 5px;
      padding: 5px 8px; max-width: calc(100vw - 24px); overflow-x: auto;
    }
    #config-bar .cfg-label { font-size: 11px; font-weight: 600; color: #aaa; padding: 0 4px; white-space: nowrap; text-transform: uppercase; letter-spacing: .05em; }
    #config-bar .cfg-sep { width: 1px; height: 18px; background: rgba(0,0,0,.09); flex-shrink: 0; margin: 0 3px; }
    /* .cfg-tab est en display:flex (block-level) : sans ça les profils s'empilent */
    #cfg-tabs { display: flex; align-items: center; gap: 5px; }
    .cfg-tab {
      display: flex; align-items: center; gap: 5px;
      padding: 5px 11px; border-radius: 20px; border: none;
      cursor: pointer; font-size: 12px; font-weight: 500; white-space: nowrap;
      background: transparent; color: #666; transition: background .1s, color .1s;
    }
    .cfg-tab:hover { background: #f0ede8; }
    .cfg-tab.active { background: #2563eb; color: #fff; font-weight: 600; }
    .cfg-tab.modified::after { content: '●'; font-size: 8px; margin-left: 2px; vertical-align: super; }
    .cfg-tab .cfg-del {
      display: none; align-items: center; justify-content: center;
      width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.25);
      font-size: 10px; line-height: 1; margin-left: 2px; margin-right: -4px; cursor: pointer;
    }
    .cfg-tab:hover .cfg-del,
    .cfg-tab.active .cfg-del { display: flex; }
    .cfg-tab .cfg-del:hover { background: rgba(255,255,255,.5); }
    #layers-btn { display: flex; align-items: center; gap: 6px; }
    #layers-btn svg { width: 14px; height: 14px; }
    #cfg-add {
      padding: 5px 10px; border-radius: 20px; border: 1px dashed #ccc;
      background: transparent; color: #888; font-size: 12px; cursor: pointer;
      white-space: nowrap; transition: border-color .1s, color .1s;
    }
    #cfg-add:hover { border-color: #2563eb; color: #2563eb; }
    #cfg-save {
      padding: 5px 12px; border-radius: 20px; border: none;
      background: #16a34a; color: #fff; font-size: 12px; font-weight: 600;
      cursor: pointer; white-space: nowrap; transition: background .1s;
    }
    #cfg-save:hover { background: #15803d; }
    #cfg-save.hidden { display: none; }

    /* Inline name input in config bar */
    #cfg-name-input-wrap { display: none; align-items: center; gap: 5px; }
    #cfg-name-input-wrap.visible { display: flex; }
    #cfg-name-input { padding: 4px 9px; border-radius: 20px; border: 1px solid #2563eb; font-size: 12px; outline: none; width: 150px; }
    #cfg-name-confirm { padding: 4px 10px; border-radius: 20px; border: none; background: #2563eb; color: #fff; font-size: 12px; cursor: pointer; }
    #cfg-name-cancel  { padding: 4px 8px; border-radius: 20px; border: none; background: #f0ede8; color: #666; font-size: 12px; cursor: pointer; }

    /* Auth modal */
    #auth-backdrop {
      position: fixed; inset: 0;
      background: rgba(0,0,0,.08);
      z-index: 9998;
      pointer-events: auto;
    }
    #auth-modal {
      position: fixed;
      right: 12px;
      bottom: 78px;
      z-index: 9999;
      width: 270px;
      padding: 12px 14px;
      pointer-events: auto;
    }

    /* Écrans étroits : les deux panneaux ne cohabitent pas */
    @media (max-width: 760px) {
      #layers-panel { width: auto; left: 12px; right: 12px; max-height: 62vh; }
      body.layers-open #edit-panel { right: 12px; }
      #edit-panel { width: auto; left: 12px; right: 12px; }
      #hud { display: none; }
    }

#open-editor { position:absolute; bottom:32px; left:12px; z-index:3; padding:10px 16px; cursor:pointer; }