/* ============================================================
   VOD PORTFOLIO FILTERS — CSS
   ============================================================
   Design system : variables CSS pour faciliter la customisation
   via Elementor (pas de !important inutile).
   Responsive-first, accessible (focus visible, aria).
   ============================================================ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
    --vod-primary        : #e63946;     /* Couleur accent active */
    --vod-primary-hover  : #c1121f;
    --vod-text           : #2b2d42;
    --vod-text-muted     : #6c757d;
    --vod-bg             : #ffffff;
    --vod-bg-hover       : #f8f9fa;
    --vod-border         : #dee2e6;
    --vod-border-radius  : 6px;
    --vod-gap            : 0.5rem;
    --vod-transition     : 0.2s ease;
    --vod-font-size      : 0.875rem;   /* 14px */
    --vod-font-size-sm   : 0.75rem;    /* 12px */
}

/* ── Conteneur principal ────────────────────────────────────── */
.vod-filters {
    display        : flex;
    flex-wrap      : wrap;
    align-items    : center;
    gap            : 1rem 1.5rem;
    padding        : 1rem 1.25rem;
    background     : var(--vod-bg);
    border         : 1px solid var(--vod-border);
    border-radius  : var(--vod-border-radius);
    margin-bottom  : 2rem;
    position       : relative;
}

/* ── Groupe de filtres ──────────────────────────────────────── */
.vod-filters__group {
    display    : flex;
    align-items: center;
    flex-wrap  : wrap;
    gap        : var(--vod-gap);
}

.vod-filters__label {
    font-size    : var(--vod-font-size-sm);
    font-weight  : 600;
    color        : var(--vod-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right : 0.25rem;
    white-space  : nowrap;
}

/* ── Boutons catégories ─────────────────────────────────────── */
.vod-filters__buttons {
    display  : flex;
    flex-wrap: wrap;
    gap      : var(--vod-gap);
}

.vod-filter-btn {
    display        : inline-flex;
    align-items    : center;
    gap            : 0.25rem;
    padding        : 0.375rem 0.875rem;
    font-size      : var(--vod-font-size);
    font-weight    : 500;
    color          : var(--vod-text);
    background     : var(--vod-bg);
    border         : 1.5px solid var(--vod-border);
    border-radius  : 999px;       /* Pill shape */
    cursor         : pointer;
    transition     : color var(--vod-transition),
                     background var(--vod-transition),
                     border-color var(--vod-transition),
                     transform var(--vod-transition);
    user-select    : none;
    white-space    : nowrap;
    line-height    : 1.4;
}

.vod-filter-btn:hover {
    background    : var(--vod-bg-hover);
    border-color  : var(--vod-text-muted);
    transform     : translateY(-1px);
}

/* ── État actif ──────────────────────────────────────────────── */
.vod-filter-btn.is-active {
    color        : #fff;
    background   : var(--vod-primary);
    border-color : var(--vod-primary);
    font-weight  : 600;
}

.vod-filter-btn.is-active:hover {
    background   : var(--vod-primary-hover);
    border-color : var(--vod-primary-hover);
}

/* ── Compteur de posts dans le bouton ───────────────────────── */
.vod-filter-btn__count {
    font-size    : var(--vod-font-size-sm);
    opacity      : 0.7;
    font-weight  : 400;
}

/* ── Focus accessible ────────────────────────────────────────── */
.vod-filter-btn:focus-visible {
    outline        : 2px solid var(--vod-primary);
    outline-offset : 2px;
}

/* ── Checkboxes tone ─────────────────────────────────────────── */
.vod-filters__checkboxes {
    display  : flex;
    flex-wrap: wrap;
    gap      : var(--vod-gap);
}

.vod-filter-checkbox {
    display    : inline-flex;
    align-items: center;
    gap        : 0.375rem;
    padding    : 0.375rem 0.75rem;
    font-size  : var(--vod-font-size);
    color      : var(--vod-text);
    background : var(--vod-bg);
    border     : 1.5px solid var(--vod-border);
    border-radius: var(--vod-border-radius);
    cursor     : pointer;
    transition : color var(--vod-transition),
                 background var(--vod-transition),
                 border-color var(--vod-transition);
    user-select: none;
}

.vod-filter-checkbox:hover {
    background   : var(--vod-bg-hover);
    border-color : var(--vod-text-muted);
}

.vod-filter-checkbox.is-checked {
    color        : var(--vod-primary);
    border-color : var(--vod-primary);
    background   : color-mix(in srgb, var(--vod-primary) 8%, white);
    font-weight  : 600;
}

/* Cache le checkbox natif, remplacé visuellement */
.vod-filter-checkbox__input {
    position : absolute;
    opacity  : 0;
    width    : 0;
    height   : 0;
}

/* Carré visuel pour la checkbox */
.vod-filter-checkbox__checkmark {
    display        : inline-block;
    width          : 14px;
    height         : 14px;
    border         : 1.5px solid var(--vod-border);
    border-radius  : 3px;
    background     : var(--vod-bg);
    flex-shrink    : 0;
    transition     : background var(--vod-transition), border-color var(--vod-transition);
    position       : relative;
}

.vod-filter-checkbox.is-checked .vod-filter-checkbox__checkmark {
    background   : var(--vod-primary);
    border-color : var(--vod-primary);
}

/* Coche SVG via pseudo-élément */
.vod-filter-checkbox.is-checked .vod-filter-checkbox__checkmark::after {
    content    : '';
    position   : absolute;
    left       : 3px;
    top        : 1px;
    width      : 5px;
    height     : 8px;
    border     : 2px solid #fff;
    border-top : none;
    border-left: none;
    transform  : rotate(45deg);
}

/* Focus accessible sur checkbox */
.vod-filter-checkbox__input:focus-visible + .vod-filter-checkbox__checkmark {
    outline        : 2px solid var(--vod-primary);
    outline-offset : 2px;
}

.vod-filter-checkbox__count {
    font-size : var(--vod-font-size-sm);
    opacity   : 0.65;
    font-weight: 400;
}

/* ── Toggle AND / OR ─────────────────────────────────────────── */
.vod-logic-toggle {
    display       : inline-flex;
    border        : 1.5px solid var(--vod-border);
    border-radius : var(--vod-border-radius);
    overflow      : hidden;
}

.vod-logic-btn {
    padding     : 0.3rem 0.75rem;
    font-size   : var(--vod-font-size-sm);
    font-weight : 600;
    color       : var(--vod-text-muted);
    background  : var(--vod-bg);
    border      : none;
    cursor      : pointer;
    transition  : color var(--vod-transition), background var(--vod-transition);
    letter-spacing: 0.03em;
}

.vod-logic-btn:hover {
    background : var(--vod-bg-hover);
    color      : var(--vod-text);
}

.vod-logic-btn.is-active {
    background : var(--vod-primary);
    color      : #fff;
}

.vod-logic-btn:focus-visible {
    outline        : 2px solid var(--vod-primary);
    outline-offset : -2px;
}

/* ── Bouton Reset ────────────────────────────────────────────── */
.vod-filters__reset {
    margin-left: auto;
}

.vod-reset-btn {
    padding     : 0.375rem 0.875rem;
    font-size   : var(--vod-font-size);
    color       : var(--vod-text-muted);
    background  : transparent;
    border      : 1.5px solid var(--vod-border);
    border-radius: 999px;
    cursor      : pointer;
    transition  : color var(--vod-transition),
                  border-color var(--vod-transition),
                  opacity var(--vod-transition);
    opacity     : 0;
    pointer-events: none;
}

#vod-reset-filters.is-visible,
.vod-no-results .vod-reset-btn {
    opacity       : 1;
    pointer-events: auto;
}

.vod-reset-btn:hover {
    color        : var(--vod-primary);
    border-color : var(--vod-primary);
}

/* ── Spinner de chargement ───────────────────────────────────── */
.vod-filters__loading {
    display    : none;
    align-items: center;
    gap        : 0.5rem;
    position   : absolute;
    right      : 1rem;
    top        : 50%;
    transform  : translateY(-50%);
}

.vod-spinner {
    display      : inline-block;
    width        : 18px;
    height       : 18px;
    border       : 2.5px solid var(--vod-border);
    border-top   : 2.5px solid var(--vod-primary);
    border-radius: 50%;
    animation    : vod-spin 0.7s linear infinite;
}

@keyframes vod-spin {
    to { transform: rotate(360deg); }
}

/* ── Message résultats vides ─────────────────────────────────── */
.vod-no-results {
    text-align    : center;
    padding       : 3rem 1rem;
    color         : var(--vod-text-muted);
    border        : 1px dashed var(--vod-border);
    border-radius : var(--vod-border-radius);
    margin-top    : 1rem;
}

.vod-no-results p {
    margin-bottom : 1rem;
    font-size     : 1rem;
}

.vod-loop-empty {
    text-align : center;
    padding    : 3rem 1rem;
    color      : var(--vod-text-muted);
}

/* ── Responsive Mobile ──────────────────────────────────────── */
@media ( max-width: 767px ) {

    .vod-filters {
        flex-direction : column;
        align-items    : flex-start;
        gap            : 0.875rem;
        padding        : 0.875rem;
    }

    .vod-filters__group {
        width      : 100%;
        flex-wrap  : wrap;
    }

    .vod-filters__label {
        width : 100%;  /* Label au-dessus des boutons */
    }

    .vod-filter-btn {
        padding   : 0.3rem 0.7rem;
        font-size : var(--vod-font-size-sm);
    }

    .vod-filters__reset {
        margin-left : 0;
        width       : 100%;
    }

    .vod-reset-btn {
        width      : 100%;
        text-align : center;
    }

    .vod-logic-toggle {
        width : 100%;
    }

    .vod-logic-btn {
        flex : 1;
        text-align: center;
    }
}

@media ( max-width: 480px ) {
    .vod-filters__buttons,
    .vod-filters__checkboxes {
        gap : 0.375rem;
    }

    .vod-filter-btn,
    .vod-filter-checkbox {
        font-size : 0.8rem;
        padding   : 0.25rem 0.6rem;
    }
}

/* ============================================================
   ELEMENTOR TAXONOMY FILTER — Couleurs par ton (tax_571)
   ============================================================
   data-filter sans point (confirmé F12).
   Classe active : .e-current
   ============================================================ */

/* ── enjoue-dynamique : jaune #f4d211 ── */
.e-filter-item[data-filter="enjoue-dynamique"] {
    background   : #f4d211 !important;
    border-color : #f4d211 !important;
    color        : #3a2f00 !important;
}
.e-filter-item[data-filter="enjoue-dynamique"]:hover {
    background   : #d4b400 !important;
    border-color : #d4b400 !important;
}
.e-filter-item[data-filter="enjoue-dynamique"].e-current {
    outline      : 3px solid #3a2f00 !important;
    outline-offset: 2px;
}

/* ── jeuxvideo-cartoon : vert #528c15 ── */
.e-filter-item[data-filter="jeuxvideo-cartoon"] {
    background   : #528c15 !important;
    border-color : #528c15 !important;
    color        : #ffffff !important;
}
.e-filter-item[data-filter="jeuxvideo-cartoon"]:hover {
    background   : #3e6910 !important;
    border-color : #3e6910 !important;
}
.e-filter-item[data-filter="jeuxvideo-cartoon"].e-current {
    outline      : 3px solid #ffffff !important;
    outline-offset: 2px;
}

/* ── neutre-droite : brun #682f00 ── */
.e-filter-item[data-filter="neutre-droite"] {
    background   : #682f00 !important;
    border-color : #682f00 !important;
    color        : #ffffff !important;
}
.e-filter-item[data-filter="neutre-droite"]:hover {
    background   : #4d2200 !important;
    border-color : #4d2200 !important;
}
.e-filter-item[data-filter="neutre-droite"].e-current {
    outline      : 3px solid #ffffff !important;
    outline-offset: 2px;
}

/* ── serieux-chaleureux : bleu #1e73be ── */
.e-filter-item[data-filter="serieux-chaleureux"] {
    background   : #1e73be !important;
    border-color : #1e73be !important;
    color        : #ffffff !important;
}
.e-filter-item[data-filter="serieux-chaleureux"]:hover {
    background   : #155a96 !important;
    border-color : #155a96 !important;
}
.e-filter-item[data-filter="serieux-chaleureux"].e-current {
    outline      : 3px solid #ffffff !important;
    outline-offset: 2px;
}