/* L’Abritant — feuille catalogue : miniature, catégorie, nouveautés, promos, recherche, aperçu rapide (#category #search #new-products #prices-drop #best-sales #manufacturer).
   Chargée sur toutes les pages : chaque règle est limitée à l’identifiant de page porté par <body> (Hummingbird : body id = page_name).
   Uniquement des jetons var(--…), aucun !important, même couche @layer que l’original quand on redéclare Hummingbird. */

/* Design system V2 : cartes A3_MiniatureProduit, A4_ApercuRapide, B2_Categorie, B3_NouveautesListe, B4_Promos,
   B5_Recherche, B6_AucunResultat, M1_TelephoneCatalogue (sous 768 px).

   Deux sortes de règles, comme produit.css :
   1. classes des cartes (b2-*, b6-*, a3-*, a4-*, « classes locales à verser au kit ») : hors couche, comme maquettes.css ;
   2. adaptation de Hummingbird et de Bootstrap (grille .products, facettes, pagination, tiroir, modale) : dans la
      couche de l’original (bs-components, ps-components, ps-pages, ps-modules), avec un sélecteur plus précis.
   Exceptions au cadrage par page : la miniature (.a3-mini) et l’aperçu rapide (.quickview), composants affichés
   partout (accueil, rails de la fiche), limités à leur classe.

   Sommaire : §1 page et en-tête · §2 miniature · §3 grille · §4 barre d’outils, tri et critères · §5 facettes ·
   §6 filtres actifs · §7 pagination · §8 tiroir de filtres · §9 états vides · §10 aperçu rapide ·
   §11 paliers (1 200 / 992 / 768 / 480 px). */


/* §1 Page et en-tête de liste (B2 blocs 2-3) : titre et chapô à gauche, photo de 520 × 200 px à droite. */
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-page { padding-block: var(--espace-4) var(--espace-16); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-entete { margin-bottom: var(--espace-6); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tete { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espace-6) var(--espace-16); align-items: center; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tete--photo { grid-template-columns: minmax(0, 1fr) 520px; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tete__texte { min-width: 0; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tete .titre-1 { margin: 0; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.08; color: var(--texte); overflow-wrap: anywhere; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-chapo { max-width: 62ch; margin: var(--espace-3) 0 0; font: var(--text-chapo); font-size: clamp(18px, 1.5vw, 21px); color: var(--texte-doux); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-chapo p { margin: 0; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-chapo p + p { margin-top: var(--espace-2); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-photo { height: 200px; border-radius: var(--rayon-m); overflow: hidden; background: var(--toile-fonce); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-description { max-width: 66ch; margin-top: var(--espace-6); font: var(--text-corps); }

/* Sous-catégories en pastilles de 44 px (pg-souscat) */
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-souscats { margin-top: var(--espace-6); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-souscats__liste { gap: 6px; margin: 0; padding: 0; list-style: none; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-souscat { min-height: var(--cible-min); box-sizing: border-box; padding: 0 11px; font-size: 13px; color: var(--texte); text-decoration: none; transition: background-color .12s ease-out, border-color .12s ease-out; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-souscat:hover { border-color: var(--graphite); background: var(--jaune-pale); color: var(--graphite); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-souscat:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }

/* Listing : filtres à gauche (pg-listing), liste à droite */
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-liste__principal { min-width: 0; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-facettes { min-width: 0; }


/* §2 Miniature produit (A3, kit « pg-mini ») : partout où elle s’affiche, limitée à .a3-mini.
   Le nom couvre la carte (lien étendu) ; aperçu rapide, formulaire et boutons passent au-dessus. */
.a3-mini { height: 100%; box-sizing: border-box; transition: border-color .15s ease-out, box-shadow .15s ease-out; }
.a3-mini:hover, .a3-mini:focus-within { border-color: var(--trait-fort); box-shadow: var(--ombre-flottante); }
.a3-mini p, .a3-mini .pg-mini__titre { margin: 0; }
.a3-mini .pg-ico { flex: none; }
.a3-mini .pg-mini__visuel { background: var(--blanc); }
.a3-image { display: block; width: 100%; height: 100%; object-fit: contain; }

.a3-lien { color: var(--texte); text-decoration: none; overflow-wrap: anywhere; }
.a3-lien::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.a3-mini:hover .a3-lien, .a3-mini:focus-within .a3-lien { color: var(--texte); text-decoration: underline; text-decoration-thickness: var(--trait-moyen); text-underline-offset: 3px; }
.a3-lien:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }

.a3-stock { align-items: flex-start; }
.a3-stock svg { margin-top: 2px; }
.a3-delai { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 18px; color: var(--texte-doux); }
.a3-delai svg { margin-top: 1px; }

.a3-prix { justify-content: flex-end; }
.a3-prix__montants { display: grid; justify-items: end; text-align: right; }
.a3-prix-ref { overflow-wrap: anywhere; }
.a3-panier { margin: 0; }
.a3-panier, .a3-action, .a3-mini .product-list-review { position: relative; z-index: 2; }
.a3-mini .a3-action { width: 100%; white-space: normal; text-align: center; }

/* Aperçu rapide (accessoires seulement) : visible au survol et au clavier, icône seule au doigt */
.a3-mini .a3-apercu { z-index: 2; display: flex; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .15s ease-out, transform .15s ease-out; }
.a3-mini:hover .a3-apercu, .a3-mini:focus-within .a3-apercu { opacity: 1; transform: none; pointer-events: auto; }
.a3-mini .a3-apercu__bouton { width: 100%; background: var(--blanc); }
@media (hover: none) {
  .a3-mini .a3-apercu { left: auto; opacity: 1; transform: none; pointer-events: auto; }
  .a3-mini .a3-apercu__bouton { width: var(--cible-min); padding: 0; }
  .a3-apercu__texte { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .a3-mini, .a3-mini .a3-apercu { transition: none; }
}

/* Étiquettes (ab-etiquette) posées sur le visuel : la liste de Hummingbird ne prend plus toute la largeur */
@layer ps-components {
  .product-miniature .product-flags.pg-mini__etiquettes { right: var(--espace-3); width: auto; margin: 0; padding: 0; list-style: none; }
}


/* §3 Grille : 3 miniatures avec filtres, 4 sans (B3) ; 2 sous 1 200 px (3 sans filtres) ; 2 sous 992 px ; 1 sous 480 px. */
@layer ps-components {
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #js-product-list .products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-6); }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-liste--pleine #js-product-list .products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* §4 Barre d’outils (B2 bloc 5) : nombre, « Filtrer » (téléphone), tri, critères de classement. */
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-outils { flex-wrap: wrap; margin-bottom: var(--espace-4); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-compte { margin: 0; font: var(--text-corps); color: var(--texte); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-outils__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tri { display: flex; align-items: center; gap: var(--espace-3); font-size: 14px; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tri__lib { color: var(--texte-doux); white-space: nowrap; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tri__menu { position: relative; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tri__bouton { min-height: var(--cible-min); font-family: var(--font-texte); color: var(--texte); cursor: pointer; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tri__bouton:hover { border-color: var(--graphite); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tri__bouton:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }

@layer bs-components {
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tri__options { --bs-dropdown-bg: var(--blanc); --bs-dropdown-color: var(--texte); --bs-dropdown-border-color: var(--graphite); --bs-dropdown-border-width: var(--trait-moyen); --bs-dropdown-border-radius: var(--rayon-s); --bs-dropdown-box-shadow: var(--ombre-flottante); --bs-dropdown-link-color: var(--texte); --bs-dropdown-link-hover-color: var(--graphite); --bs-dropdown-link-hover-bg: var(--jaune-pale); --bs-dropdown-link-active-color: var(--graphite); --bs-dropdown-link-active-bg: var(--jaune-pale); min-width: 100%; }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tri__options .dropdown-item { display: flex; align-items: center; min-height: var(--cible-min); padding-inline: var(--espace-4); font-size: 15px; white-space: normal; }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tri__options .dropdown-item.current { font-weight: 600; box-shadow: inset var(--trait-hauban) 0 0 var(--graphite); }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tri__options .dropdown-item:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: -3px; }
}

/* « Filtrer » : seulement sous 768 px (tiroir, §11) */
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-filtrer { display: none; }

/* « Critères de classement » (pg-criteres) : panneau dépliant sous le lien */
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-criteres { position: relative; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-criteres__lien { display: inline-flex; align-items: center; min-height: var(--cible-min); cursor: pointer; list-style: none; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-criteres__lien::-webkit-details-marker { display: none; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-criteres__lien:hover { color: var(--texte); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-criteres__lien:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-criteres[open] .b2-criteres__lien { color: var(--texte); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-criteres__panneau { position: absolute; top: 100%; right: 0; z-index: 30; box-sizing: border-box; width: min(380px, calc(100vw - 32px)); padding: var(--espace-4); background: var(--blanc); border: var(--trait-moyen) solid var(--graphite); border-radius: var(--rayon-m); box-shadow: var(--ombre-flottante); font-size: 14px; line-height: 20px; color: var(--texte); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-criteres__panneau p { margin: 0 0 var(--espace-2); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-criteres__panneau dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--espace-1) var(--espace-2); margin: 0; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-criteres__panneau dt { font-weight: 600; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-criteres__panneau dd { margin: 0; color: var(--texte-doux); }


/* §5 Facettes (module ps_facetedsearch, gabarit de Hummingbird) habillées en « pg-facettes » :
   panneau blanc, tête « Filtrer par » + « Effacer tout », plis de 52 px, lignes de 44 px, compteurs en mono. */
@layer ps-modules {
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0; background: var(--blanc); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-m); }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters .left-block__title { grid-column: 1; margin: 0; padding: var(--espace-4); font: 600 17px/22px var(--font-texte); color: var(--texte); }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters .search-filters__clear { grid-column: 2; order: 0; margin: 0; padding: var(--espace-1) var(--espace-2); }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters .search-filters__clear .btn { --bs-btn-color: var(--texte); --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-color: var(--graphite); --bs-btn-hover-bg: var(--jaune-pale); --bs-btn-hover-border-color: transparent; --bs-btn-active-color: var(--graphite); --bs-btn-active-bg: var(--jaune-pale); --bs-btn-active-border-color: transparent; --bs-btn-padding-x: var(--espace-2); --bs-btn-font-weight: 600; min-height: var(--cible-min); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters .search-filters__clear .btn:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; box-shadow: none; }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters > .accordion { grid-column: 1 / -1; border-top: var(--trait-moyen) solid var(--graphite); --bs-accordion-bg: transparent; --bs-accordion-btn-bg: transparent; --bs-accordion-btn-color: var(--texte); --bs-accordion-active-bg: var(--jaune-pale); --bs-accordion-active-color: var(--graphite); --bs-accordion-btn-focus-box-shadow: none; }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters .accordion-item { border: 0; border-bottom: var(--trait-fin) solid var(--trait); background: transparent; }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters .accordion-item:last-child { border-bottom: 0; }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters .accordion-button { width: 100%; min-height: 52px; margin: 0; padding: var(--espace-3) var(--espace-4); font: 600 15px/20px var(--font-texte); color: var(--texte); background: transparent; border-radius: 0; }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters .accordion-button:not(.collapsed) { background: var(--jaune-pale); box-shadow: inset 0 calc(-1 * var(--trait-moyen)) 0 var(--graphite); }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters .accordion-button:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: -3px; }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters .accordion-body { margin: 0; padding: var(--espace-2) var(--espace-4) var(--espace-3); list-style: none; }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters .search-filters__item { display: flex; align-items: center; min-height: var(--cible-min); }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters .search-filters__form-check { width: 100%; min-height: var(--cible-min); margin: 0; gap: var(--espace-2); }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters .search-filters__form-label { flex: 1; display: flex; align-items: center; min-width: 0; min-height: var(--cible-min); font-size: 14px; line-height: 20px; color: var(--texte); cursor: pointer; }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters .search-filters__link { flex: 1; display: flex; align-items: center; gap: var(--espace-2); color: var(--texte); text-decoration: none; }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters .search-filters__link:hover { color: var(--graphite); text-decoration: underline; text-underline-offset: 3px; }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters .search-filters__magnitude { margin-left: auto; font-family: var(--font-technique); font-size: 12px; color: var(--texte-doux); }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters .form-check-input { width: 18px; height: 18px; margin: 0; background-color: var(--blanc); border: var(--trait-moyen) solid var(--trait-fort); }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters .form-check-input[type="checkbox"] { border-radius: 3px; }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters .form-check-input:checked { background-color: var(--graphite); border-color: var(--graphite); }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters .form-check-input:focus { border-color: var(--graphite); box-shadow: none; }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters .form-check-input:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters .search-filters__form-check--color .color { width: 24px; height: 24px; border: var(--trait-moyen) solid var(--trait-fort); border-radius: var(--rayon-s); }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters .search-filters__color-label { color: var(--texte); }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters .search-filters__dropdown-toggle { min-height: var(--controle); border: var(--trait-moyen) solid var(--trait-fort); border-radius: var(--rayon-s); background: var(--blanc); color: var(--texte); }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #search-filters .search-filters__slider-values { font-family: var(--font-technique); font-size: 12px; color: var(--texte-doux); }
}


/* §6 Filtres actifs (pg-puce de 44 px, « Effacer tout ») — gabarit du module dans modules/ps_facetedsearch. */
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-actifs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-actifs:has(.b2-actifs__liste) { margin-bottom: var(--espace-6); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-actifs__titre { margin: 0; font-size: 14px; color: var(--texte-doux); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-actifs__liste { margin: 0; padding: 0; list-style: none; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-puce { min-height: var(--cible-min); box-sizing: border-box; padding: 0 var(--espace-3); font-weight: 600; color: var(--texte); text-decoration: none; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-puce:hover { background: var(--jaune-pale); color: var(--graphite); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-puce:focus-visible, :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-actifs__tout:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-actifs__tout { min-height: var(--cible-min); padding: 0 var(--espace-2); font-size: 14px; cursor: pointer; }

/* Liste filtrée vide (B2 état 02) */
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-vide-filtre { margin-top: var(--espace-2); }


/* §7 Pagination (B2 bloc 8) : « Page N sur M », pages de 44 px, page courante en graphite. */
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-4); margin-top: var(--espace-8); padding-top: var(--espace-6); border-top: var(--trait-fin) solid var(--trait); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-pagination__page { margin: 0; font-size: 15px; font-weight: 600; color: var(--texte); }

@layer ps-components {
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-pagination .pagination__number { display: none; }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-pagination .pagination__container { justify-content: flex-end; }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-pagination .pagination { width: auto; }
}

@layer bs-components {
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-pagination .pagination { --bs-pagination-padding-x: var(--espace-3); --bs-pagination-padding-y: 0; --bs-pagination-font-size: 14px; --bs-pagination-color: var(--texte); --bs-pagination-bg: var(--blanc); --bs-pagination-border-width: var(--trait-moyen); --bs-pagination-border-color: var(--trait-fort); --bs-pagination-border-radius: var(--rayon-s); --bs-pagination-hover-color: var(--graphite); --bs-pagination-hover-bg: var(--jaune-pale); --bs-pagination-hover-border-color: var(--graphite); --bs-pagination-focus-color: var(--graphite); --bs-pagination-focus-bg: var(--blanc); --bs-pagination-focus-box-shadow: none; --bs-pagination-active-color: var(--toile); --bs-pagination-active-bg: var(--graphite); --bs-pagination-active-border-color: var(--graphite); --bs-pagination-disabled-color: var(--texte-doux); --bs-pagination-disabled-bg: var(--blanc); --bs-pagination-disabled-border-color: var(--trait); gap: var(--espace-2); margin: 0; }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-pagination .page-link { min-width: var(--cible-min); min-height: var(--cible-min); justify-content: center; font-family: var(--font-technique); }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-pagination .page-link.previous, :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-pagination .page-link.next { font-family: var(--font-texte); font-weight: 600; }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-pagination .page-link:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
}


/* §8 Tiroir de filtres (M1 écran 04) : plein écran, tête avec fermeture de 44 px, pied « Voir les produits ». */
@layer bs-components {
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #offcanvas-faceted { --bs-offcanvas-width: 100%; --bs-offcanvas-bg: var(--fond); --bs-offcanvas-color: var(--texte); --bs-offcanvas-padding-x: var(--espace-4); --bs-offcanvas-padding-y: var(--espace-3); --bs-offcanvas-border-width: 0; }
}
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tiroir__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); border-bottom: var(--trait-moyen) solid var(--graphite); background: var(--blanc); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tiroir__tete .titre-3 { margin: 0; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tiroir__fermer { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--cible-min); height: var(--cible-min); padding: 0; background: var(--blanc); color: var(--graphite); border: var(--trait-moyen) solid var(--graphite); border-radius: var(--rayon-s); cursor: pointer; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tiroir__fermer:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tiroir__pied { padding: var(--espace-3) var(--espace-4); background: var(--blanc); border-top: var(--trait-moyen) solid var(--graphite); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tiroir__pied .ab-bouton { width: 100%; }


/* §9 États vides (B6) : liste vide de catégorie, de promos, de nouveautés ; recherche vide ou sans résultat. */
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-aucun { padding: var(--espace-4) 0 var(--espace-8); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-aucun__texte { display: grid; gap: var(--espace-4); max-width: 760px; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-aucun__texte .titre-1, :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-aucun__texte .titre-2 { margin: 0; color: var(--texte); overflow-wrap: anywhere; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-aucun__texte .titre-1 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.08; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-chapo { margin: 0; font-size: clamp(18px, 1.5vw, 21px); color: var(--texte-doux); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-pistes { margin: 0; padding: 0; list-style: none; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-pistes li { font-size: 15px; line-height: 22px; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-recherche { width: 100%; max-width: 600px; margin: 0; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-recherche__champ { min-width: 0; box-sizing: border-box; font-family: var(--font-texte); color: var(--graphite); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-recherche__champ::placeholder { color: var(--ardoise); opacity: 1; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-recherche__champ:focus-visible { border-color: var(--graphite); outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-recherche__bouton { flex: none; padding: 0; border: 0; cursor: pointer; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-recherche__bouton:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }

/* Issue « devis » hors catalogue (pg-conseiller) */
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-devis { margin: 0 0 var(--espace-12); border-radius: var(--rayon-m); }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-devis__texte { display: grid; gap: 10px; min-width: 0; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-devis__texte p, :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-devis__texte .titre-2 { margin: 0; color: inherit; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-devis__texte .corps { max-width: 60ch; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-devis__actions { display: grid; gap: var(--espace-3); justify-items: stretch; min-width: 300px; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-devis__tel { display: inline-flex; align-items: center; justify-content: center; min-height: var(--cible-min); color: inherit; text-decoration: none; }
:is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-devis__tel:hover { text-decoration: underline; text-underline-offset: 4px; }


/* §10 Aperçu rapide (A4) : modale de 1 040 px au plus, colonne d’achat de 420 px, fermeture de 44 px.
   La modale est ajoutée au <body> de toute page qui montre des miniatures : règles limitées à .quickview. */
@layer bs-components {
  .modal.quickview { --bs-modal-bg: var(--blanc); --bs-modal-color: var(--texte); --bs-modal-padding: var(--espace-8); --bs-modal-border-radius: var(--rayon-m); --bs-modal-box-shadow: var(--ombre-flottante); --bs-modal-header-padding: var(--espace-4) var(--espace-4) 0; }
  .modal.quickview .quickview__dialog { --bs-modal-width: min(1040px, calc(100% - 32px)); }
  .modal.quickview .quickview__header { justify-content: flex-end; }
  .modal.quickview .btn-close { --bs-btn-close-opacity: 1; --bs-btn-close-hover-opacity: 1; box-sizing: border-box; width: var(--cible-min); height: var(--cible-min); margin: 0; border: var(--trait-moyen) solid var(--graphite); border-radius: var(--rayon-s); background-color: var(--blanc); }
  .modal.quickview .btn-close:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; box-shadow: none; }
}
@layer ps-pages {
  .quickview .page-product--quickview { grid-template-columns: minmax(0, 1fr) 420px; gap: var(--espace-8); }
  .quickview .page-product--quickview .product__name { margin: 0 0 var(--espace-2); font-family: var(--font-titre); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; font-weight: 700; color: var(--texte); }
}
@layer ps-components {
  .quickview .quickview__details-link { min-height: var(--cible-min); font-weight: 600; color: var(--texte); text-decoration: underline; text-decoration-thickness: var(--trait-moyen); text-underline-offset: 4px; }
  .quickview .quickview__details-link:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
}
.quickview .a4-ref { margin: 0 0 var(--espace-3); }
@media (max-width: 991.98px) {
  @layer ps-pages {
    .quickview .page-product--quickview { grid-template-columns: minmax(0, 1fr); }
  }
  @layer bs-components {
    .modal.quickview { --bs-modal-padding: var(--espace-12) var(--espace-4) var(--espace-6); }
  }
}


/* §11 Paliers : 1 200 / 992 / 768 / 480 px (M1 sous 768 px). */
@media (max-width: 1199.98px) {
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tete--photo { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--espace-6) var(--espace-8); }
  @layer ps-components {
    :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #js-product-list .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-liste--pleine #js-product-list .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
}

@media (max-width: 991.98px) {
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tete--photo { grid-template-columns: minmax(0, 1fr); }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-devis { grid-template-columns: minmax(0, 1fr); padding: var(--espace-8) var(--espace-6); }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-devis__actions { min-width: 0; }
  @layer ps-components {
    :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #js-product-list .products, :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-liste--pleine #js-product-list .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-4); }
  }
}

@media (max-width: 767.98px) {
  /* Titre 34/38, chapô 18/28, image de 200 px */
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tete .titre-1, :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-aucun__texte .titre-1 { font: var(--text-titre-1-tel); }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-chapo, :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-chapo { font-size: 18px; line-height: 28px; }

  /* Sous-catégories sur une ligne qui défile seule */
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-souscats__liste { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: var(--espace-1); }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-souscats__liste > li { flex: none; }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-souscat { white-space: nowrap; }

  /* Barre d’outils : « Filtrer » et tri en pleine largeur, critères dessous */
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-outils { flex-direction: column; align-items: stretch; gap: var(--espace-3); }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-outils__actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-filtrer { display: inline-flex; width: 100%; }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tri { flex-wrap: wrap; }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tri__menu { flex: 1 1 100%; }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-tri__bouton { width: 100%; min-width: 0; min-height: var(--controle); }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-criteres__panneau { position: static; width: auto; margin-top: var(--espace-2); box-shadow: none; }

  /* Pagination en colonne */
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-pagination { flex-direction: column; align-items: stretch; }

  /* États vides : devis empilé, bouton en pleine largeur */
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-devis { padding: var(--espace-6) var(--espace-4); }
  :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b6-devis__texte .titre-2 { font: var(--text-titre-2-tel); }

  /* Miniature en 4/3 sur téléphone (A3, M1) */
  .a3-mini .pg-mini__visuel { aspect-ratio: 4 / 3; }
}

@media (max-width: 479.98px) {
  @layer ps-components {
    :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) #js-product-list .products, :is(#category, #search, #new-products, #prices-drop, #best-sales, #manufacturer) .b2-liste--pleine #js-product-list .products { grid-template-columns: minmax(0, 1fr); }
  }
}