/* ==========================================================================
   LISTE DE PRODUITS — catégories, marques automobiles, recherche, sélections
   Gabarit : templates/commun/liste/liste.html.twig ; cartes : commun/produit/carte.html.twig
   ========================================================================== */

.liste__titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-4); }
.liste__total { font-family: var(--f-mono); font-size: var(--t-3); font-weight: 700; letter-spacing: 0; color: var(--md-encre-3); }

/* sous-familles : les sœurs de la catégorie, en jetons */
.sous-familles { margin-top: var(--e-5); }
.sous-familles li { list-style: none; }
a.jeton { text-decoration: none; }
.jeton[aria-current="true"] { background: var(--nuit); border-color: var(--nuit); color: var(--md-papier); }
.jeton[aria-current="true"] .jeton__n { color: var(--accent-sur-nuit); }
@media (max-width: 760px) {
  .sous-familles .jetons { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--e-2); scrollbar-width: none; }
  .sous-familles .jeton { white-space: nowrap; }
}

/* ------------------------------------------------------------ mise en page */
.liste__corps { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: var(--e-6); align-items: start; }
@media (max-width: 960px) { .liste__corps { grid-template-columns: minmax(0, 1fr); gap: var(--e-4); } }

/* ------------------------------------------------------------------ filtres */
.filtres { position: sticky; top: calc(var(--h-entete) + var(--wp-admin--admin-bar--height, 0px) + var(--e-4)); }
/* sticky = plan d'empilement propre : sans z-index, le panneau d'une liste de choix passe sous les cartes */
.filtres { z-index: 5; }
@media (max-width: 960px) { .filtres { position: static; } }
.filtres__panneau { background: var(--md-papier); border: var(--trait-1) solid var(--md-trait); border-radius: var(--rayon-2); }
.filtres__titre {
  display: flex; align-items: center; gap: var(--e-2); padding: var(--e-4) var(--e-5); cursor: pointer; list-style: none;
  font-family: var(--f-mono); font-size: var(--t-0); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.filtres__titre::-webkit-details-marker { display: none; }
.filtres__contenu { display: grid; gap: var(--e-5); padding: var(--e-5); border-top: var(--trait-1) solid var(--md-trait); }
.filtres__groupe { display: grid; gap: var(--e-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.filtres__groupe legend { margin-bottom: var(--e-2); padding: 0; }
.filtres__groupe .case { width: 100%; padding: var(--e-1) 0; }
.filtres__aide { padding-top: var(--e-4); border-top: var(--trait-1) dashed var(--md-trait); color: var(--md-encre-2); font-size: var(--t-1); }
.filtres__aide p { margin-bottom: var(--e-2); }

/* ---------------------------------------------------------- barre d'outils */
.resultats__outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-4); }
.resultats__compte { margin: 0; color: var(--md-encre-2); font-size: var(--t-1); font-weight: 600; }
.resultats__reglages { display: flex; align-items: center; gap: var(--e-3); }
.resultats__reglages .liste-deroulante { width: auto; min-width: 210px; }
.bascule { display: flex; gap: 2px; padding: 3px; background: var(--md-papier); border: var(--trait-1) solid var(--md-trait-2); border-radius: var(--rayon-2); }
.bascule__bouton { display: grid; place-items: center; width: 36px; height: 34px; border: 0; border-radius: var(--rayon-1); background: transparent; color: var(--md-encre-3); cursor: pointer; }
.bascule__bouton:hover { color: var(--md-encre); }
.bascule__bouton[aria-pressed="true"] { background: var(--nuit); color: var(--md-papier); }

/* ------------------------------------------------------------------ grille */
.grille-produits, .resultats__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--e-4); }

.carte-produit__stock { display: inline-flex; align-items: center; gap: var(--e-2); margin: var(--e-1) 0 0; font-size: var(--t-0); font-weight: 700; }
.carte-produit__stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.carte-produit__stock[data-stock="ok"] { color: var(--etat-ok); }
.carte-produit__stock[data-stock="attente"] { color: #B45309; }
.carte-produit__pied { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-2); margin-top: auto; padding-top: var(--e-3); }
.carte-produit__pied .carte-produit__prix { margin: 0; padding: 0; }
/* au-dessus du lien qui couvre la carte, sinon le bouton ne reçoit jamais le clic */
.carte-produit__ajout {
  position: relative; z-index: 1; flex: none;
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: var(--rayon-1); background: var(--bouton-fond); color: var(--bouton-texte); cursor: pointer;
}
.carte-produit__ajout:hover { background: var(--bouton-fond-survol); color: var(--bouton-texte-survol); }

/* affichage en lignes (bascule [data-vue] de design.js) : une ligne par produit,
   photo à gauche, puis référence, désignation et famille, prix, ajout au panier */
[data-resultats][data-affichage="lignes"] { grid-template-columns: minmax(0, 1fr); gap: var(--e-2); }
[data-resultats][data-affichage="lignes"] .carte-produit { flex-direction: row; align-items: stretch; }
[data-resultats][data-affichage="lignes"] .carte-produit__visuel { flex: none; width: 104px; aspect-ratio: 1; padding: var(--e-2); border-bottom: 0; border-right: var(--trait-1) solid var(--md-trait); }
[data-resultats][data-affichage="lignes"] .carte-produit__visuel .etiquette { top: 4px; left: 4px; transform: scale(.8); transform-origin: top left; }
[data-resultats][data-affichage="lignes"] .carte-produit__visuel .etiquette--destockage { top: auto; bottom: 4px; transform-origin: bottom left; }
[data-resultats][data-affichage="lignes"] .carte-produit__dispo { top: 4px; right: 4px; transform: scale(.8); transform-origin: top right; }
[data-resultats][data-affichage="lignes"] .carte-produit__corps {
  display: grid; flex: 1; min-width: 0; align-items: center; gap: var(--e-1) var(--e-5); padding: var(--e-3) var(--e-5);
  grid-template-columns: 130px minmax(0, 1fr) auto auto;
  grid-template-areas: "ref nom prix panier" "ref famille prix panier";
}
[data-resultats][data-affichage="lignes"] .carte-produit__ref { grid-area: ref; }
[data-resultats][data-affichage="lignes"] .carte-produit__nom { grid-area: nom; align-self: end; font-size: var(--t-2); }
[data-resultats][data-affichage="lignes"] .carte-produit__famille { grid-area: famille; align-self: start; }
[data-resultats][data-affichage="lignes"] .carte-produit__prix, [data-resultats][data-affichage="lignes"] .carte-produit__inactive, [data-resultats][data-affichage="lignes"] .carte-produit__reserve { grid-area: prix; margin: 0; padding: 0; }
[data-resultats][data-affichage="lignes"] .carte-produit__panier { grid-area: panier; }
[data-resultats][data-affichage="lignes"] .carte-produit__panier form.cart { margin: 0; }
[data-resultats][data-affichage="lignes"] .carte-produit__panier .single_add_to_cart_button { min-width: 120px; }
@media (max-width: 760px) {
  [data-resultats][data-affichage="lignes"] .carte-produit__corps {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "ref prix" "nom nom" "famille famille" "panier panier";
  }
  [data-resultats][data-affichage="lignes"] .carte-produit__nom { font-size: var(--t-1); }
}

/* -------------------------------------------------------------- pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--e-2); margin-top: var(--e-7); }
.pagination__liste { display: flex; gap: var(--e-2); list-style: none; }
.pagination__lien {
  display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 var(--e-2);
  border: var(--trait-1) solid var(--md-trait-2); border-radius: var(--rayon-1); background: var(--md-papier);
  color: var(--md-encre); text-decoration: none; font-weight: 700; font-variant-numeric: tabular-nums;
}
.pagination__lien:hover { border-color: var(--md-encre); color: var(--md-encre); }
.pagination__liste li:first-child .pagination__lien { background: var(--nuit); border-color: var(--nuit); color: var(--md-papier); }
.pagination__lien[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.pagination__lien--precedent .icone { transform: rotate(180deg); }
@media (max-width: 520px) { .pagination__liste li:nth-child(n+4):not(:last-child) { display: none; } }

/* cartes du site réel : famille, voyant de stock, prix rendu par <ce-product-price display="card"> */
.grille-produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--e-4); }
.grille-produits:empty { display: none; }
.carte-produit__dispo { position: absolute; top: var(--e-3); right: var(--e-3); }
.carte-produit__famille { margin: 0; font-size: var(--t-0); color: var(--md-encre-3); }
.carte-produit__prix { position: relative; z-index: 1; margin-top: auto; padding-top: var(--e-3); }
.carte-produit__inactive { margin: auto 0 0; padding-top: var(--e-3); font-size: var(--t-0); font-weight: 700; color: #B45309; }
.carte-produit__reserve { margin: auto 0 0; padding-top: var(--e-3); font-size: var(--t-0); font-weight: 700; color: var(--md-encre); }
.carte-produit--inactive { opacity: .75; }
.carte-produit--inactive .carte-produit__visuel img { filter: grayscale(1); }
.etiquette[data-type]:not([data-type="original"]):not([data-type="adaptable"]) { background: var(--md-papier); color: var(--md-encre-2); box-shadow: inset 0 0 0 1px var(--md-trait-2); }
.defilant > .carte-produit { min-width: 0; }

/* compte « Affichage de 1–12 sur 632 résultats » de WooCommerce */
.resultats__compte .woocommerce-result-count { margin: 0; }
.icone--retour { transform: rotate(180deg); }
.pagination-liste { margin-top: var(--e-7); }
.pagination-liste ul.page-numbers { margin: 0; }
.page-entete .liste__titre { margin: 0 0 var(--e-3); }