/* agrifacettes - bloc de filtres des pages catégorie (AG-187).
   Police et couleurs des vignettes produit (.dg-card du thème) : Arial, rouge
   #cf2020 du bouton « Ajouter », #a81a1a au survol. */

.agrifacettes {
    --agrifacettes-primaire: #cf2020;
    --agrifacettes-primaire-fonce: #a81a1a;
    margin: 0 0 20px;
    padding: 16px 14px;
    border: 1px solid #e3e3e3;
    border-top: 4px solid var(--agrifacettes-primaire);
    border-radius: 6px;
    background: #fff;
    font-family: Arial, sans-serif;
}
.agrifacettes .agrifacettes__titre {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    color: #222;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Le thème masque `#search_filters` sous 768 px (theme.css), en attendant son
   propre bouton de filtre, commenté dans products-top.tpl. Ici c'est le
   tiroir qui fait office de bouton : le contenu reste affiché. */
.agrifacettes #search_filters {
    display: block;
    margin: 0;
    padding: 0;
    box-shadow: none;
}

/* « Tout effacer », rendu seulement quand un filtre est coché (facets.tpl) */
.agrifacettes .agrifacettes-effacer-tout {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 10px;
    padding: 4px 10px 4px 6px;
    border: 1px solid #d6d6d6;
    border-radius: 999px;
    background: #fff;
    color: #222;
    font: 700 13px/1.2 Arial, sans-serif;
    letter-spacing: normal;
    cursor: pointer;
}
.agrifacettes .agrifacettes-effacer-tout .material-icons {
    font-size: 16px;
}
.agrifacettes .agrifacettes-effacer-tout:hover,
.agrifacettes .agrifacettes-effacer-tout:focus-visible {
    border-color: var(--agrifacettes-primaire);
    color: var(--agrifacettes-primaire);
}

/* ------------------------------------------------------------------ */
/* Une facette                                                         */
/* ------------------------------------------------------------------ */

.agrifacettes-facette {
    padding: 12px 0;
    border-top: 1px solid #ececec;
}
.agrifacettes-facette:first-of-type {
    padding-top: 2px;
    border-top: 0;
}
.agrifacettes-facette:last-of-type {
    padding-bottom: 0;
}
/* Sous-rubriques d'une rubrique cochée : rattachées au bloc Rubrique (pas de
   filet de séparation) et en retrait derrière un trait rouge. */
.agrifacettes-facette--sous {
    margin-left: 4px;
    padding: 0 0 12px 12px;
    border-top: 0;
    border-left: 3px solid var(--agrifacettes-primaire);
}
.agrifacettes-facette--sous2 {
    margin-left: 19px;
}
.agrifacettes .agrifacettes-facette__titre {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    color: #222;
    font: 700 14px/1.3 Arial, sans-serif;
    letter-spacing: normal;
    text-transform: none;
}
.agrifacettes-facette__nom {
    flex: 1 1 auto;
}
/* Nombre de valeurs cochées dans la facette */
.agrifacettes-facette__coches {
    flex: none;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--agrifacettes-primaire);
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}
/* Flèche de repli, mobile seulement. Sélecteur renforcé : material-fonts.css,
   chargé après cette feuille, remet `.material-icons` en inline-block. */
.agrifacettes #search_filters .agrifacettes-facette__fleche {
    display: none;
}

/* Recherche dans les longues listes */
.agrifacettes .agrifacettes-facette__recherche {
    width: 100%;
    margin: 2px 0 8px;
    padding: 7px 10px;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    background: #fff;
    color: #222;
    font: 14px Arial, sans-serif;
}
.agrifacettes .agrifacettes-facette__recherche:focus {
    outline: none;
    border-color: var(--agrifacettes-primaire);
    box-shadow: 0 0 0 2px rgba(207, 32, 32, 0.15);
}
.agrifacettes-facette__aucun {
    margin: 2px 6px 4px;
    color: #777;
    font-size: 13px;
}

/* ------------------------------------------------------------------ */
/* Valeurs : ligne entière cliquable, compteur en pastille à droite    */
/* ------------------------------------------------------------------ */

.agrifacettes-facette__liste {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Le thème espace les entrées de 14 px (`#search_filters ul li`) : sélecteur
   à identifiant pour reprendre la main. */
.agrifacettes #search_filters .agrifacettes-valeur {
    margin: 0;
    padding: 0;
    border: 0;
}
.agrifacettes-valeur--repliee {
    display: none;
}
.agrifacettes-facette.is-depliee .agrifacettes-valeur--repliee,
.agrifacettes-facette.is-recherche .agrifacettes-valeur--repliee {
    display: block;
}
.agrifacettes-facette.is-recherche .agrifacettes-valeur.is-ecartee,
.agrifacettes-facette.is-recherche .agrifacettes-facette__plus {
    display: none;
}
.agrifacettes .agrifacettes-valeur__ligne {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 5px 6px;
    border-radius: 4px;
    font-weight: 400;
    cursor: pointer;
}
.agrifacettes .agrifacettes-valeur__ligne:hover {
    background: #f5f5f5;
}
.agrifacettes .agrifacettes-valeur__case {
    -webkit-appearance: none;
    appearance: none;
    display: grid;
    place-content: center;
    flex: none;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    border: 1.5px solid #8a8a8a;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
}
.agrifacettes .agrifacettes-valeur__case::after {
    content: "";
    width: 10px;
    height: 6px;
    border: solid #fff;
    border-width: 0 0 2px 2px;
    transform: translate(0, -1px) rotate(-45deg);
    opacity: 0;
}
.agrifacettes .agrifacettes-valeur__case:checked {
    border-color: var(--agrifacettes-primaire);
    background: var(--agrifacettes-primaire);
}
.agrifacettes .agrifacettes-valeur__case:checked::after {
    opacity: 1;
}
.agrifacettes .agrifacettes-valeur__ligne:hover .agrifacettes-valeur__case:not(:checked) {
    border-color: #444;
}
.agrifacettes .agrifacettes-valeur__case:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}
.agrifacettes .agrifacettes-valeur__lien,
.agrifacettes .agrifacettes-valeur__lien:hover,
.agrifacettes .agrifacettes-valeur__lien:focus {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    color: #222;
    font: 14px/1.35 Arial, sans-serif;
    letter-spacing: normal;
    text-decoration: none;
}
.agrifacettes-valeur__libelle {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}
.agrifacettes .is-cochee .agrifacettes-valeur__libelle {
    font-weight: 700;
}
/* Compteur : colonne fixe, chiffres de même largeur, jamais renvoyé à la ligne */
.agrifacettes-valeur__nb {
    flex: none;
    min-width: 28px;
    padding: 1px 7px;
    border-radius: 10px;
    background: #f1f1f1;
    color: #555;
    font-size: 12px;
    line-height: 17px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.agrifacettes .is-cochee .agrifacettes-valeur__nb {
    background: #fbe3e3;
    color: var(--agrifacettes-primaire-fonce);
}

/* « Voir les N autres » */
.agrifacettes .agrifacettes-facette__plus {
    display: inline-block;
    margin: 6px 0 0 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--agrifacettes-primaire);
    font: 700 13px Arial, sans-serif;
    letter-spacing: normal;
    text-decoration: underline;
    cursor: pointer;
}
.agrifacettes .agrifacettes-facette__plus:hover {
    color: var(--agrifacettes-primaire-fonce);
}

/* Sous 992 px, chaque facette se replie derrière son titre (facettes.js) */
@media (max-width: 991px) {
    .agrifacettes .agrifacettes-facette__titre {
        margin: 0;
        cursor: pointer;
    }
    .agrifacettes #search_filters .agrifacettes-facette__fleche {
        display: block;
        flex: none;
        transition: transform 0.2s;
    }
    .agrifacettes-facette__corps {
        display: none;
        margin-top: 8px;
    }
    .agrifacettes-facette.is-ouverte .agrifacettes-facette__corps {
        display: block;
    }
    .agrifacettes-facette.is-ouverte .agrifacettes-facette__fleche {
        transform: rotate(180deg);
    }
    .agrifacettes .agrifacettes-valeur__ligne {
        padding: 8px 6px; /* cibles tactiles */
    }
}

/* ------------------------------------------------------------------ */
/* Pendant un filtrage (facettes.js)                                   */
/* ------------------------------------------------------------------ */

body.agrifacettes-chargement #js-product-list {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.15s;
}
body.agrifacettes-chargement .agrifacettes #search_filters {
    opacity: 0.6;
    pointer-events: none;
}
.agrifacettes-sablier {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1000;
    display: none;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border: 4px solid rgba(207, 32, 32, 0.2);
    border-top-color: #cf2020;
    border-radius: 50%;
    animation: agrifacettes-tourne 0.8s linear infinite;
}
body.agrifacettes-chargement .agrifacettes-sablier {
    display: block;
}
@keyframes agrifacettes-tourne {
    to {
        transform: rotate(360deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .agrifacettes-sablier {
        animation-duration: 2.4s;
    }
}

/* ------------------------------------------------------------------ */
/* Filtres actifs, au-dessus de la grille                              */
/* ------------------------------------------------------------------ */

#wrapper #js-active-search-filters.active_filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0 0 20px;
    padding: 10px 14px;
    border-radius: 6px;
    background: #f6f6f6;
}
#wrapper #js-active-search-filters .active-filter-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #222;
}
#wrapper #js-active-search-filters ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#wrapper #js-active-search-filters .filter-block {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: #cf2020;
    color: #fff;
    font-size: 13px;
}
#wrapper #js-active-search-filters .filter-block a,
#wrapper #js-active-search-filters .filter-block .material-icons {
    color: #fff;
    font-size: 16px;
}
#wrapper #js-active-search-filters .agrifacettes-effacer {
    font-size: 13px;
    color: #222;
    text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Bouton du catalogue constructeurs : sous les filtres sur bureau, à  */
/* sa place d'origine (category.tpl) sous 1200 px, où la colonne       */
/* gauche passe sous les produits.                                     */
/* ------------------------------------------------------------------ */

.agrifacettes-catalogue {
    margin: 0 0 20px;
}
.agrifacettes-catalogue__lien {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #e30616;
    color: #fff;
    font-size: 14px;
    line-height: 1.3;
    text-decoration: none;
}
.agrifacettes-catalogue__lien:hover,
.agrifacettes-catalogue__lien:focus {
    background: #e7e3e3;
    color: #000;
    text-decoration: none;
}
.agrifacettes-catalogue__lien img {
    flex: none;
    width: 25px;
    height: 25px;
}
@media (min-width: 1200px) {
    #wrapper .agrifacettes-catalogue-contenu {
        display: none;
    }
}
@media (max-width: 1199px) {
    .agrifacettes-catalogue {
        display: none;
    }
}

/* Accroche d'une page filtrée indexable, à la place de la description */
#wrapper .agrifacettes-intro {
    margin: 0;
}
#wrapper .agrifacettes-intro a {
    color: #cf2020;
    text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Mobile et tablette : bouton et tiroir au-dessus de la liste         */
/* ------------------------------------------------------------------ */

.agrifacettes-tiroir {
    margin: 0 0 16px;
}
.agrifacettes-tiroir__bouton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
    border: 1px solid #cf2020;
    border-radius: 6px;
    background: #fff;
    color: #cf2020;
    font: 700 15px Arial, sans-serif;
    cursor: pointer;
}
.agrifacettes-tiroir__bouton[aria-expanded="true"] {
    background: #cf2020;
    color: #fff;
}
.agrifacettes-tiroir__contenu {
    margin-top: 12px;
}
.agrifacettes-tiroir .agrifacettes {
    margin-bottom: 0;
}