/* ── Toolbar ── */
    .toolbar {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        margin: 0 0 32px;
        padding: 12px;
        font-family: 'RedHatDisplay', system-ui, sans-serif;
    }

    .toolbar input,
    .toolbar select,
    .toolbar button,
    .filter-popup,
    .filter-popup select,
    .filter-popup button { font-family: 'RedHatDisplay', system-ui, sans-serif; }

    .search-bar {
        display: flex;
        align-items: center;
        background: rgba(0,0,0,.28);
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 12px;
        padding: 0 14px;
        gap: 10px;
        transition: border-color .2s;
        flex: 1;
        min-width: 200px;
        max-width: 380px;
    }

    .search-bar:focus-within {
        border-color: #e5a100;
        box-shadow: 0 0 0 3px rgba(229,161,0,.12);
    }

    .search-icon { font-size: 16px; color: #555; flex-shrink: 0; }

    .search-bar input {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        padding: 13px 0;
        color: #fff;
        font-size: 15px;
    }

    .search-bar input::placeholder { color: #444; }

    .search-clear {
        background: none;
        border: none;
        color: #444;
        font-size: 14px;
        cursor: pointer;
        padding: 4px;
        transition: color .2s;
        display: none;
    }

    .search-clear:hover { color: #f87171; }

    .sort-wrap select {
        background-color: rgba(0,0,0,.28);
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 12px;
        padding: 12px 36px 12px 16px;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        outline: none;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
        transition: border-color .2s;
    }

    .sort-wrap select:focus,
    .sort-wrap select:hover { border-color: #e5a100; }
    .sort-wrap select option { background: #1a1a2e; }

    .btn-filter {
        display: flex;
        align-items: center;
        gap: 6px;
        background: rgba(0,0,0,.28);
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 12px;
        padding: 12px 18px;
        color: #ccc;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: border-color .2s, color .2s;
        position: relative;
    }

    .btn-filter:hover, .btn-filter.active {
        border-color: #e5a100;
        color: #e5a100;
    }

    .filter-badge {
        background: #e5a100;
        color: #000;
        font-size: 11px;
        font-weight: 700;
        border-radius: 999px;
        padding: 1px 6px;
        min-width: 18px;
        text-align: center;
    }

    .ability-chip {
        padding: 9px 14px;
        background: rgba(124,58,237,.25);
        border: 1px solid #a78bfa;
        border-radius: 999px;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        transition: border-color .2s, color .2s;
    }

    .ability-chip:hover { border-color: #f87171; color: #f87171; }

    /* Rappel de la description de la capacité filtrée */
    .ability-desc.snap-panel {
        display: flex;
        align-items: baseline;
        gap: 10px;
        margin: -18px 0 28px;
        padding: 12px 16px;
        border-left: 3px solid #a78bfa;
        font-family: 'RedHatDisplay', system-ui, sans-serif;
        font-size: 14px;
        line-height: 1.5;
        color: #c4bde0;
    }

    .ability-desc[hidden] { display: none; }
    .ability-desc strong  { color: #fff; white-space: nowrap; }

    .search-count {
        font-size: 13px;
        color: #a49cc4;
        margin: 0;
        white-space: nowrap;
    }

    /* ── Overlay + Popup ── */
    .filter-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.55);
        z-index: 200;
        backdrop-filter: blur(2px);
    }

    .filter-overlay.open { display: block; }

    .filter-popup {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(.96);
        z-index: 201;
        background: #1c1736;
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 18px;
        padding: 0;
        width: 420px;
        max-width: calc(100vw - 32px);
        box-shadow: 0 24px 60px rgba(0,0,0,.6);
        opacity: 0;
        transition: opacity .18s, transform .18s;
    }

    .filter-popup.open {
        display: block;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    .filter-popup-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 24px 16px;
        border-bottom: 1px solid #2e2e4d;
        font-size: 15px;
        font-weight: 700;
        color: #fff;
    }

    .filter-close {
        background: none;
        border: none;
        color: #555;
        font-size: 16px;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 6px;
        transition: color .2s, background .2s;
    }

    .filter-close:hover { color: #f87171; background: rgba(248,113,113,.1); }

    .filter-section {
        padding: 16px 24px;
        border-bottom: 1px solid #1e1e3a;
    }

    .filter-label {
        margin: 0 0 10px;
        font-size: 11px;
        font-weight: 700;
        color: #666;
        text-transform: uppercase;
        letter-spacing: .6px;
    }

    /* Cost buttons */
    .cost-btns {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .cost-btn {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        border: 1px solid #333;
        background: #0f0f1a;
        color: #aaa;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: all .15s;
        flex-shrink: 0;
    }

    .cost-btn:hover { border-color: #e5a100; color: #e5a100; }

    .cost-btn.active {
        background: #e5a100;
        border-color: #e5a100;
        color: #000;
    }

    /* Dropdowns inside popup */
    .filter-section select {
        width: 100%;
        background: #0f0f1a;
        border: 1px solid #333;
        border-radius: 8px;
        padding: 10px 36px 10px 14px;
        color: #fff;
        font-size: 14px;
        outline: none;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
        transition: border-color .2s;
        box-sizing: border-box;
    }

    .filter-section select:focus { border-color: #e5a100; }
    .filter-section select option { background: #1a1a2e; }

    /* Toggle switch */
    .toggle-switch {
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
    }

    .toggle-switch input { display: none; }

    .toggle-slider {
        position: relative;
        width: 44px;
        height: 24px;
        background: #333;
        border-radius: 999px;
        flex-shrink: 0;
        transition: background .2s;
    }

    .toggle-slider::after {
        content: '';
        position: absolute;
        width: 18px;
        height: 18px;
        background: #fff;
        border-radius: 50%;
        top: 3px;
        left: 3px;
        transition: transform .2s;
    }

    .toggle-switch input:checked ~ .toggle-slider { background: #e5a100; }
    .toggle-switch input:checked ~ .toggle-slider::after { transform: translateX(20px); }

    .toggle-text { color: #ccc; font-size: 14px; }

    /* Footer */
    .filter-popup-footer {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        padding: 16px 24px;
    }

    .btn-filter-reset {
        background: transparent;
        border: 1px solid #333;
        border-radius: 8px;
        padding: 10px 18px;
        color: #888;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: border-color .2s, color .2s;
    }

    .btn-filter-reset:hover { border-color: #f87171; color: #f87171; }

    .btn-filter-apply {
        background: #e5a100;
        border: none;
        border-radius: 8px;
        padding: 10px 22px;
        color: #000;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        transition: background .2s;
        text-transform: uppercase;
        letter-spacing: .4px;
    }

    .btn-filter-apply:hover { background: #ffc107; }

    .search-empty {
        text-align: center;
        padding: 60px 20px;
        color: #6d6690;
        font-family: 'RedHatDisplay', system-ui, sans-serif;
    }

    .search-empty span { font-size: 48px; opacity: .3; display: block; margin-bottom: 12px; }
    .search-empty p { font-size: 16px; }