/* ==========================================================================
   Sélecteur de filtres des listes de vins (filtres-liste-vins.php)
   Colonne de gauche : filtres appliqués + facettes dépliables.
   ========================================================================== */

.fv-filtres {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    margin-bottom: 20px;
}

/* --- Filtres appliqués --------------------------------------------------- */

.fv-appliques {
    background: #fbf5f8;
    border: 1px solid #f0e2ea;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.fv-appliques-entete {
    display: block;
    overflow: hidden;
    margin-bottom: 6px;
}

.fv-appliques-titre {
    float: left;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #951961;
    margin: 0;
}

.fv-tout-effacer {
    float: right;
    color: #951961;
    font-size: 11px;
    line-height: 18px;
    text-decoration: underline;
}

.fv-tout-effacer:hover,
.fv-tout-effacer:focus {
    color: #64204d;
}

.fv-appliques-vide {
    color: #9a8a92;
    font-size: 12px;
    margin: 0;
}

.fv-chip {
    display: inline-block;
    max-width: 100%;
    margin: 2px 3px 2px 0;
    padding: 3px 6px 3px 11px;
    background: #951961;
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    line-height: 18px;
    vertical-align: middle;
}

.fv-chip-libelle {
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.fv-chip-retrait {
    color: #fff;
    opacity: .75;
    font-size: 15px;
    line-height: 18px;
    padding: 0 4px;
    text-decoration: none;
    vertical-align: middle;
}

.fv-chip-retrait:hover,
.fv-chip-retrait:focus {
    color: #fff;
    opacity: 1;
    text-decoration: none;
}

/* --- Groupes de facettes -------------------------------------------------- */

.fv-filtres .fv-groupes {
    margin-bottom: 0;
}

.fv-filtres .fv-groupe {
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    box-shadow: none;
    margin-bottom: 10px;
    overflow: hidden;
}

.fv-filtres .fv-groupes .fv-groupe + .fv-groupe {
    margin-top: 0;
}

.fv-filtres .fv-groupe-entete {
    background: none;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    padding: 0;
}

.fv-filtres .fv-groupe-entete .panel-title {
    font-size: 13px;
}

.fv-filtres .fv-groupe-lien {
    display: block;
    position: relative;
    padding: 11px 36px 11px 14px;
    color: #3b3b3b;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
}

.fv-filtres .fv-groupe-lien:hover,
.fv-filtres .fv-groupe-lien:focus {
    background: #fbf5f8;
    color: #951961;
    text-decoration: none;
}

.fv-filtres .fv-groupe-lien[aria-expanded="true"] {
    color: #951961;
}

.fv-filtres .fv-chevron {
    position: absolute;
    top: 50%;
    right: 14px;
    margin-top: -6px;
    color: #c9aebe;
    font-size: 12px;
    -webkit-transition: -webkit-transform .2s ease;
    transition: transform .2s ease;
}

.fv-filtres .fv-groupe-lien[aria-expanded="false"] .fv-chevron {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.fv-filtres .fv-groupe-lien:hover .fv-chevron {
    color: #951961;
}

.fv-filtres .fv-liste {
    max-height: 340px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0;
}

/* Bootstrap pose une bordure #ddd sous les en-têtes de panneaux ; on la
   remplace par un filet plus clair (spécificité supérieure à la sienne). */
.fv-filtres .fv-groupe > .panel-heading + .panel-collapse > .fv-liste {
    border-top: 1px solid #f0eaed;
}

.fv-filtres .fv-liste ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fv-filtres .fv-option {
    display: block;
    position: relative;
    padding: 7px 56px 7px 14px;
    color: #555;
    text-decoration: none;
}

.fv-filtres .fv-option:hover,
.fv-filtres .fv-option:focus {
    background: #fbf5f8;
    color: #951961;
    text-decoration: none;
}

.fv-filtres .fv-option-libelle {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fv-filtres .fv-option-nb {
    position: absolute;
    top: 50%;
    right: 14px;
    margin-top: -9px;
    min-width: 12px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    background: #f2f2f2;
    color: #999;
    border-radius: 9px;
    font-size: 11px;
    padding: 0 7px;
}

.fv-filtres .fv-option:hover .fv-option-nb,
.fv-filtres .fv-option:focus .fv-option-nb {
    background: #951961;
    color: #fff;
}

/* Pastille sur l'en-tête d'une catégorie repliée qui contient des valeurs
   sélectionnées en attente de validation (mobile). */
.fv-filtres .fv-groupe-nb {
    display: none;
}

.fv-filtres .fv-groupe-nb.fv-groupe-nb-actif {
    display: inline-block;
    min-width: 12px;
    height: 18px;
    line-height: 18px;
    margin-left: 6px;
    padding: 0 6px;
    background: #951961;
    color: #fff;
    border-radius: 9px;
    font-size: 11px;
    text-align: center;
    vertical-align: middle;
}

/* --- Aucun article pour ces filtres --------------------------------------- */

.fv-aucun {
    background: #fdf9fb;
    border: 1px dashed #e6d3dd;
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 28px 20px;
    text-align: center;
}

.fv-aucun-icone {
    display: block;
    margin-bottom: 10px;
    color: #d9c2cf;
    font-size: 34px;
}

.fv-aucun-message {
    color: #555;
    font-size: 16px;
    margin: 0 0 16px;
}

.fv-aucun-bouton {
    display: inline-block;
    padding: 11px 22px;
    background: #951961;
    color: #fff;
    border-radius: 999px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.fv-aucun-bouton:hover,
.fv-aucun-bouton:focus {
    background: #64204d;
    color: #fff;
    text-decoration: none;
}

/* Barre de défilement discrète dans les longues listes (WebKit) */
.fv-filtres .fv-liste::-webkit-scrollbar {
    width: 6px;
}

.fv-filtres .fv-liste::-webkit-scrollbar-thumb {
    background: #e3d3dc;
    border-radius: 3px;
}

.fv-filtres .fv-liste::-webkit-scrollbar-track {
    background: transparent;
}

@media (max-width: 767px) {
    .fv-filtres .fv-liste {
        max-height: 260px;
    }

    .fv-filtres .fv-chip-libelle {
        max-width: 220px;
    }
}

/* ==========================================================================
   Popup mobile : bouton "Filtrer" fixé en bas, facettes dans une feuille
   modale (ouverte/fermée par js/filtres-vins.js).
   ========================================================================== */

.fv-filtres .fv-bouton-filtrer,
.fv-filtres .fv-panneau-entete,
.fv-filtres .fv-panneau-pied,
.fv-filtres .fv-voile {
    display: none;
}

@media (max-width: 767px) {

    /* Gros bouton fixé en bas de l'écran */
    .fv-filtres .fv-bouton-filtrer {
        display: block;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 1050;
        width: auto;
        padding: 15px 18px;
        background: #951961;
        color: #fff;
        border: 0;
        border-radius: 999px;
        font-family: 'Roboto', sans-serif;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: .03em;
        text-align: center;
        -webkit-box-shadow: 0 6px 20px rgba(149, 25, 97, .35);
        box-shadow: 0 6px 20px rgba(149, 25, 97, .35);
    }

    .fv-filtres .fv-bouton-filtrer .fa {
        margin-right: 6px;
    }

    .fv-filtres .fv-bouton-nb {
        display: inline-block;
        min-width: 12px;
        height: 22px;
        line-height: 22px;
        margin-left: 6px;
        padding: 0 6px;
        background: #fff;
        color: #951961;
        border-radius: 11px;
        font-size: 13px;
        vertical-align: middle;
    }

    @supports (bottom: env(safe-area-inset-bottom)) {
        .fv-filtres .fv-bouton-filtrer {
            bottom: calc(12px + env(safe-area-inset-bottom));
        }
    }

    /* Les facettes sont masquées tant que la feuille n'est pas ouverte */
    .fv-filtres .fv-panneau {
        display: none;
    }

    .fv-filtres.fv-ouvert .fv-panneau {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1060;
        max-height: 85vh;
        background: #fff;
        border-radius: 16px 16px 0 0;
        -webkit-box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
        box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .fv-filtres.fv-ouvert .fv-panneau-entete {
        display: block;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 12px 16px;
        background: #fff;
        border-bottom: 1px solid #f0eaed;
        border-radius: 16px 16px 0 0;
        overflow: hidden;
    }

    .fv-filtres .fv-panneau-titre {
        float: left;
        color: #951961;
        font-family: 'Roboto', sans-serif;
        font-size: 15px;
        font-weight: 500;
        letter-spacing: .05em;
        line-height: 34px;
        text-transform: uppercase;
    }

    .fv-filtres .fv-fermer {
        float: right;
        width: 34px;
        height: 34px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #f5eff2;
        color: #951961;
        font-size: 22px;
        line-height: 32px;
        text-align: center;
    }

    .fv-filtres.fv-ouvert .fv-panneau-pied {
        display: block;
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
        z-index: 2;
        padding: 10px 16px;
        background: #fff;
        border-top: 1px solid #f0eaed;
    }

    .fv-filtres .fv-voir {
        display: block;
        width: 100%;
        padding: 14px;
        border: 0;
        border-radius: 999px;
        background: #951961;
        color: #fff;
        font-family: 'Roboto', sans-serif;
        font-size: 15px;
        font-weight: 500;
    }

    /* Une seule zone de défilement dans la feuille : les listes ne défilent
       plus indépendamment du panneau. */
    .fv-filtres.fv-ouvert .fv-panneau .fv-liste {
        max-height: none;
        overflow-y: visible;
    }

    .fv-filtres.fv-ouvert .fv-voile {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1055;
        background: rgba(0, 0, 0, .45);
    }

    /* La page ne défile pas derrière la feuille (classe posée par le script) */
    body.fv-sans-defilement {
        overflow: hidden;
    }
}

/* ==========================================================================
   Colonne collante (tablette / desktop) : les filtres suivent le défilement
   de la grille de produits.
   ========================================================================== */

@media (min-width: 768px) {

    /* Les colonnes Bootstrap 3 sont flottantes : elles n'ont pas la hauteur de
       la ligne, ce qui ne laisse aucune course à la colonne des filtres. La
       ligne devient flexible pour que la colonne s'étire sur la grille. */
    #produits > .row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    /* style.css pose overflow-x: hidden sur body, ce qui en fait un conteneur
       de défilement et neutralise position: sticky. "clip" rogne pareil sans
       créer de conteneur ; les navigateurs trop anciens gardent "hidden" et
       les filtres défilent simplement avec la page. */
    body {
        overflow-x: clip;
    }

    .fv-filtres {
        position: -webkit-sticky;
        position: sticky;
        top: 15px;
        /* Les facettes sont ouvertes par défaut : avec beaucoup de valeurs la
           colonne dépasse la hauteur de l'écran et, une fois collée, son bas
           deviendrait inaccessible. Elle défile donc dans son propre cadre. */
        max-height: calc(100vh - 30px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Les filtres appliqués restent visibles en haut du cadre pendant que les
       facettes défilent. */
    .fv-filtres .fv-appliques {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 5;
    }

    /* Ascenseur discret pour ce cadre comme pour les listes de valeurs */
    .fv-filtres::-webkit-scrollbar {
        width: 6px;
    }

    .fv-filtres::-webkit-scrollbar-thumb {
        background: #e3d3dc;
        border-radius: 3px;
    }

    .fv-filtres::-webkit-scrollbar-track {
        background: transparent;
    }
}