/* ── Filtres ─────────────────────────────────────────────────────────── */
    .filter-btn {
        border: 2px solid var(--soft-pink);
        background: var(--warm-white); color: var(--text-dark);
        padding: 0.35rem 0.9rem; border-radius: 20px;
        cursor: pointer; font-size: .875rem; font-weight: 500;
        transition: all .2s;
    }
    .filter-btn.active, .filter-btn:hover {
        border-color: var(--primary-rose);
        background: var(--soft-pink); color: var(--deep-rose);
    }

    /* ── Arbre ───────────────────────────────────────────────────────────── */
    .gear-tree { font-family: 'Inter', sans-serif; }

    .tree-category {
        margin-bottom: 0.25rem;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid var(--soft-pink);
    }

    .tree-cat-header {
        display: flex; align-items: center; gap: 0.75rem;
        padding: 0.875rem 1.1rem; cursor: pointer;
        background: var(--soft-pink); user-select: none;
        transition: background .15s;
    }
    .tree-cat-header:hover { filter: brightness(1.05); }

    .tree-cat-icon { font-size: 1.1rem; }
    .tree-cat-name { font-weight: 600; flex: 1; color: var(--deep-rose); }
    .tree-cat-count { font-size: .75rem; color: var(--text-medium); margin-right:.25rem; }
    .tree-cat-arrow { color: var(--text-medium); transition: transform .2s; font-size:.8rem; }
    .tree-category.open .tree-cat-arrow { transform: rotate(90deg); }

    .tree-items { display: none; padding: 0.25rem 0; background: var(--warm-white); }
    .tree-category.open .tree-items { display: block; }

    /* Ligne item */
    .tree-item {
        display: flex; align-items: flex-start; gap: 0;
        padding: 0 0 0 1.1rem; cursor: pointer;
        transition: background .12s;
    }
    .tree-item:hover > .tree-item-main { background: var(--soft-pink); }

    .tree-item-main {
        flex: 1; display: flex; align-items: center; gap: 0.6rem;
        padding: 0.6rem 1rem 0.6rem 0.4rem; border-radius: 0 8px 8px 0;
        min-width: 0; transition: background .12s;
    }

    .tree-status {
        width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
    }
    .tree-status.active { background: #28a745; }
    .tree-status.idle   { background: #ffc107; }
    .tree-status.broken { background: #dc3545; }

    .tree-item-info { flex: 1; min-width: 0; }
    .tree-item-name {
        display: flex; align-items: center; gap: 0.4rem;
        font-weight: 500; font-size: .9rem; color: var(--text-dark);
    }
    .item-name-text {
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* Badge logo de marque : cercle clair fixe pour rester lisible
       quel que soit le thème (le logo garde sa couleur de marque) */
    .brand-badge {
        width: 18px; height: 18px; flex-shrink: 0;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
        display: flex; align-items: center; justify-content: center;
        padding: 3px;
    }
    .brand-badge img { width: 100%; height: 100%; object-fit: contain; display: block; }

    .tree-item-summary { font-size: .8rem; color: var(--text-medium); margin-top: 1px; }

    .tree-item-arrow { color: var(--text-medium); font-size:.7rem; flex-shrink:0; transition: transform .2s; }
    .tree-item.open .tree-item-arrow { transform: rotate(90deg); }

    /* Specs */
    .tree-specs {
        display: none;
        padding: 0.5rem 1rem 0.75rem calc(1.1rem + 24px + 0.4rem);
        background: var(--warm-white);
        border-top: 1px solid var(--soft-pink);
    }
    .tree-item.open + .tree-specs { display: block; }

    .spec-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
    .spec-table tr:not(:last-child) td { border-bottom: 1px solid var(--soft-pink); }
    .spec-table td { padding: .35rem .5rem; color: var(--text-dark); }
    .spec-table td:first-child { color: var(--text-medium); width: 35%; font-size:.8rem; }
    .spec-table td:last-child { font-weight: 500; }

    .spec-notes {
        font-size:.82rem; color: var(--text-medium); font-style: italic;
        margin-top: .5rem; padding-left: .75rem;
        border-left: 2px solid var(--primary-rose);
    }

    /* Statut badge inline */
    .status-badge {
        font-size: .7rem; padding: .15rem .5rem; border-radius: 10px;
        font-weight: 600; flex-shrink: 0; white-space: nowrap;
    }
    .status-badge.active { background:#d4edda; color:#155724; }
    .status-badge.idle   { background:#fff3cd; color:#856404; }
    .status-badge.broken { background:#f8d7da; color:#721c24; }

    [data-theme="dark"] .status-badge.active { background:#1a3a22; color:#6fcf97; }
    [data-theme="dark"] .status-badge.idle   { background:#3a2e00; color:#f2c94c; }
    [data-theme="dark"] .status-badge.broken { background:#3a1a1a; color:#eb5757; }