/* =========================================================
   PANEL
========================================================= */

.filters-panel {
    width: 340px;
    height: 100vh;

    background: #fff;

    border-right: 1px solid #ddd;

    display: flex;
    flex-direction: column;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    color: #222;

    box-sizing: border-box;

    overflow: hidden;
}


.filters-panel *,
.filters-panel *::before,
.filters-panel *::after {
    box-sizing: border-box;
}


/* =========================================================
   HEADER
========================================================= */

.filters-header {

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px 20px;

    border-bottom: 1px solid #e5e5e5;
}


.filters-title h2 {

    margin: 0;

    font-size: 20px;
    font-weight: 600;
}


.filters-reset {

    border: 0;

    background: transparent;

    color: #666;

    font-size: 13px;

    cursor: pointer;

    padding: 5px 0;
}


.filters-reset:hover {
    color: #111;
    text-decoration: underline;
}


/* =========================================================
   FILTRES ACTIFS
========================================================= */

.active-filters {

    flex-shrink: 0;

    padding: 12px 16px;

    border-bottom: 1px solid #e5e5e5;
}


.active-filters:empty {
    display: none;
}


.active-filters-title {

    margin-bottom: 8px;

    font-size: 12px;

    font-weight: 600;

    color: #777;

    text-transform: uppercase;

    letter-spacing: .04em;
}


.filter-chips {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;
}


.filter-chip {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    max-width: 100%;

    padding: 5px 8px;

    border-radius: 5px;

    background: #f1f1f1;

    font-size: 12px;

    line-height: 1.2;
}


.filter-chip span {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.filter-chip button {

    width: 17px;
    height: 17px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #666;

    font-size: 16px;

    line-height: 15px;

    cursor: pointer;
}


.filter-chip button:hover {
    color: #111;
}


/* =========================================================
   CONTENEUR
========================================================= */

.filters-container {

    flex: 1;

    overflow-y: auto;

    scrollbar-width: thin;
}


/* =========================================================
   GROUPES
========================================================= */

.filter-group {

    border-bottom: 1px solid #e5e5e5;
}


.filter-group-header {

    width: 100%;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 15px 18px;

    border: 0;

    background: #fff;

    cursor: pointer;

    text-align: left;
}


.filter-group-header:hover {
    background: #fafafa;
}


.filter-group-title {

    display: flex;

    align-items: center;

    gap: 7px;

    font-size: 15px;

    font-weight: 600;
}


.filter-selected-count {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 20px;
    height: 20px;

    padding: 0 5px;

    border-radius: 10px;

    background: #eee;

    color: #777;

    font-size: 11px;

    font-weight: 500;
}


.filter-group.is-selected
.filter-selected-count {

    background: #222;

    color: #fff;
}


/* =========================================================
   FLÈCHE
========================================================= */

.filter-group-arrow {

    width: 18px;
    height: 18px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.filter-group-arrow span {

    width: 7px;
    height: 7px;

    border-right: 1.5px solid #555;
    border-bottom: 1.5px solid #555;

    transform: rotate(45deg);

    transition:
        transform .2s ease;
}


.filter-group.is-open
.filter-group-arrow span {

    transform: rotate(225deg);

    margin-top: 5px;
}


/* =========================================================
   CONTENU GROUPE
========================================================= */

.filter-group-content {

    display: none;

    padding: 0 18px 18px;
}


.filter-group.is-open
.filter-group-content {

    display: block;
}


/* =========================================================
   INPUT TEXTE
========================================================= */

.text-filter-input-wrapper {

    display: flex;

    gap: 6px;
}


.text-filter-input {

    flex: 1;

    min-width: 0;

    height: 38px;

    padding: 0 11px;

    border: 1px solid #d5d5d5;

    border-radius: 5px;

    outline: none;

    font-size: 13px;
}


.text-filter-input:focus {

    border-color: #999;

    box-shadow:
        0 0 0 2px rgba(0,0,0,.05);
}


.text-filter-add {

    width: 38px;
    height: 38px;

    border: 1px solid #ccc;

    border-radius: 5px;

    background: #f5f5f5;

    color: #222;

    font-size: 22px;

    line-height: 1;

    cursor: pointer;
}


.text-filter-add:hover {
    background: #e9e9e9;
}


/* =========================================================
   TAGS TEXTES
========================================================= */

.text-filter-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 10px;
}


.text-filter-tag {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 5px 8px;

    border-radius: 5px;

    background: #f1f1f1;

    font-size: 12px;
}


.text-filter-tag button {

    padding: 0;

    border: 0;

    background: transparent;

    color: #666;

    cursor: pointer;

    font-size: 16px;

    line-height: 13px;
}


.text-filter-tag button:hover {
    color: #111;
}


/* =========================================================
   RECHERCHE INTERNE
========================================================= */

.filter-search-wrapper {

    position: relative;

    margin-bottom: 10px;
}


.filter-inner-search {

    width: 100%;

    height: 36px;

    padding: 0 10px 0 32px;

    border: 1px solid #d5d5d5;

    border-radius: 5px;

    outline: none;

    font-size: 13px;
}


.filter-inner-search:focus {

    border-color: #999;
}


.filter-search-icon {

    position: absolute;

    left: 10px;
    top: 50%;

    transform: translateY(-50%);

    color: #888;

    font-size: 17px;

    pointer-events: none;
}


/* =========================================================
   LISTE CHECKBOX
========================================================= */

.filter-options {

    max-height: 240px;

    overflow-y: auto;

    scrollbar-width: thin;
}


.filter-option {

    display: flex;

    align-items: center;

    gap: 9px;

    min-height: 34px;

    padding: 5px 2px;

    cursor: pointer;

    font-size: 13px;

    color: #333;
}


.filter-option:hover {

    color: #000;
}


.filter-option input {

    position: absolute;

    opacity: 0;

    pointer-events: none;
}


/* =========================================================
   CHECKBOX PERSONNALISÉE
========================================================= */

.custom-checkbox {

    flex: 0 0 auto;

    width: 17px;
    height: 17px;

    border: 1px solid #bdbdbd;

    border-radius: 3px;

    background: #fff;

    position: relative;

    transition:
        background .15s ease,
        border-color .15s ease;
}


.filter-option input:checked
+ .custom-checkbox {

    background: #222;

    border-color: #222;
}


.filter-option input:checked
+ .custom-checkbox::after {

    content: "";

    position: absolute;

    left: 4px;
    top: 1px;

    width: 6px;
    height: 10px;

    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;

    transform: rotate(45deg);
}


.filter-option-label {

    line-height: 1.3;
}


/* =========================================================
   THÉMATIQUES
========================================================= */

.thematics-tree {

    display: flex;

    flex-direction: column;

    gap: 2px;
}


.thematic-node {

    position: relative;
}


.thematic-option {

    min-height: 36px;
}


/*
 * Indentation des enfants
 */

.thematic-children {

    margin-left: 24px;

    padding-left: 13px;

    border-left: 1px solid #ddd;
}


/*
 * Chaque niveau supplémentaire
 */

.thematic-children
.thematic-children {

    margin-left: 18px;
}


/*
 * Lignes des niveaux enfants
 */

.thematic-children
.thematic-option {

    font-size: 13px;
}


/* =========================================================
   RÉSULTATS
========================================================= */

.filters-results {

    flex-shrink: 0;

    display: flex;

    align-items: baseline;

    gap: 5px;

    padding: 14px 18px;

    border-top: 1px solid #ddd;

    background: #fafafa;

    font-size: 13px;

    color: #666;
}


.filters-results strong {

    font-size: 16px;

    color: #222;
}


/* =========================================================
   ERREUR
========================================================= */

.filters-error {

    padding: 30px 20px;

    color: #b00020;

    font-size: 14px;
}


/* =========================================================
   ÉTAT HIDDEN
========================================================= */

.filter-option[hidden] {
    display: none;
}


/* =========================================================
   SCROLLBARS
========================================================= */

.filters-panel ::-webkit-scrollbar {

    width: 6px;
}


.filters-panel ::-webkit-scrollbar-track {

    background: transparent;
}


.filters-panel ::-webkit-scrollbar-thumb {

    background: #ccc;

    border-radius: 10px;
}


.filters-panel ::-webkit-scrollbar-thumb:hover {

    background: #aaa;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .filters-panel {

        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;

        height: 85vh;

        z-index: 9999;

        border-right: 0;

        border-top: 1px solid #ddd;

        border-radius: 14px 14px 0 0;

        transform:
            translateY(100%);

        transition:
            transform .25s ease;
    }


    .filters-panel.is-visible {

        transform:
            translateY(0);
    }


    .filters-header {

        padding: 15px 18px;
    }


    .filters-container {

        padding-bottom: 10px;
    }


    .filter-options {

        max-height: 200px;
    }

}