/* ==========================================================================
   BOUTIQUE — port de la section 20 du design V4 : archives produit
   (boutique, catégories, marques, modèles, types, qualités, recherche).
   Chargée sur les archives (is_woocommerce() hors fiche) et sur le panier,
   pour ses ventes croisées (inc/assets.php), après composants.css, qui
   porte les primitives partagées (fil d'Ariane, stock, nombre, case,
   interrupteur, quantité, menu déroulant, carte produit et grille). La
   fiche produit a sa propre feuille, fiche.css.

   Sections 1 à 7 : l'archive (colonnes, filtres, en-tête des résultats,
   tri, chips, nombre de colonnes de la grille, pagination). Section 8 :
   les points de rupture.

   Mêmes règles que les autres feuilles : aucune valeur en dur, jetons
   :root de style.css et de composants.css, jetons locaux --bq-* pour les
   dimensions que le design écrit en dur.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. JETONS LOCAUX DE LA BOUTIQUE
   -------------------------------------------------------------------------- */
:root {
    /* Grille et filtres */
    --bq-filters-w:        260px;   /* colonne des filtres, bureau             */
    --bq-sticky-top:       104px;   /* sous le masthead collant                */
    --bq-drawer-w:         min(360px, 88vw);   /* tiroir mobile                */
    --bq-filter-caret:       8px;   /* flèche d'un groupe de filtres           */
    --bq-filter-caret-line: 1.5px;
    --bq-z-drawer:           60;
    --bq-z-backdrop:         55;

    /* En-tête des résultats */
    --bq-h1:                28px;
    --bq-h1-sm:             24px;   /* … sous 640 px                           */
    --bq-title-max-w:      640px;   /* largeur maximale de la description      */
    --bq-chip-h:            30px;   /* chip d'un filtre appliqué               */
    --bq-chip-x:            20px;   /* sa croix                                */
    --bq-dd-h:              36px;   /* bouton du tri                           */
    --bq-dd-min-w:         200px;   /* menu du tri                             */
    --bq-dd-mark:            6px;   /* point de l'option choisie               */
    --bq-dd-option-y:        9px;   /* padding vertical d'une option du tri    */


    /* Pagination */
    --bq-pager-h:           36px;
}

/* --------------------------------------------------------------------------
   1. GRILLE À DEUX COLONNES (design 20.2)
   -------------------------------------------------------------------------- */
.catalogue {
    display: grid;
    grid-template-columns: var(--bq-filters-w) minmax(0, 1fr);
    gap: var(--sp-32);
    padding: var(--sp-24) 0 var(--sp-64);
    align-items: start;
}

/* Sans facette à proposer (taxonomies absentes) : les résultats seuls. */
.catalogue--simple {
    grid-template-columns: minmax(0, 1fr);
}

/* --------------------------------------------------------------------------
   2. FILTRES (design 20.3) — barre collante sur bureau, tiroir sous 1024 px
   -------------------------------------------------------------------------- */
.filters {
    position: sticky;
    top: var(--bq-sticky-top);
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
}

/* Le formulaire est un bloc simple : dans la maquette, l'interrupteur et
   les groupes de filtres se touchent, seul le filet de .filter les sépare.
   L'écart de 8 px de .filters ne vaut qu'entre l'en-tête et le formulaire. */

.filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 var(--sp-8);
}

.filters__head h2 {
    font-size: var(--fs-15);
    font-weight: var(--fw-medium);
}

.filters__reset {
    font-size: var(--fs-12);
    color: var(--grey);
}

.filters__reset:hover {
    color: var(--action);
    text-decoration: none;
}

.filters__close {
    display: none;
}

/* Un groupe de filtres : <details> natif, flèche dessinée en CSS. */
.filter {
    border-top: var(--cp-line) solid var(--line);
}

.filter summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-12);
    padding: var(--sp-14) 0;
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    cursor: pointer;
    list-style: none;
}

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

.filter summary::after {
    content: "";
    width: var(--bq-filter-caret);
    height: var(--bq-filter-caret);
    flex: none;
    border-right: var(--bq-filter-caret-line) solid var(--grey);
    border-bottom: var(--bq-filter-caret-line) solid var(--grey);
    transform: rotate(45deg);
    transition: transform var(--ease);
}

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

.filter__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: 0 0 var(--sp-14);
}

/* Options au-delà des cinq premières : masquées par boutique.js, révélées
   par « Show N more ». Sans JavaScript, toutes visibles. */
.filter__body.is-collapsed .check--extra {
    display: none;
}

.filter__more,
.filter__more:hover,
.filter__more:focus {
    font-size: var(--fs-13);
    color: var(--action);
    background: none;
    border: 0;
    padding: var(--sp-6) var(--sp-4);
    cursor: pointer;
    text-align: left;
}

.filter__more:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   3. EN-TÊTE DES RÉSULTATS (design 20.4) — titre, chips, barre d'outils
   -------------------------------------------------------------------------- */
.results__head {
    display: flex;
    flex-direction: column;
    gap: var(--sp-16);
    margin-bottom: var(--sp-16);
}

/* Le titre et la description sont ceux de WooCommerce (loop/header.php). */
.results__title h1 {
    font-size: var(--bq-h1);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-h2);
    line-height: var(--lh-page-title);
}

.results__title p {
    margin-top: var(--sp-6);
    font-size: var(--fs-14);
    color: var(--grey);
    max-width: var(--bq-title-max-w);
    text-wrap: pretty;
}

.results__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-12);
    flex-wrap: wrap;
    padding: var(--sp-12) 0;
    border-top: var(--cp-line) solid var(--line);
    border-bottom: var(--cp-line) solid var(--line);
}

.results__count {
    font-size: var(--fs-13);
    color: var(--grey);
}

.results__count strong {
    font-weight: var(--fw-medium);
    color: var(--ink);
}

.results__tools {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
}

/* Bouton « Filters » : mobile seulement, ouvre le tiroir. */
.filters-btn {
    display: none;
}

/* Chips des filtres appliqués : une par facette, la croix retire. */
.applied {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-8);
}

.applied__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-6);
    height: var(--bq-chip-h);
    padding: 0 var(--sp-6) 0 var(--sp-10);
    border-radius: var(--pill);
    background: var(--pastel-slate-bg);
    color: var(--pastel-slate-ink);
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
}

.applied__chip a {
    width: var(--bq-chip-x);
    height: var(--bq-chip-x);
    border-radius: var(--pill);
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--ease);
}

.applied__chip a:hover {
    background: var(--chip-x-hover);
    color: inherit;
    text-decoration: none;
}

.applied__clear {
    align-self: center;
    font-size: var(--fs-12);
    color: var(--grey);
}

.applied__clear:hover {
    color: var(--action);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   4. TRI (design 20.5) — le <select> natif, puis le menu du design
   Sans JavaScript : le <select> en pilule et son bouton « Sort ». Avec :
   boutique.js le remplace par le menu (.dd de composants.css, réglé ici
   à la taille du design) et masque le bouton.
   -------------------------------------------------------------------------- */
.results__sort {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-8);
}

.results__sort-control {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.results__sort select {
    height: var(--bq-dd-h);
    padding: 0 calc(var(--sp-12) + var(--sp-14) + var(--sp-8)) 0 var(--sp-14);
    border: var(--cp-line) solid var(--line-strong);
    border-radius: var(--pill);
    background: var(--paper);
    font-family: inherit;
    font-size: var(--fs-13);
    color: var(--ink);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.results__sort-caret {
    position: absolute;
    right: var(--sp-12);
    display: flex;
    color: var(--ink);
    pointer-events: none;
}

.results__sort.has-dd .results__sort-go {
    display: none;
}

.results__sort .dd__toggle {
    display: inline-flex;
    justify-content: normal;
    width: auto;
    height: var(--bq-dd-h);
    padding: 0 var(--sp-12) 0 var(--sp-14);
    gap: var(--sp-8);
    border-radius: var(--pill);
    font-size: var(--fs-13);
    color: var(--ink);
    white-space: nowrap;
}

.results__sort .dd__toggle:hover,
.results__sort .dd__toggle:focus,
.results__sort .dd__toggle[data-filled="true"] {
    color: var(--ink);
}

.results__sort .dd__label {
    color: var(--grey);
}

.results__sort .dd__menu {
    left: auto;
    right: 0;
    min-width: var(--bq-dd-min-w);
    max-height: none;
    box-shadow: var(--shadow-lift);
}

.results__sort .dd__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-12);
    padding: var(--bq-dd-option-y) var(--sp-10);
    font-size: var(--fs-13);
}

.results__sort .dd__option[aria-selected="true"]::after {
    content: "";
    width: var(--bq-dd-mark);
    height: var(--bq-dd-mark);
    border-radius: var(--pill);
    background: var(--action);
}

/* --------------------------------------------------------------------------
   5. GRILLE DE CARTES (design 20.6) — la carte produit du thème, la même
   que sur l'accueil et dans le carrousel de la fiche
   (template-parts/product-card.php, composants.css section 5a).
   Ici, seul le nombre de colonnes : il dépend de la largeur que laisse la
   barre de filtres, donc de la page. Quatre colonnes sur une archive,
   cinq sur l'accueil (accueil.css section 10).
   -------------------------------------------------------------------------- */
.product-grid {
    /* Quatre colonnes : la barre de filtres prend 260 px de la largeur. */
    --grid-cols: 4;
}

/* --------------------------------------------------------------------------
   6. PAGINATION (design 20.7)
   -------------------------------------------------------------------------- */
.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-16);
    flex-wrap: wrap;
    margin-top: var(--sp-24);
}

.pager__info {
    font-size: var(--fs-13);
    color: var(--grey);
}

.pager__pages {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.pager__pages a,
.pager__pages span {
    min-width: var(--bq-pager-h);
    height: var(--bq-pager-h);
    padding: 0 var(--sp-10);
    border-radius: var(--pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-13);
    color: var(--ink);
    transition: background var(--ease);
}

.pager__pages a:hover {
    background: var(--chrome);
    text-decoration: none;
}

.pager__pages [aria-current] {
    background: var(--ink);
    color: var(--paper);
    font-weight: var(--fw-medium);
}

.pager__pages .dots {
    color: var(--grey);
}

/* --------------------------------------------------------------------------
   7. AUCUN RÉSULTAT : la notice de WooCommerce, seule dans la colonne.
   -------------------------------------------------------------------------- */
.woocommerce-no-products-found {
    padding: var(--sp-8) 0;
}

/* --------------------------------------------------------------------------
   8. POINTS DE RUPTURE (design 20.8)
   -------------------------------------------------------------------------- */

/* Bureau, avec JavaScript : chaque case envoie le formulaire, le bouton
   « Show results » du tiroir est inutile. Sans JavaScript, il reste. */
@media (min-width: 1025px) {

    .js .filters__apply {
        display: none;
    }

    .filters-backdrop {
        display: none;
    }
}

/* Sous 1024 px : les filtres deviennent un tiroir, les lignes se replient. */
@media (max-width: 1024px) {

    .catalogue {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .filters-btn {
        display: inline-flex;
    }

    /* Tiroir hors écran, glisse depuis la gauche. Ouvert par boutique.js
       (.is-open) ou, sans JavaScript, par l'ancre #filters (:target). */
    .filters {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: var(--bq-z-drawer);
        width: var(--bq-drawer-w);
        padding: 0 var(--sp-20) var(--sp-24);
        background: var(--paper);
        box-shadow: var(--shadow-lift);
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform var(--ease-slide);
        gap: 0;
    }

    .filters.is-open,
    .filters:target {
        transform: none;
    }

    .filters__head {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--paper);
        padding: var(--sp-16) 0 var(--sp-12);
        border-bottom: var(--cp-line) solid var(--line);
        margin-bottom: var(--sp-8);
    }

    .filters__close {
        display: flex;
        width: var(--touch);
        height: var(--touch);
        border: var(--cp-line) solid var(--line-strong);
        border-radius: var(--pill);
        background: transparent;
        color: var(--ink);
        align-items: center;
        justify-content: center;
    }

    .filters__close:hover {
        color: var(--ink);
        text-decoration: none;
    }

    .filters__apply {
        position: sticky;
        bottom: 0;
        margin-top: var(--sp-16);
        padding-top: var(--sp-12);
        background: var(--paper);
    }

    .filters__apply .btn {
        width: 100%;
    }

    .filters-backdrop {
        position: fixed;
        inset: 0;
        z-index: var(--bq-z-backdrop);
        display: block;
        background: var(--backdrop);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--ease-slide), visibility var(--ease-slide);
    }

    .filters-backdrop.is-open,
    .filters:target + .filters-backdrop {
        opacity: 1;
        visibility: visible;
    }

    /* La barre devient un tiroir : la grille reprend la largeur, mais
       reste à trois colonnes comme la maquette. */
    .product-grid {
        --grid-cols: 3;
    }
}

/* Sous 640 px : titre plus petit, lignes sur trois rangs, pilule dans la méta. */
@media (max-width: 640px) {

    .results__title h1 {
        font-size: var(--bq-h1-sm);
    }

    /* Deux cartes par ligne, plus serrées : la maquette resserre la grille
       ET le rembourrage des cartes à 640 px, pas avant. */
    .product-grid {
        --grid-cols: 2;
        gap: var(--sp-12);
    }

    .product-card {
        padding: var(--sp-12);
    }

    .pager {
        justify-content: center;
    }

    .pager__info {
        width: 100%;
        text-align: center;
    }
}