.searchandfilter {
    ul {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    ul>li>ul {
        flex-direction: row;
        >li {
            flex:1;
        }
    }

    input[type=submit] {
        padding: calc(0.667em + 2px) calc(1.333em + 2px);
        border-width: 1px;
        border-style: solid;
        border-color: var(--wp--preset--color--accent);
        border-radius: 3px;
        color: var(--wp--preset--color--base);
        background-color: var(--wp--preset--color--accent);
        transition: all .3s ease-in-out;
        cursor: pointer;

        &:hover {
            color: var(--wp--preset--color--accent);
            background-color: var(--wp--preset--color--base);
        }
    }

    /* ─── Case à cocher personnalisée ───────────── */
    .cat-item input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        width: 18px;
        height: 18px;
        min-width: 18px;
        border: 1px solid var(--wp--preset--color--border);
        border-radius: 4px;
        background-color: var(--wp--preset--color--base-1);
        cursor: pointer;
        transition: background-color 0.15s ease, border-color 0.15s ease;
        position: relative;
    }

    /* ─── Chaque item ────────────────────────────── */
    .cat-item {
        margin-bottom: 0.4rem;
    }

    .cat-item label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
    }

    /* ─── État coché ─────────────────────────────── */
    .cat-item input[type="checkbox"]:checked {
        background-color: var(--wp--preset--color--accent);
        border-color: var(--wp--preset--color--accent);
    }

    /* ─── Coche (✓) via pseudo-élément ──────────── */
    .cat-item input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        left: 4px;
        top: 1px;
        width: 6px;
        height: 10px;
        border: 2px solid #ffffff;
        border-top: none;
        border-left: none;
        transform: rotate(45deg);
    }

    /* ─── Focus (accessibilité) ──────────────────── */
    .cat-item input[type="checkbox"]:focus-visible {
        outline: 3px solid var(--wp--preset--color--accent);
        outline-offset: 2px;
    }
}