/**
 * ------------------------------------------------------------------------
 * CATALOG — STYLES FRONT (grille, filtres, layout, hero)
 * ------------------------------------------------------------------------
 *
 * Ce fichier contient uniquement les styles spécifiques au catalogue :
 * grille de produits, sidebar de filtres, layout, pagination, hero.
 *
 * Les styles des cartes produit (encarts) sont dans cards.css,
 * chargé sur toutes les pages affichant des suggestions.
 *
 * @author  Pietro Giacomini
 * @package Blondeau
 * @file    catalog.css
 * @version 2.23.0 — pagination identique au calculateur (pastilles rondes 44px sans cadre) — 2026-10-27
 * @version 2.22.1 —focus clavier unifié : bord or foncé + halo or collé, comme les champs (DETTE-398) — 2026-10-23
 * @version 2.22.0 — champs de formulaire : contour au seuil 3:1, focus contour or foncé + halo or (DETTE-391) — 2026-10-23
 * @version 2.21.3 — feuille de filtres mobile : Réinitialiser en bouton doré identique au calculateur (DETTE-374) — 2026-10-19
 * @version 2.21.2 — feuille de filtres mobile plafonnée sous l'en-tête collant (BUG-387) — 2026-10-19
 * @version 2.21.1 — « Nouveautés » et « Filtrer » allégés avec la pastille de tri : 36px, contour 1px, 0.72rem semi-gras — 2026-10-18
 * @version 2.21.0 — tri : pastille commune .blondeau-sort (main.css) ; « Nouveautés » aligné (44px, typographie de « Filtrer ») — 2026-10-17
 * @version 2.20.0 — icônes du jeu commun : titres de filtres, Nouveautés — 2026-10-15
 * @version 2.19.3 — fermeture de la feuille de filtres en 36 px (taille de .exit-modal__close) — 2026-10-15
 * @version 2.19.2 — code mort retiré (règles sans aucun élément ciblé), rendu identique — 2026-10-14
 * ------------------------------------------------------------------------
 */

/* ========================================================================
 * GRILLE CATALOGUE
 * ======================================================================== */

.blondeau-catalog ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: visible;
    align-items: stretch;
}

.blondeau-catalog ul.products > li.product {
    display: flex;
    position: relative;
    z-index: 1;
    list-style: none;
    overflow: visible;
    align-items: stretch;
    align-self: stretch;
}

.blondeau-catalog ul.products > li.product:hover,
.blondeau-catalog ul.products > li.product.is-touch-open,
.blondeau-catalog ul.products > li.product:focus-within {
    z-index: 10;
}

.blondeau-catalog ul.products > li.product .blondeau-card {
    flex: 1;
}

.blondeau-catalog ul.products.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ========================================================================
 * NEUTRALISATION PADDING THÈME — wp-block-group avec global-padding
 * ======================================================================== */

.wp-block-group.alignfull.has-global-padding:has(.blondeau-catalog),
.wp-block-group.alignfull.has-global-padding:has([class*='blondeau-catalog']) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: clip !important;
}

.wp-block-post-content.has-global-padding:has(.blondeau-catalog) {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Le shortcode [blondeau_catalog] est placé dans un bloc Paragraphe de
   l'éditeur ; le HTML généré (commentaire + <nav>) ne peut pas rester
   dans un <p>, donc le navigateur ferme le <p> avant le breadcrumb —
   un <p class="wp-block-paragraph"> vide subsiste juste avant, avec son
   margin-bottom par défaut (styles core WordPress), qui ajoute un espace
   fantôme entre le hero et le fil d'Ariane. */
p.wp-block-paragraph:has(+ .blondeau-breadcrumb) {
    margin-bottom: 0 !important;
}

/* ========================================================================
 * LAYOUT CATALOGUE
 * ======================================================================== */

.blondeau-catalog,
.is-layout-constrained > .blondeau-catalog,
.wp-block-post-content .blondeau-catalog {
    max-width: var(--wp--style--global--wide-size, 1400px) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.blondeau-breadcrumb__list {
    padding: 0 !important;
}

/* Toolbar */
.blondeau-catalog__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.blondeau-catalog-toolbar__count {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* Pastille « Tri » : modèle commun .blondeau-sort (main.css, 2026-10-17),
   identique aux avis clients et aux tissus du calculateur. Les anciennes
   règles .blondeau-catalog-toolbar__sort .bf-select-wrap (contour 1,5px,
   texte en casse normale, sans chevron) sont remplacées par ce modèle. */
.blondeau-catalog-toolbar__sort {
    display: flex;
    min-width: 0;
}

.bf-select-wrap {
    position: relative;
    overflow: hidden;
}

.bf-select-wrap::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -75%;
    width: 40%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    opacity: 0;
    z-index: 1;
}

.bf-select-wrap:hover::before {
    opacity: 1;
    animation: btnShimmer 0.55s ease forwards;
}

.bf-select-wrap select {
    position: relative;
    z-index: 0;
    flex: 1;
}

/* Layout principal */
.blondeau-catalog__layout {
    display: grid;
    grid-template-columns: 288px 1fr;
    gap: 1.25rem;
    align-items: start;
}

.blondeau-catalog__results ul.products {
    overflow: visible;
}

.blondeau-catalog__results {
    min-width: 0;
    position: relative;
}

/* Pagination — puces rondes + flèches (harmonisé avec Mon compte et Calculateur) */
.blondeau-catalog__pagination {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
}

/* Valeurs exactes de la pagination du calculateur (.blc-fabrics-page-btn,
   Blondeau-textile/.../calculator.css) : pastilles rondes 44px sans bordure,
   chiffres gris, flèches marine, page courante or. La liste <ul> porte aussi
   la classe .page-numbers : la règle générique de main.css (bordure, fond,
   44px) est neutralisée sur elle. Toute évolution est à répercuter dans le
   calculateur et dans Mon compte (.orders-pagination, account.css). */
.blondeau-catalog__pagination ul.page-numbers {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
}

.blondeau-catalog__pagination .page-numbers li {
    display: flex;
}

.blondeau-catalog__pagination .page-numbers li a,
.blondeau-catalog__pagination .page-numbers li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.blondeau-catalog__pagination .page-numbers li a:hover {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    color: var(--color-primary);
}

.blondeau-catalog__pagination .page-numbers li span.current {
    background: var(--color-accent);
    color: var(--color-primary);
}

.blondeau-catalog__pagination .page-numbers li span.dots {
    width: 1.25rem;
    min-width: 1.25rem;
    background: none;
}

.blondeau-catalog__pagination .page-numbers li a.prev,
.blondeau-catalog__pagination .page-numbers li a.next {
    font-size: 1.1rem;
    color: var(--color-primary);
}

/* Catalogue vide (0 résultat) — même présentation que le panier vide
   natif WooCommerce (icône ronde + titre gras centrés). Icône reprise
   à l'identique (même SVG masqué en currentColor) pour la cohérence
   visuelle entre les deux états vides du site. */
.blondeau-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 4rem 2rem;
    text-align: center;
}

.blondeau-empty-state__icon {
    display: block;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    background-color: var(--color-primary);
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOCIgaGVpZ2h0PSIzOCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMTkgMEM4LjUwNCAwIDAgOC41MDQgMCAxOXM4LjUwNCAxOSAxOSAxOSAxOS04LjUwNCAxOS0xOVMyOS40OTYgMCAxOSAwWm02LjEyOSAxMi44NzFhMi40NDkgMi40NDkgMCAwIDEgMi40NTIgMi40NTIgMi40NDkgMi40NDkgMCAwIDEtMi40NTIgMi40NTEgMi40NDkgMi40NDkgMCAwIDEtMi40NTItMi40NTEgMi40NDkgMi40NDkgMCAwIDEgMi40NTItMi40NTJaTTExLjY0NSAzMS4yNThjLTIuMDMgMC0zLjY3Ny0xLjYwOS0zLjY3Ny0zLjYgMC0xLjUzMyAyLjE4My00LjYyOCAzLjE4Ny01Ljk2MWEuNjEuNjEgMCAwIDEgLjk4IDBjMS4wMDQgMS4zMzMgMy4xODggNC40MjggMy4xODggNS45NiAwIDEuOTkyLTEuNjQ4IDMuNjAxLTMuNjc4IDMuNjAxWm0xLjIyNi0xMy40ODRhMi40NDkgMi40NDkgMCAwIDEtMi40NTItMi40NTEgMi40NDkgMi40NDkgMCAwIDEgMi40NTItMi40NTIgMi40NDkgMi40NDkgMCAwIDEgMi40NTIgMi40NTIgMi40NDkgMi40NDkgMCAwIDEtMi40NTIgMi40NTFabTEzLjA0IDExLjgxNEE4Ljk4OSA4Ljk4OSAwIDAgMCAxOSAyNi4zNTVjLTEuNjI0IDAtMS42MjQtMi40NTIgMC0yLjQ1MmExMS40IDExLjQgMCAwIDEgOC43ODggNC4xMjJjMS4wNTcgMS4yNTctLjg1OSAyLjc5Ni0xLjg3OCAxLjU2M1oiLz48L3N2Zz4=");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzOCIgaGVpZ2h0PSIzOCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMTkgMEM4LjUwNCAwIDAgOC41MDQgMCAxOXM4LjUwNCAxOSAxOSAxOSAxOS04LjUwNCAxOS0xOVMyOS40OTYgMCAxOSAwWm02LjEyOSAxMi44NzFhMi40NDkgMi40NDkgMCAwIDEgMi40NTIgMi40NTIgMi40NDkgMi40NDkgMCAwIDEtMi40NTIgMi40NTEgMi40NDkgMi40NDkgMCAwIDEtMi40NTItMi40NTEgMi40NDkgMi40NDkgMCAwIDEgMi40NTItMi40NTJaTTExLjY0NSAzMS4yNThjLTIuMDMgMC0zLjY3Ny0xLjYwOS0zLjY3Ny0zLjYgMC0xLjUzMyAyLjE4My00LjYyOCAzLjE4Ny01Ljk2MWEuNjEuNjEgMCAwIDEgLjk4IDBjMS4wMDQgMS4zMzMgMy4xODggNC40MjggMy4xODggNS45NiAwIDEuOTkyLTEuNjQ4IDMuNjAxLTMuNjc4IDMuNjAxWm0xLjIyNi0xMy40ODRhMi40NDkgMi40NDkgMCAwIDEtMi40NTItMi40NTEgMi40NDkgMi40NDkgMCAwIDEgMi40NTItMi40NTIgMi40NDkgMi40NDkgMCAwIDEgMi40NTIgMi40NTIgMi40NDkgMi40NDkgMCAwIDEtMi40NTIgMi40NTFabTEzLjA0IDExLjgxNEE4Ljk4OSA4Ljk4OSAwIDAgMCAxOSAyNi4zNTVjLTEuNjI0IDAtMS42MjQtMi40NTIgMC0yLjQ1MmExMS40IDExLjQgMCAwIDEgOC43ODggNC4xMjJjMS4wNTcgMS4yNTctLjg1OSAyLjc5Ni0xLjg3OCAxLjU2M1oiLz48L3N2Zz4=");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.blondeau-empty-state__title {
    margin: 0;
    /* Neutralise le max-width: 70ch global (règle p/li/figcaption, cf.
       BUG-193) qui rétrécissait ce <p> et cassait le centrage du texte
       à l'intérieur du bloc flex déjà centré ci-dessus. */
    max-width: none;
    /* BUG-270 [OK] — corrigé le 2026-09-18 : `font-size` déclaré deux fois
       dans cette règle (1.1rem puis 0.9rem juste en dessous), la seconde
       écrasant silencieusement la première — titre affiché plus petit que
       prévu sur les deux écrans qui partagent ce composant (recherche sans
       résultat, catalogue à 0 résultat). */
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
}

/* ========================================================================
 * FILTRES — SIDEBAR
 * ======================================================================== */

.blondeau-catalog__filters {
    position: sticky;
    top: calc(var(--header-height, 80px) + 1rem);
    align-self: start;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
    background: var(--color-primary);
    border-radius: 12px;
    /* Padding droit réduit de 6px : compensé par le padding-right
       de .bf-scroll-area (gouttière scrollbar), pour un inset symétrique
       avec le padding gauche. Haut/bas identiques (1.25rem) pour un
       inset symétrique avec le bas de la fenêtre. */
    padding: 1.25rem calc(1.25rem - 6px) 1.25rem 1.25rem;
    box-sizing: border-box;
    max-height: calc(100vh - var(--header-height, 80px) - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.blondeau-catalog-filters {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Zone de scroll interne dédiée aux filtres — les actions
   (Appliquer / Réinitialiser) restent hors de cette zone,
   donc toujours visibles, comme le prix/bouton du calculateur. */
.bf-scroll-area {
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding-right: 6px;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.bf-scroll-area::-webkit-scrollbar { width: 4px; }
.bf-scroll-area::-webkit-scrollbar-track { background: transparent; }
.bf-scroll-area::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

/* Indice visuel de contenu supplémentaire sous le cadre visible —
   dégradé collé en bas de la zone de scroll tant qu'il reste des
   filtres à découvrir plus bas. */
.bf-scroll-area::after {
    content: "";
    display: block;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 26px;
    margin-top: -26px;
    background: linear-gradient(to bottom, transparent, var(--color-primary) 92%);
    pointer-events: none;
}

/* Liens de filtre : pas de soulignement (hérité du style global a{}) */
.blondeau-catalog__filters a {
    text-decoration: none;
}

.blondeau-filter {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

/* Le dernier filtre affiché ne doit pas doubler le séparateur déjà
   porté par .bf-actions (border-top) juste en dessous. */
.bf-scroll-area > .blondeau-filter:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.blondeau-filter summary {
    list-style: none;
    cursor: pointer;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    user-select: none;
}

/* Icône du jeu commun + libellé, groupés à gauche (le chevron reste à droite)
   — titres de rubriques et en-tête « Filtrer », 2026-10-15 */
.bf-summary-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.bf-summary-icon {
    flex-shrink: 0;
}

.blondeau-filter summary::-webkit-details-marker {
    display: none;
}

.blondeau-filter summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.5);
    transform: rotate(45deg);
    transition: transform 0.32s ease;
    flex-shrink: 0;
}

.blondeau-filter[open] summary::after {
    transform: rotate(-135deg);
}

/* Animation d'ouverture/fermeture (technique grid-rows, sans JS).
   .bf-filter-collapse anime la hauteur (0fr → 1fr) ; .bf-filter-body
   (encart blanc) doit pouvoir se réduire sous sa taille naturelle,
   d'où overflow:hidden + min-height:0 sur l'enfant grid. */
.bf-filter-collapse {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    transition: grid-template-rows 0.32s ease, margin-top 0.32s ease;
}

.blondeau-filter[open] > .bf-filter-collapse {
    grid-template-rows: 1fr;
    margin-top: 0.6rem;
}

.bf-filter-collapse > * {
    overflow: hidden;
    min-height: 0;
}

/* Contenu du filtre — encart blanc visible uniquement quand ouvert
   (même logique que l'encart "Votre configuration" du calculateur) */
.bf-filter-body {
    background: #fff;
    color: var(--color-text);
    border-radius: 8px;
    padding: 0.75rem 0.8rem;
    box-sizing: border-box;
}

.blondeau-catalog-filters label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0;
    cursor: pointer;
    line-height: 1.3;
}

.blondeau-catalog-filters input[type="checkbox"] {
    flex-shrink: 0;
    accent-color: var(--color-accent);
}

.bf-list {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.78rem;
}

.bf-filter-body > label {
    font-size: 0.78rem;
}

.bf-inline-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.bf-inline-item input[type="checkbox"] {
    display: none;
}

.bf-inline-item:hover,
.bf-inline-item.is-active {
    background: var(--color-accent);
    color: var(--color-primary);
    border-color: var(--color-accent);
}

/* ========================================================================
 * COULEURS — 2 colonnes, swatch
 * ======================================================================== */

.bf-color-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem 0.5rem;
    padding-left: 6px;
    overflow: visible;
}

.bf-color-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    padding: 0.15rem 0;
    transition: all .2s ease;
}

.bf-color-item input[type="checkbox"] {
    display: none;
}

.bf-color-item .bf-color-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.bf-color-item:hover .bf-color-swatch,
.bf-color-item.is-active .bf-color-swatch {
    transform: scale(1.25);
    border-color: var(--color-accent);
}

.bf-color-label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.2;
}

.bf-count {
    font-size: 0.85em;
    opacity: 0.65;
}

.bf-color-item.is-active .bf-color-label {
    color: var(--color-accent);
    font-weight: 500;
}

.bf-range-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bf-range-slider {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
}

.bf-range-track {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 2px;
}

.bf-range-fill {
    position: absolute;
    height: 100%;
    background: var(--color-accent);
    border-radius: 2px;
}

.bf-range-thumb {
    position: absolute;
    width: 100%;
    height: 3px;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
    outline: none;
}

.bf-range-thumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-bg);
    border: 2px solid var(--color-accent);
    cursor: pointer;
    pointer-events: all;
    transition: transform 0.15s ease;
}

.bf-range-thumb::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-bg);
    border: 2px solid var(--color-accent);
    cursor: pointer;
    pointer-events: all;
}

.bf-range-thumb::-webkit-slider-thumb:hover,
.bf-range-thumb:active::-webkit-slider-thumb {
    transform: scale(1.2);
}

.bf-range-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bf-range-label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bf-range-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

/* Qualifié par .bf-range-input-wrap (et non juste .bf-range-input) : un
   input[type="number"] compte pour une spécificité de sélecteur d'attribut
   ((0,1,1), pas (0,0,1)) — la règle générique de main.css (input[type="text"],
   ..., input[type="number"], ...) battait donc .bf-range-input seul (0,1,0),
   écrasant le padding asymétrique qui réserve la place de l'unité (cm/€/…) :
   le nombre glissait sous « cm »/« € ». DETTE-CSS-SPECIFICITY, 2026-09-14. */
.bf-range-input-wrap .bf-range-input {
    width: 100%;
    padding: 0.35rem 2.2rem 0.35rem 0.5rem;
    /* Sidebar marine : blanc 40 % = 3,7:1 sur #1C1F3B (DETTE-391) */
    border: 1px solid rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    text-align: left;
    outline: none;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

.bf-range-input-wrap .bf-range-input:focus {
    border-color: var(--color-field-focus);
    box-shadow: 0 0 0 3px var(--color-field-halo);
}

.bf-range-unit {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.65rem;
    color: var(--color-text-muted);
    pointer-events: none;
    white-space: nowrap;
}

.bf-range-sep {
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    font-size: 0.7rem;
    padding-top: 1.2rem;
}

/* ========================================================================
 * ICÔNES (Usage, Entretien)
 * ======================================================================== */

.blondeau-filter-icon-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.bf-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.4rem 0.3rem;
    border: 1px solid transparent;
    cursor: pointer;
    width: calc(33.33% - 0.4rem);
    text-align: center;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    transition: border-color 0.15s ease;
}

.bf-icon-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.bf-icon-item img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.bf-icon-item:hover,
.bf-icon-item.is-active {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ========================================================================
 * ACTIONS FILTRES
 * ======================================================================== */

.bf-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.bf-btn-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--color-accent);
    color: var(--color-primary);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    min-height: 44px;
    position: relative;
    overflow: hidden;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.bf-btn-filter::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -75%;
    width: 40%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    opacity: 0;
}

.bf-btn-filter:hover::before {
    opacity: 1;
    animation: btnShimmer 0.55s ease forwards;
}

.bf-btn-filter:hover {
    background: color-mix(in srgb, var(--color-accent) 82%, #000);
    border-color: color-mix(in srgb, var(--color-accent) 82%, #000);
    color: var(--color-primary);
}

.bf-btn-filter:active {
    transform: scale(0.98);
}

.bf-btn-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.bf-btn-reset:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

/* ========================================================================
 * ACCESSIBILITÉ — FOCUS (filtres et formulaires catalogue)
 * ======================================================================== */

.blondeau-filter summary:focus {
    outline: none;
}

.blondeau-filter summary:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
    box-shadow: 0 0 0 3px var(--color-field-halo);
}

/* 2026-10-23 (DETTE-391) : or de charte (2,3:1 sur les blocs blancs) remplacé
   par l'or foncé des champs (3,5:1 sur blanc, 4,6:1 sur la sidebar marine) ;
   les champs de saisie (recherche, nombres, listes) suivent la règle commune
   des champs (accessibility.css : contour or foncé + halo). */
.blondeau-catalog input[type="checkbox"]:focus-visible,
.blondeau-catalog input[type="radio"]:focus-visible,
.blondeau-catalog .bf-btn-filter:focus-visible {
    outline: 2px solid var(--color-field-focus);
    outline-offset: 2px;
}
/* Bouton Filtrer : recette commune des boutons (DETTE-398) */
.blondeau-catalog .bf-btn-filter:focus-visible {
    outline-offset: -2px;
    box-shadow: 0 0 0 3px var(--color-field-halo);
}

/* ========================================================================
 * BARRE FILTRES MOBILES — déclencheur unique (remplace la rangée de selects)
 * Composant du calculateur REPRIS À L'IDENTIQUE — même valeurs, pas juste
 * « même inspiration ». Référence exacte : blondeau/assets/css/calculator.css
 * (thème, pas le plugin), section « FILTRES TISSU — bouton unique + panneau
 * à accordéon », .blc-filters-trigger / .blc-filters-badge, approuvée par
 * Pietro le 2026-09-10. Toute évolution de ce composant doit être répercutée
 * aux deux endroits — voir CLAUDE.md § Cohérence visuelle des composants.
 * ======================================================================== */

.blondeau-catalog__mobile-filters {
    display: none;
}

.blondeau-catalog__filters-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px; /* = pastille de tri commune (.blondeau-sort) et .blc-filters-trigger — rangée allégée le 2026-10-18 (44px avant) */
    min-height: 36px !important; /* plancher 44px des boutons (accessibility.css) levé : rangée de 36px, cible ≥ 24px WCAG 2.5.8 — 2026-10-18 */
    padding: 0 18px;
    border: 1.5px solid var(--color-primary);
    /* radius-md (6px) — aucun bouton du thème n'est en pilule (rayon = moitié
       de la hauteur) ; corrigé le 2026-09-14 avec .blc-filters-trigger. */
    border-radius: var(--radius-md, 6px);
    background: var(--color-primary);
    color: #fff;
    font-family: inherit;
    font-size: 0.72rem; /* = .blondeau-sort, 2026-10-18 (0.78rem gras avant) */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.blondeau-catalog__filters-trigger svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    opacity: 0.85;
}

/* .is-active = feuille OUVERTE (état transitoire, posé par catalog-filters.js)
   .blondeau-catalog__filters-trigger--active = DES FILTRES SONT ACTIFS (état
   posé côté PHP au rendu + resynchronisé après chaque AJAX) — même sémantique
   que .blc-filters-trigger--active du calculateur, qui ne réagit qu'au
   nombre de filtres, jamais à l'ouverture du panneau. */
.blondeau-catalog__filters-trigger:hover,
.blondeau-catalog__filters-trigger--active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary);
}

.blondeau-catalog__filters-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--color-accent);
    color: var(--color-primary);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
}

.blondeau-catalog__filters-trigger--active .blondeau-catalog__filters-badge {
    background: var(--color-primary);
    color: #fff;
}

.blondeau-catalog__filters-badge[hidden] {
    display: none;
}

/* z-index 149 — sous le header sticky (.site-header, --z-sticky:200,
   main.css) et sous .blc-sticky-bar (160) sur le calculateur : la feuille
   passait au-dessus au scroll, alors qu'elle doit rester en dessous, comme
   côté calculateur (calculator.css plugin, .blc-filters-scrim/-panel).
   Corrigé le 2026-09-14. */
.blondeau-catalog__filters-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(28, 31, 59, 0.42);
    z-index: 149;
}

/* Poignée + en-tête de la feuille — n'existent visuellement qu'en mobile */
.bf-sheet-handle,
.bf-sheet-head,
.bf-quick-toggle {
    display: none;
}

/* ========================================================================
 * RESPONSIVE
 * ======================================================================== */

/* Le contenu de ce point de rupture a été déplacé en toute fin de fichier
   (voir « FEUILLE MOBILE — TOUT LE CONTENU RESPONSIVE » en bas) : il doit
   être chargé APRÈS toutes les règles de base ci-dessous (.bf-category-item,
   .bf-color-grid @600px, etc.), sans quoi celles-ci — situées plus loin dans
   ce même fichier — regagnaient la cascade à spécificité égale et annulaient
   silencieusement les correctifs mobile (ex : hauteur des catégories, grille
   couleurs repassée en 1 colonne). DETTE-CSS-ORDER, corrigée le 2026-09-14. */

@media (max-width: 600px) {

    .blondeau-catalog ul.products,
    .blondeau-catalog ul.products.columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .bf-color-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================
 * IS-ACTIVE — ÉTATS SÉLECTIONNÉS VISIBLES
 * ======================================================================== */

.bf-color-item.is-active .bf-color-swatch,
.bf-color-item:has(input:checked) .bf-color-swatch {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    transform: scale(1.15);
}

.bf-color-item.is-active .bf-color-label,
.bf-color-item:has(input:checked) .bf-color-label {
    color: var(--color-accent);
    font-weight: 600;
}

.bf-color-swatch--empty {
    background: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0.2) 2px,
        transparent 2px,
        transparent 6px
    );
}

.bf-list label.is-active,
.bf-list label:has(input:checked) {
    color: var(--color-accent);
    font-weight: 500;
}

.bf-icon-item.is-active {
    border-color: var(--color-accent);
    background: rgba(255, 255, 255, 0.08);
}

.bf-icon-item:has(input:checked) .bf-color-swatch {
    border: 2px solid var(--color-accent);
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-accent);
}

/* Éléments de filtre sans résultat (count=0) — visuellement désactivés */
.bf-color-item.is-disabled,
.bf-category-item.is-disabled,
.bf-icon-item.is-disabled,
.blondeau-filter label.is-disabled,
.bf-list label.is-disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

.bf-category-item.is-disabled span {
    cursor: default;
}

.bf-icon-item:has(input:checked),
.bf-icon-item.is-active {
    border-color: var(--color-accent);
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-accent);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

/* ========================================================================
 * INTÉGRATION THÈME
 * ======================================================================== */

.has-catalog .site-content {
    padding-top: 0 !important;
}

@keyframes blondeau-kenburns {
    0%   { transform: scale(1.06) translate(0%, 0%); }
    33%  { transform: scale(1.10) translate(-1.5%, 0.5%); }
    66%  { transform: scale(1.08) translate(1%, -0.8%); }
    100% { transform: scale(1.06) translate(0%, 0%); }
}

/* ========================================================================
 * BOUTON NOUVEAUTÉS (TOOLBAR)
 * ======================================================================== */

.blondeau-catalog-toolbar__new {
    margin-left: auto;
}

.blondeau-new-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px; /* icône Nouveauté — même écart icône/texte que le tri (2026-10-18) */
    /* Gabarit identique à la pastille de tri commune (.blondeau-sort,
       main.css) : même rangée de boutons. Allégé le 2026-10-18 (« trop
       voyant ») : 36px, contour 1px, 0.72rem semi-gras — avant : 44px,
       contour 2px, 0.78rem gras (2026-10-17). */
    padding: 0 12px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    background: var(--color-bg);
    min-height: 36px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

/* Icône à la taille de celle du tri (12px, .blondeau-sort > svg) */
.blondeau-new-toggle > svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.blondeau-new-toggle::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -75%;
    width: 40%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    opacity: 0;
}

.blondeau-new-toggle:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.blondeau-new-toggle:hover::before,
.blondeau-new-toggle.is-active:hover::before {
    opacity: 1;
    animation: btnShimmer 0.55s ease forwards;
}

.blondeau-new-toggle.is-active {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

.blondeau-new-toggle.is-active:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

/* ========================================================================
 * ARBRE DE CATÉGORIES
 * ======================================================================== */

.bf-category-tree {
    max-height: 320px;
    overflow-y: auto;
    /* Ajoute la gouttière scrollbar au padding hérité de .bf-filter-body
       (0.8rem) au lieu de l'écraser, pour garder un inset symétrique
       avec le padding gauche. */
    padding-right: calc(0.8rem + 6px);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.bf-category-tree::-webkit-scrollbar { width: 4px; }
.bf-category-tree::-webkit-scrollbar-track { background: transparent; }
.bf-category-tree::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.bf-category-item {
    margin: 4px 0;
}

.bf-category-item.level-0 {
    font-weight: 600;
    margin-top: 8px;
}

.bf-category-item.level-1 { padding-left: 16px; }
.bf-category-item.level-2 { padding-left: 32px; }
.bf-category-item.level-3 { padding-left: 48px; }

/* ========================================================================
 * BF-FILTER-BODY — retour aux couleurs sombres d'origine
 * (le contenu du filtre est sur fond blanc, plus sur fond navy —
 * les états actifs restent en doré, déjà lisibles sur blanc)
 * ======================================================================== */

/* Navy, pas gris — même couleur que .blc-swatch-label du calculateur
   (getComputedStyle vérifié le 2026-09-13 : rgb(28,31,59), pas muted). */
.bf-filter-body .bf-color-label {
    color: var(--color-primary);
}

.bf-filter-body .bf-color-item .bf-color-swatch {
    border-color: rgba(0, 0, 0, 0.15);
}

.bf-filter-body .bf-color-swatch--empty {
    background: repeating-linear-gradient(
        45deg,
        var(--color-border),
        var(--color-border) 2px,
        var(--color-bg) 2px,
        var(--color-bg) 6px
    );
}

.bf-filter-body .bf-icon-item {
    color: var(--color-text-muted);
}

/* DETTE — l'état actif reposait sur un voile quasi invisible sur fond
   blanc (rgba(255,255,255,.08) hérité du contexte navy, puis --color-bg-alt
   #F8F7F5 : à peine 2% plus sombre que le blanc de la carte). Un tissu
   déjà sélectionné ne se distinguait pas d'un tissu simplement survolé. */
.bf-filter-body .bf-icon-item.is-active,
.bf-filter-body .bf-icon-item:has(input:checked) {
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-accent-text);
    font-weight: 600;
}

/* Listes à cases (Marque, Motif, Composition, Origine, Normes, Favoris)
   — même correctif : le texte doré seul (2.31:1 sur blanc, DETTE-91)
   ne suffit pas à signaler « déjà sélectionné ». */
.bf-filter-body .bf-list label.is-active,
.bf-filter-body .bf-list label:has(input:checked) {
    color: var(--color-accent-text);
    font-weight: 700;
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    border-radius: 6px;
    padding-left: 6px;
    margin-left: -6px;
}

/* Swatch couleur — l'anneau doré autour du rond reste visible tel quel ;
   seul le libellé texte a besoin du même correctif de contraste. */
.bf-filter-body .bf-color-item.is-active .bf-color-label,
.bf-filter-body .bf-color-item:has(input:checked) .bf-color-label {
    color: var(--color-accent-text);
}

/* Catégorie actuellement parcourue — aucune règle n'existait : le lien
   actif se confondait avec les autres catégories de la liste. */
.bf-category-item.is-active > a,
.bf-category-item.is-active > span {
    color: var(--color-accent);
    font-weight: 700;
}
.bf-filter-body .bf-category-item.is-active > a,
.bf-filter-body .bf-category-item.is-active > span {
    color: var(--color-accent-text);
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    border-radius: 6px;
    padding: 1px 6px;
    margin-left: -6px;
}

.bf-filter-body .bf-range-track {
    background: var(--color-border);
}

.bf-filter-body .bf-range-label {
    color: var(--color-text-muted);
}

.bf-filter-body .bf-range-input {
    border-color: var(--color-field-border);
}

.bf-filter-body .bf-range-sep {
    color: var(--color-border);
}

.bf-filter-body .bf-inline-item {
    border-color: var(--color-border);
}

.bf-category-tree.bf-filter-body {
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

.bf-category-tree.bf-filter-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}

/* ========================================================================
 * LOADER AJAX — Overlay spinner pendant les requêtes AJAX
 * ======================================================================== */

.bf-loader-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.4);
}

.bf-loader-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(28, 31, 59, 0.12);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: bf-spin 0.7s linear infinite;
}

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

/* ========================================================================
 * FILTRES ACTIFS — Tags cliquables en haut des résultats
 * ======================================================================== */

.blondeau-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.blondeau-active-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    color: var(--color-text-inverse);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    padding: 0.25rem 0.55rem;
    border-radius: 0;
    transition: background 0.18s ease, color 0.18s ease;
}

.blondeau-active-filter-tag:hover {
    background: var(--color-bg);
    color: var(--color-primary);
}

.blondeau-active-filter-tag__remove {
    font-size: 0.9rem;
    line-height: 1;
    font-weight: 400;
    opacity: 0.75;
}

/* ========================================================================
 * FEUILLE MOBILE — TOUT LE CONTENU RESPONSIVE (≤1024px)
 * ------------------------------------------------------------------------
 * Volontairement en toute fin de fichier : à spécificité égale, la dernière
 * règle du fichier gagne la cascade. Un bloc identique placé plus haut (avant
 * .bf-category-item, .bf-color-grid @600px, etc. définis plus loin) se
 * faisait annuler par ces règles de base qui arrivaient APRÈS lui dans le
 * fichier — DETTE-CSS-ORDER, ex. la hauteur des lignes de catégorie qui ne
 * correspondait jamais à celle des options du calculateur malgré un correctif
 * en apparence correct. Toute nouvelle règle mobile doit être ajoutée ICI,
 * pas remontée plus haut dans le fichier.
 *
 * Référence exacte : blondeau/assets/css/calculator.css (thème), section
 * « FILTRES TISSU — bouton unique + panneau à accordéon », approuvée par
 * Pietro le 2026-09-10. Valeurs vérifiées par getComputedStyle() le
 * 2026-09-13/14, pas à l'œil.
 * ======================================================================== */
@media (max-width: 1024px) {

    .blondeau-catalog__layout {
        grid-template-columns: 1fr;
    }

    /* La sidebar (sticky, fond marine) devient une feuille blanche glissée
       depuis le bas — même habillage que .blc-filters-panel du calculateur.
       Le contenu (accordéons, listes, sliders) est recoloré ci-dessous car
       il hérite par défaut du thème sombre de la sidebar desktop. */
    .blondeau-catalog__filters {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        /* Jamais sous l'en-tête collant (BUG-387, WCAG 2.4.11) : hauteur
           plafonnée au bas réel du header (--blc-sticky-offset, main.js). */
        max-height: min(84vh, calc(100vh - var(--blc-sticky-offset, var(--header-total-height, 123px)) - 12px));
        border-radius: 18px 18px 0 0;
        background: #fff;
        color: var(--color-primary);
        box-shadow: 0 -14px 30px -8px rgba(28, 31, 59, 0.3);
        transform: translateY(102%);
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        z-index: 150; /* sous .site-header (--z-sticky:200) */
        padding: 0;
    }

    .blondeau-catalog__filters.is-open {
        transform: translateY(0);
    }

    .blondeau-catalog__filters-scrim.is-open {
        display: block;
    }

    /* Zone de préhension généreuse (28px, cible tactile) — seule une barre
       36×4 y est dessinée via ::after, pour ne pas agrandir visuellement
       la poignée. touch-action:none : le glisser-déposer (initSheetDrag,
       catalog-filters.js) gère lui-même le défilement vertical, sans que
       le geste tactile natif de la page ne vienne le concurrencer. */
    .bf-sheet-handle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 28px;
        margin: 0;
        flex-shrink: 0;
        touch-action: none;
        cursor: grab;
    }
    .bf-sheet-handle::after {
        content: '';
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--color-border);
    }
    .bf-sheet-handle:active {
        cursor: grabbing;
    }

    .bf-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 16px 10px;
        border-bottom: 1px solid var(--color-border);
        font-size: 0.875rem; /* 14px — même taille que .blc-filters-panel__head */
        font-weight: 700;
        color: var(--color-primary);
        flex-shrink: 0;
    }

    /* Même convention que .exit-modal__close / .fav-login-modal__close
       (main.css) : pas de fond par défaut, juste l'icône — toutes les
       modales du site suivent ce principe, la feuille de filtres n'a pas
       de raison d'avoir un rond gris permanent. */
    .bf-sheet-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* 36 px : taille de .exit-modal__close (était 28 px) — 2026-10-15 */
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: transparent;
        color: var(--color-text-muted);
        cursor: pointer;
        transition: background var(--transition-fast), color var(--transition-fast);
    }
    .bf-sheet-close:hover {
        background: var(--color-bg-alt);
        color: var(--color-primary);
    }

    .blondeau-catalog-filters {
        padding: 0 16px;
    }

    .bf-scroll-area {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    /* « Nouveautés » intégré à la feuille — copie exacte de
       .blondeau-new-toggle (même classe), affichée en pleine largeur en
       tête de liste plutôt qu'en pastille de toolbar. */
    .bf-quick-toggle {
        display: block;
        margin-bottom: 14px;
    }
    .blondeau-new-toggle--sheet {
        display: flex;
        width: 100%;
    }

    /* L'indice de scroll (dégradé collé en bas de la zone) s'estompait
       vers le marine de la sidebar desktop — sur la feuille blanche
       mobile, il doit s'estomper vers du blanc, sinon il dessine une
       bande grise flottante sans rapport avec le fond. */
    .bf-scroll-area::after {
        background: linear-gradient(to bottom, transparent, #fff 92%);
    }

    /* Pied de feuille — même structure que .blc-filters-panel__foot du
       calculateur : ligne horizontale (lien Réinitialiser à gauche, bouton
       plein flex:1 à droite), au lieu des deux boutons pleine largeur
       empilés du sidebar desktop. */
    .bf-actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 0 16px;
        margin-top: 4px;
        border-top-color: var(--color-border);
    }
    /* Réinitialiser : bouton plein doré, valeurs exactes de
       .blc-filters-panel__resetlink (calculator.css du thème + du plugin) —
       un simple lien ici, un bouton dans le calculateur (DETTE-374,
       2026-10-19). Toute évolution est à répercuter aux deux endroits. */
    .bf-btn-reset {
        order: 1;
        width: auto;
        flex-shrink: 0;
        min-height: 44px;
        padding: 10px 16px;
        border: none;
        border-radius: var(--radius-md, 6px);
        background: var(--color-accent, #CCA63B);
        color: var(--color-primary, #1C1F3B);
        font-size: 0.8rem;
        font-weight: 700;
        transition: background 0.15s, color 0.15s;
    }
    .bf-btn-reset:hover {
        background: var(--color-primary, #1C1F3B);
        color: #fff;
    }
    .bf-btn-filter {
        order: 2;
        flex: 1;
        width: auto;
        min-height: 44px;
        padding: 10px 16px;
        text-transform: none;
        letter-spacing: normal;
        font-size: 0.8rem;
        border-radius: var(--radius-md, 6px);
        /* Le bouton desktop (sidebar) est doré plein par défaut — ici,
           même défaut/survol que .blc-filters-panel__apply : navy plein,
           doré au survol/tap. */
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: #fff;
    }
    .bf-btn-filter:hover {
        background: var(--color-accent);
        border-color: var(--color-accent);
        color: var(--color-primary);
    }

    /* Recolorisation feuille blanche (le reste du fichier stylise la
       sidebar desktop sur fond marine — cf. .blondeau-catalog__filters
       plus haut, background: var(--color-primary)). */
    .blondeau-filter { border-bottom-color: var(--color-border); }
    .blondeau-filter summary { color: var(--color-primary); }
    .bf-range-track { background: var(--color-border); }
    .bf-range-label { color: var(--color-text-muted); }
    .bf-range-sep { color: var(--color-border-dark); }
    .bf-range-input-wrap .bf-range-input { border-color: var(--color-field-border); color: var(--color-primary); }
    .bf-inline-item { border-color: var(--color-border); }

    /* Titres de section — taille/graisse/casse exactes de .blc-filters-acc__head */
    .blondeau-filter summary {
        font-size: 0.82rem;
        font-weight: 700;
        text-transform: none;
        letter-spacing: normal;
        padding: 11px 10px;
    }
    /* Chevron — même glyphe que .blc-filters-acc__chev (▾, 0.68rem, gris
       muted, hérite du 700 du <summary>) plutôt que le triangle dessiné en
       bordure (technique différente, taille/couleur différentes). */
    .blondeau-filter summary::after {
        content: "\25BE";
        width: auto;
        height: auto;
        border: none;
        font-size: 0.68rem;
        color: var(--color-text-muted);
        opacity: 1;
        transform: none;
    }
    .blondeau-filter[open] summary::after {
        transform: rotate(180deg);
    }

    /* Sections — plus d'espacement en trop (padding-bottom + margin-bottom
       hérités du sidebar navy), plus d'encart blanc redondant (le calculateur
       n'a pas de second fond, juste le padding de .blc-filters-acc__body). */
    .blondeau-filter {
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .bf-scroll-area > .blondeau-filter:last-of-type {
        margin-bottom: 0;
    }
    .bf-filter-body {
        background: none;
        border-radius: 0;
        padding: 2px 10px 14px;
    }
    .blondeau-filter[open] > .bf-filter-collapse {
        margin-top: 0;
    }

    /* Texte des options (marque, motif, catégorie, usage, entretien, swatch)
       — taille/graisse/couleur exactes de .blc-filter-option / .blc-swatch-label */
    .bf-list label,
    .bf-category-item a,
    .bf-category-item > span,
    .bf-icon-item span,
    .bf-color-label {
        font-size: 0.83rem;
        font-weight: 400;
        color: var(--color-primary);
    }
    /* .bf-icon-item .bf-count / .bf-category-item .bf-count : le compteur
       est un <span> imbriqué dans le <span>/<a> de libellé ci-dessus — même
       spécificité (une classe + un tag) que « .bf-icon-item span » ou
       « .bf-category-item > span », donc il faut la citer explicitement
       pour ne pas hériter à tort de la taille/couleur du libellé. */
    .bf-count,
    .bf-icon-item .bf-count,
    .bf-category-item .bf-count {
        font-size: 0.6rem;
        font-weight: 400;
        color: var(--color-text-muted);
        margin-left: 2px;
    }

    /* Zone cliquable des lignes d'option — .blc-filter-option est un
       <button>, qui reçoit la cible tactile WCAG 44px injectée sitewide sur
       les boutons (main.css) ; .bf-list label / .bf-category-item > a
       n'étant pas des <button>, ils restaient à leur hauteur de contenu
       naturelle (~39px) — d'où l'écart de hauteur Catégorie / Type. */
    .bf-list label,
    .bf-category-item > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 9px 12px 9px 9px;
        border-left: 3px solid transparent;
        border-radius: 6px;
        margin: 0;
        min-height: 44px;
        box-sizing: border-box;
    }
    .bf-category-item > span {
        display: flex;
        align-items: center;
        padding: 9px 12px;
        min-height: 44px;
        box-sizing: border-box;
    }
    .bf-list label:hover,
    .bf-category-item > a:hover {
        background: color-mix(in srgb, var(--color-accent) 8%, transparent);
    }
    .bf-list {
        gap: 2px;
    }
    /* Catégories — même espacement que .blc-filters-opt-list (gap 2px,
       aucune marge de « section » sur le premier niveau) : la marge
       4px/8px du sidebar desktop (arbre à hiérarchie visuelle) ne
       s'applique plus, et level-0 perd son gras — toutes les options sont
       au même poids que dans le calculateur, seul l'état actif est en gras. */
    .bf-category-item {
        margin: 0 0 2px;
    }
    .bf-category-item.level-0 {
        font-weight: 400;
        margin-top: 0;
    }

    /* Couleurs — même grille que .blc-filters-opt-grid : 2 colonnes fixes
       (la règle @600px plus haut dans ce fichier la repassait en 1 colonne),
       gap identique, rond de 16px (au lieu de 14px), ligne cliquable 44px. */
    .bf-color-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2px 8px;
        padding-left: 0;
    }
    label.bf-color-item {
        padding: 7px 6px;
        border-radius: 6px;
        gap: 8px;
        min-height: 44px;
        box-sizing: border-box;
    }
    .bf-color-item:hover {
        background: color-mix(in srgb, var(--color-accent) 8%, transparent);
    }
    .bf-color-item .bf-color-swatch {
        width: 16px;
        height: 16px;
    }

    /* ── État « sélectionné » — même formule partout (fond doré 18%, liseré
       3px, texte accessible, gras) : Catégorie, Marque, Motif, Composition,
       Origine, Normes, Favoris, Usage, Entretien reçoivent tous le même
       traitement. La coche ✓ ne s'ajoute QUE pour les catégories (simples
       liens, sans case à cocher) — pour .bf-list, la case déjà visible
       (native, accent doré) affiche elle-même sa propre coche : ajouter
       un ✓ à droite faisait doublon. Le calculateur n'a pas ce problème,
       ses options n'étant jamais des cases à cocher. */
    .bf-list label.is-active,
    .bf-list label:has(input:checked),
    .bf-category-item.is-active > a {
        background: color-mix(in srgb, var(--color-accent) 18%, transparent);
        border-left-color: var(--color-accent);
        color: var(--color-accent-text);
        font-weight: 700;
    }
    .bf-category-item.is-active > a::after {
        content: '\2713';
        flex-shrink: 0;
        margin-left: 8px;
        color: var(--color-accent-text);
        font-weight: 700;
    }
    .bf-icon-item.is-active,
    .bf-icon-item:has(input:checked) {
        background: color-mix(in srgb, var(--color-accent) 18%, transparent);
        border-color: var(--color-accent);
        color: var(--color-accent-text);
        font-weight: 700;
    }
    .bf-color-item.is-active .bf-color-swatch,
    .bf-color-item:has(input:checked) .bf-color-swatch {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
        transform: scale(1.1);
    }
    .bf-color-item.is-active,
    .bf-color-item:has(input:checked) {
        background: color-mix(in srgb, var(--color-accent) 18%, transparent);
    }
    .bf-color-item.is-active .bf-color-label,
    .bf-color-item:has(input:checked) .bf-color-label {
        color: var(--color-accent-text);
        font-weight: 700;
    }

    .blondeau-catalog__mobile-filters {
        display: contents;
    }

    /* Filtrer + Tri : une ligne quand ils tiennent, sinon chacun sur sa
       ligne en pleine largeur (Filtrer puis Tri) — même disposition que la
       barre des tissus du calculateur en mobile (calculator.css thème,
       .blc-filters-bar). La pastille de tri commune (.blondeau-sort,
       2026-10-17), en capitales, ne tient plus à côté de « Filtrer » à
       320px ; l'ordre visuel reste celui du DOM (ordre de tabulation,
       WCAG 2.4.3). Remplace l'ancien réglage (une seule ligne, défilement
       horizontal en filet de sécurité). */
    .blondeau-catalog__toolbar {
        gap: 10px 6px;
        flex-wrap: wrap;
    }

    .blondeau-catalog-toolbar__count {
        display: none;
    }

    /* .blondeau-catalog__mobile-filters passe en display:contents : la
       croissance est posée sur le bouton lui-même, pas sur ce conteneur. */
    .blondeau-catalog__filters-trigger {
        flex: 1 0 auto;
        justify-content: center;
    }
    .blondeau-catalog-toolbar__sort {
        flex: 1 0 auto;
    }
    .blondeau-catalog-toolbar__sort .blondeau-sort {
        width: 100%;
    }

    /* « Nouveautés » casse la ligne Filtrer/Tri une fois son badge combiné
       aux autres pastilles — la toolbar ne garde que Filtrer + Tri en
       mobile, « Nouveautés » est repris dans la feuille (.bf-quick-toggle),
       copie exacte de .blondeau-new-toggle. */
    .blondeau-catalog-toolbar__new {
        display: none;
    }

    /* Plafond max-width:30vw retiré (2026-10-01) : il tronquait le libellé
       du tri à 320px (« Ordre par défa… », 96px dispo pour 109px). Filtrer +
       Tri tiennent sur une ligne sans lui (278px max pour 288px utiles). */
    .blondeau-catalog-toolbar__sort .blondeau-sort select { /* pastille commune, 2026-10-17 : toute la largeur cliquable */
        width: 100%;
        max-width: none;
    }

    .blondeau-catalog__results {
        order: 1;
    }

    /* 3 colonnes réservées à la tablette (601-1024px). Sans la condition
       min-width, cette règle — placée APRÈS le bloc ≤600px (l.~988) à
       spécificité égale — gagnait aussi sur téléphone : 3 colonnes dans la
       place de 2, 3e carte de chaque ligne coupée (débordement de 84px à
       375px). Même piège que DETTE-CSS-ORDER — corrigé le 2026-10-01. */
    @media (min-width: 601px) {
        .blondeau-catalog ul.products.columns-4 {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}