html, body { height: 100%; overflow: hidden; }

    :root { --nav-h: 60px; --filter-h: 52px; }

    /* ─── FILTER BAR ──────────────────────────────────────── */
    .filter-bar {
      position: sticky; top: var(--nav-h); z-index: 200;
      height: var(--filter-h);
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--gray-100);
      display: flex; align-items: center;
    }

    .filter-bar-inner {
      width: 100%; padding: 0 20px;
      display: flex; align-items: center; gap: 8px;
      overflow-x: auto;
    }

    .filter-select {
      height: 32px; padding: 0 28px 0 11px;
      border: 1px solid var(--gray-100); border-radius: 7px;
      background: var(--white); font-family: 'Poppins', sans-serif;
      font-size: 12px; font-weight: 500; color: var(--black);
      cursor: pointer; outline: none; transition: border-color 180ms;
      appearance: none; flex-shrink: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath fill='%239A9A9A' d='M4.5 5L0 0h9z'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 9px center;
      letter-spacing: -0.01em;
    }

    .filter-select:hover { border-color: var(--gray-300); }

    .filter-sep { width: 1px; height: 18px; background: var(--gray-100); margin: 0 2px; flex-shrink: 0; }

    .filter-count {
      margin-left: auto; font-size: 12px; color: var(--gray-400);
      letter-spacing: -0.01em; white-space: nowrap; flex-shrink: 0;
    }

    .filter-count strong { color: var(--black); font-weight: 600; }

    /* ─── MAP WRAPPER ─────────────────────────────────────── */
    .map-wrapper {
      display: flex;
      height: calc(100vh - var(--nav-h) - var(--filter-h));
    }

    /* ─── SIDEBAR ─────────────────────────────────────────── */
    .sidebar {
      width: 340px;
      flex-shrink: 0;
      height: 100%;
      overflow-y: auto;
      background: var(--white);
      border-right: 1px solid var(--gray-100);
      display: flex;
      flex-direction: column;
    }

    .sidebar::-webkit-scrollbar { width: 0; }

    .sidebar-top {
      padding: 20px;
      border-bottom: 1px solid var(--gray-100);
      flex-shrink: 0;
    }

    .sidebar-search {
      display: flex;
      align-items: center;
      gap: 8px;
      height: 40px;
      border: 1px solid var(--gray-100);
      border-radius: 9px;
      padding: 0 13px;
      margin-bottom: 14px;
      transition: border-color 180ms;
      background: var(--gray-50);
    }

    .sidebar-search:focus-within {
      border-color: var(--black);
      background: var(--white);
    }

    .sidebar-search input {
      flex: 1;
      border: none;
      outline: none;
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      color: var(--black);
      background: transparent;
      letter-spacing: -0.01em;
    }

    .sidebar-search input::placeholder { color: var(--gray-300); }

    .search-icon { font-size: 14px; color: var(--gray-300); }

    .sidebar-count {
      padding: 14px 20px 10px;
      font-size: 11px;
      color: var(--gray-400);
      flex-shrink: 0;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    /* ─── RESULTS ─────────────────────────────────────────── */
    .results-list { flex: 1; overflow-y: auto; }
    .results-list::-webkit-scrollbar { width: 3px; }
    .results-list::-webkit-scrollbar-thumb { background: var(--gray-100); border-radius: 2px; }

    .result-item {
      display: flex;
      align-items: center;
      padding: 16px 20px;
      border-bottom: 1px solid var(--gray-100);
      cursor: pointer;
      transition: background 180ms;
      text-decoration: none;
    }

    .result-item:hover { background: var(--gray-50); }

    .result-item.active {
      background: var(--gray-50);
      border-left: 2px solid var(--black);
      padding-left: 18px;
    }

    .result-info { flex: 1; }

    .result-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--black);
      margin-bottom: 3px;
      letter-spacing: -0.02em;
    }

    .result-date {
      font-size: 11px;
      color: var(--gray-400);
      margin-bottom: 1px;
      letter-spacing: -0.01em;
    }

    .result-distance {
      font-size: 11px;
      color: var(--gray-500);
      font-weight: 500;
      letter-spacing: -0.01em;
    }

    .result-arrow {
      font-size: 12px;
      color: var(--gray-300);
      flex-shrink: 0;
    }

    /* ─── MAP ─────────────────────────────────────────────── */
    #map { flex: 1; height: 100%; }

    /* Leaflet popup overrides */
    .leaflet-popup-content-wrapper {
      border-radius: 12px !important;
      box-shadow: 0 8px 40px rgba(0,0,0,0.12) !important;
      padding: 0 !important;
      overflow: hidden;
      border: 1px solid var(--gray-100) !important;
    }

    .leaflet-popup-content { margin: 0 !important; width: auto !important; }
    .leaflet-popup-tip-container { display: none; }

    .custom-popup {
      padding: 18px 20px;
      min-width: 220px;
      font-family: 'Poppins', sans-serif;
    }

    .popup-eyebrow {
      font-size: 10px;
      font-weight: 500;
      color: var(--gray-400);
      letter-spacing: 0.07em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .popup-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--black);
      margin-bottom: 4px;
      letter-spacing: -0.02em;
    }

    .popup-meta {
      font-size: 12px;
      color: var(--gray-400);
      margin-bottom: 3px;
      letter-spacing: -0.01em;
    }

    .popup-exposants {
      font-size: 12px;
      color: var(--gray-500);
      margin-bottom: 14px;
    }

    .popup-btn {
      display: block;
      text-align: center;
      background: #E8572A;
      color: #ffffff !important;
      font-family: 'Poppins', sans-serif;
      font-size: 12px;
      font-weight: 600;
      text-decoration: none !important;
      padding: 9px 0;
      border-radius: 7px;
      transition: opacity 180ms;
      letter-spacing: -0.01em;
    }

    .popup-btn:hover { opacity: 0.8; }
    /* ─── RESPONSIVE ─────────────────────────────────────────── */
    @media (max-width: 768px) {
      .sidebar {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 45vh;
        z-index: 500;
        border-top: none;
        border-right: none;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 24px rgba(26,26,26,0.10);
        transition: height 80ms ease;
        overflow: hidden; /* scroll uniquement dans results-list */
      }
      .sidebar-top { padding: 14px 16px; flex-shrink: 0; }
      .results-list { padding: 0 16px 80px; overflow-y: auto; }
      #map { width: 100%; height: calc(55vh - 60px); transition: height 80ms ease; }
      .map-wrapper { flex-direction: column; height: calc(100vh - 60px - var(--filter-h, 56px)); }
    }

    @media (max-width: 480px) {
      .sidebar { height: 50vh; }
      #map { height: calc(50vh - 60px); }
      .filter-bar-inner { gap: 8px; }
      .filter-select { font-size: 12px; padding: 0 10px; }
    }

    .drag-handle {
      display: none;
    }

    @media (max-width: 768px) {
      .drag-handle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 10px 0 6px;
        cursor: grab;
        touch-action: none;
        flex-shrink: 0;
        border-radius: 16px 16px 0 0;
        background: var(--white);
      }
      .drag-handle-bar {
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--gray-200);
      }
    }