/* ========================================================================== La Boutique du Pro — boutique.css Listes de produits : boutique, catégories, marques, recherche, promotions. Maquette Categorie.dc.html (modèle B) ; mobile : Mobile.dc.html, écrans M3 (liste) et M4 (filtres). Chargée par inc/boutique.php sur ces pages seulement (et sur les pages qui contiennent un shortcode de produits). Mobile d'abord ; ruptures 768 px et 1024 px (filtres en colonne à partir de 1024 px). 1. Mise en page 6. Facettes maison (inc/filtres.php) 2. Titre + nombre 7. Grille et pagination 3. Bulles de sous-catégories (module lbdp-core/bulles.php, style en ligne coupé) 4. Barre d'outils 8. Aucun produit 5. Panneau de filtres 9. Bloc SEO replié 10. Produits dans le contenu d'une page ========================================================================== */ /* 1. Mise en page ------------------------------------------------------------ */ .lbdp-boutique__principal { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } @media (min-width: 1024px) { .lbdp-boutique { display: flex; align-items: flex-start; gap: 1.75rem; } .lbdp-boutique__principal { flex: 1; gap: 1.25rem; } } /* 2. Titre + nombre de produits (rien d'autre en haut : HANDOFF) --------------- */ .lbdp-boutique__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .875rem; } .lbdp-boutique__titre { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); font-weight: 700; line-height: 1.15; } .lbdp-boutique__nombre { margin: 0; color: var(--lbdp-texte-3); font-size: .8125rem; font-weight: 500; } /* Page de marque : logo au-dessus du titre sur mobile (ligne entière), à sa gauche à partir de 768 px */ .lbdp-boutique__logo { flex: 0 0 100%; width: 100%; height: 32px; object-fit: contain; object-position: left center; } @media (min-width: 768px) { .lbdp-boutique__tete { column-gap: 1rem; } .lbdp-boutique__logo { flex: none; align-self: center; width: auto; max-width: 180px; height: 44px; } } @media (min-width: 1024px) { .lbdp-boutique__nombre { font-size: .9375rem; } } /* 2 bis. Marques (inc/marques.php) ----------------------------------------------- Pages « Marques » : grille de logos du panneau Marques du méga-menu (.lbdp-logos--grand, base.css), 4 par ligne sur tablette. Page d'une marque : bulles des univers (section 3) avec leur nombre de produits. Page de la marque dans un univers : lien « Toute la marque … » (.lbdp-lien-fleche, base.css), large comme son texte. */ @media (min-width: 600px) and (max-width: 1023.98px) { .lbdp-boutique__marques .lbdp-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Trois bulles au plus, au nom long (« Protection et Accessoires Helly Hansen Workwear ») : à la ligne plutôt qu'une rangée qui défile sans flèches (le script des bulles de LBDP Core n'est chargé que pour ses propres bulles). */ .lbdp-bulles--marque .lbdp-bulles__scroll { flex-wrap: wrap; margin-inline: 0; padding: 0; overflow: visible; cursor: auto; } .lbdp-bulles--marque .lbdp-bulles__item { flex: 0 1 auto; white-space: normal; } .lbdp-bulles__nombre { color: var(--lbdp-texte-3); font-weight: 400; } .lbdp-boutique__toute-marque { align-self: flex-start; } /* 3. Bulles de sous-catégories ------------------------------------------------- Balisage : lbdp-core/bulles.php (nav.lbdp-bulles > [retour] flèches + .lbdp-bulles__scroll > a.lbdp-bulles__item). Les flèches et le bouton « Retour » sont montrés / cachés par le script du module (attribut hidden). */ .lbdp-bulles { display: flex; align-items: center; gap: .5rem; min-width: 0; } .lbdp-bulles__scroll { display: flex; flex: 1 1 auto; gap: .625rem; min-width: 0; margin-inline: calc(var(--lbdp-gouttiere) * -1); padding: 2px var(--lbdp-gouttiere); overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; cursor: grab; } .lbdp-bulles__scroll::-webkit-scrollbar { display: none; } .lbdp-bulles__scroll.is-dragging { cursor: grabbing; scroll-behavior: auto; } .lbdp-bulles__scroll.is-dragging .lbdp-bulles__item, .lbdp-bulles__scroll.is-dragging .lbdp-bulles__retour { pointer-events: none; } .lbdp-bulles__item, .lbdp-bulles__retour { display: inline-flex; flex: none; align-items: center; gap: .375rem; min-height: 36px; padding: 0 .875rem; border: 0; border-radius: 999px; font-size: .8125rem; font-weight: 500; line-height: 1.2; white-space: nowrap; text-decoration: none; transition: background-color .15s, color .15s, box-shadow .15s; user-select: none; -webkit-user-drag: none; } .lbdp-bulles__item { background: var(--lbdp-pastille); color: var(--lbdp-texte); } .lbdp-bulles__item:hover { background: var(--lbdp-bord); color: var(--lbdp-texte); } .lbdp-bulles__item.is-active { background: var(--lbdp-orange); color: #fff; } .lbdp-bulles__item.is-active:hover { background: var(--lbdp-orange-survol); color: #fff; } /* « Retour » : contour, distinct des bulles de catégories */ .lbdp-bulles__retour { background: #fff; box-shadow: inset 0 0 0 1px var(--lbdp-texte); color: var(--lbdp-texte); cursor: pointer; } .lbdp-bulles__retour:hover { box-shadow: inset 0 0 0 1px var(--lbdp-orange); color: var(--lbdp-orange); } /* Deux exemplaires : dans la rangée sur mobile, fixe à gauche au-delà (règle du module) */ .lbdp-bulles__retour--fixe { display: none; } .lbdp-bulles__fleche { display: none; } @media (min-width: 577px) { .lbdp-bulles__retour--scroll { display: none; } .lbdp-bulles__retour--fixe { display: inline-flex; } } @media (min-width: 768px) { .lbdp-bulles__item, .lbdp-bulles__retour { padding: 0 1rem; font-size: .875rem; } } @media (min-width: 1024px) { /* Ordinateur : rangée dans la colonne, flèches rondes aux extrémités, fondu du côté où il reste des bulles */ .lbdp-bulles__scroll { gap: .5rem; margin-inline: 0; padding: 2px; } .lbdp-bulles__fleche { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--lbdp-bord); border-radius: 50%; background: #fff; color: var(--lbdp-texte); cursor: pointer; transition: border-color .15s, color .15s; } .lbdp-bulles__fleche:hover { border-color: var(--lbdp-orange); color: var(--lbdp-orange); } .lbdp-bulles__fleche svg { width: 16px; height: 16px; } .lbdp-bulles:has(.lbdp-bulles__fleche--droite:not([hidden])) .lbdp-bulles__scroll { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); } .lbdp-bulles:has(.lbdp-bulles__fleche--gauche:not([hidden])) .lbdp-bulles__scroll { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px); mask-image: linear-gradient(90deg, transparent, #000 32px); } .lbdp-bulles:has(.lbdp-bulles__fleche--gauche:not([hidden])):has(.lbdp-bulles__fleche--droite:not([hidden])) .lbdp-bulles__scroll { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 48px), transparent); } } /* 4. Barre d'outils ------------------------------------------------------------- Mobile / tablette : barre collante pleine largeur « Filtrer | ⇅ Popularité » (M3). Ordinateur : [Tout effacer] … « 1–24 sur 1 117 produits » [Trier par : Popularité ⌄]. */ /* Pas d'ombre sous l'en-tête des listes : elle tombait sur la barre « Filtrer | Popularité » collée juste dessous (Enes, 06/10/2026 : « ça gâche le filtre »). Le trait gris reste. Feuille chargée sur les listes seulement. */ .lbdp-entete { box-shadow: none; } .lbdp-boutique__outils { position: sticky; top: var(--lbdp-sous-entete); z-index: 5; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin-inline: calc(var(--lbdp-gouttiere) * -1); border-block: 1px solid var(--lbdp-bord); background: #fff; } .lbdp-boutique__filtrer { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: 0 1rem; border: 0; border-right: 1px solid var(--lbdp-bord); background: none; color: var(--lbdp-texte); font-size: .875rem; font-weight: 600; } .lbdp-boutique__filtrer:hover { color: var(--lbdp-orange); } .lbdp-boutique__filtrer:last-child { border-right: 0; } /* seul dans la barre (aucun produit) */ .lbdp-boutique__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--lbdp-orange); color: #fff; font-size: .75rem; font-weight: 600; line-height: 1; } .lbdp-boutique__effacer { display: none; } .lbdp-boutique__outils .woocommerce-result-count { display: none; } /* Tri : la liste native couvre toute la case ; « Trier par : » reste lisible par les lecteurs d'écran. (Plus de !important depuis le 03/10/2026 : il servait contre WBW, qui masquait cette liste ; WBW est remplacé.) */ .lbdp-boutique__outils .woocommerce-ordering { display: flex; } .lbdp-tri { position: relative; align-items: center; margin: 0; } .lbdp-tri__libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* Icône près du libellé centré (≈ 5rem à gauche du centre), jamais collée au bord */ .lbdp-tri__icone { position: absolute; top: 50%; left: max(1rem, calc(50% - 5rem)); margin-top: -9px; pointer-events: none; } .lbdp-tri .lbdp-tri__choix { width: 100%; min-height: 48px; padding: 0 2.25rem 0 2.75rem; border: 0; border-radius: 0; background-color: transparent; background-position: right .875rem center; color: var(--lbdp-texte); font-size: .875rem; font-weight: 600; text-align: center; text-align-last: center; cursor: pointer; } .lbdp-tri .lbdp-tri__choix:focus { box-shadow: none; } .lbdp-tri .lbdp-tri__choix:focus-visible { outline: 2px solid var(--lbdp-orange); outline-offset: -2px; } @media (min-width: 1024px) { .lbdp-boutique__outils { position: static; display: flex; align-items: center; gap: .75rem; margin: 0; border: 0; background: none; } .lbdp-boutique__filtrer { display: none; } .lbdp-boutique__effacer { display: inline; color: var(--lbdp-texte-3); font-size: .8125rem; } .lbdp-boutique__effacer:hover { color: var(--lbdp-orange); } .lbdp-boutique__outils .woocommerce-result-count { display: block; margin: 0 0 0 auto; color: var(--lbdp-texte-3); font-size: .8125rem; } .lbdp-boutique__outils .woocommerce-ordering { flex: none; } .lbdp-tri { gap: .625rem; height: 44px; padding: 0 .75rem 0 .875rem; border: 1px solid var(--lbdp-bord); border-radius: var(--lbdp-r); background: #fff; transition: border-color .15s, box-shadow .15s; } .lbdp-tri:hover { border-color: var(--lbdp-champ); } .lbdp-tri:focus-within { border-color: var(--lbdp-orange); box-shadow: 0 0 0 3px var(--lbdp-halo); } .lbdp-tri__libelle { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; color: var(--lbdp-texte); font-size: .875rem; font-weight: 400; } .lbdp-tri__icone { display: none; } .lbdp-tri .lbdp-tri__choix { width: auto; min-height: 0; height: 42px; padding: 0 1.75rem 0 0; background-position: right 0 center; text-align: left; text-align-last: auto; } .lbdp-tri .lbdp-tri__choix:focus-visible { outline: none; } } /* 5. Panneau de filtres ----------------------------------------------------------- Mobile / tablette : plein écran qui glisse depuis la droite (M4), ouvert par « Filtrer » (boutique.js). Fermé = visibility: hidden (le contenu garde sa taille). Ordinateur : colonne compacte de 220 px, collante. */ .lbdp-filtres { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: #fff; visibility: hidden; transform: translateX(100%); transition: transform .25s ease, visibility 0s linear .25s; } .lbdp-filtres.est-ouvert { visibility: visible; transform: none; transition: transform .25s ease; } .lbdp-filtres__tete { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; padding: 0 .5rem 0 1rem; border-bottom: 1px solid var(--lbdp-bord); } .lbdp-filtres__titre { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.125rem; font-weight: 600; } .lbdp-filtres__titre .lbdp-icone { display: none; } .lbdp-filtres__fermer { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--lbdp-texte); } .lbdp-filtres__fermer:hover { background: var(--lbdp-fond); } .lbdp-filtres__contenu { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 1rem 1rem; } .lbdp-filtres__pied { display: flex; flex: none; gap: .625rem; padding: .75rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--lbdp-bord); background: #fff; } .lbdp-filtres__effacer { flex: 1; padding-inline: .75rem; } .lbdp-filtres__voir { flex: 2; padding-inline: .75rem; } @media (min-width: 1024px) { .lbdp-filtres { position: sticky; inset: calc(var(--lbdp-sous-entete) + 1rem) auto auto; z-index: auto; /* inset après top l'annulait : les filtres ne collaient pas */ order: -1; /* à gauche (le panneau est déjà avant la liste dans le HTML depuis le 01/10/2026 ; gardé par sûreté) */ align-self: flex-start; flex: none; width: 220px; max-height: calc(100vh - var(--lbdp-sous-entete) - 2rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--lbdp-champ) transparent; background: none; visibility: visible; transform: none; transition: none; } .lbdp-filtres__tete { min-height: 0; padding: 0 0 .625rem; } .lbdp-filtres__titre { font-size: .9375rem; } .lbdp-filtres__titre .lbdp-icone { display: inline-block; } .lbdp-filtres__fermer, .lbdp-filtres__pied { display: none; } .lbdp-filtres__contenu { flex: none; overflow: visible; padding: 0; } } /* 6. Facettes maison (inc/filtres.php) ------------------------------------------------ > > + .lbdp-facette__contenu (ul.lbdp-facette__liste > li > label.lbdp-facette__option : case, pastille, nom, nombre | bloc .lbdp-prix). */ .lbdp-filtres-form { font-size: .8125rem; } .lbdp-filtres-form__vide { margin: .75rem 0 0; color: var(--lbdp-texte-3); } /* liste trop courte pour un filtre utile */ .lbdp-facette { padding: .6875rem 0; border-bottom: 1px solid var(--lbdp-bord); } .lbdp-facette__titre { display: flex; align-items: center; gap: .5rem; list-style: none; cursor: pointer; color: var(--lbdp-texte); font-weight: 600; line-height: 1.4; } .lbdp-facette--simple .lbdp-facette__nom { font-weight: 600; } /* case seule (Expédition sous 24 h) : même graisse qu'un titre */ .lbdp-facette__titre::-webkit-details-marker { display: none; } .lbdp-facette__titre > span:first-child { flex: 1; min-width: 0; } .lbdp-facette__effacer { padding: 0; border: 0; background: none; color: var(--lbdp-orange); font: inherit; font-size: .75rem; font-weight: 500; cursor: pointer; } .lbdp-facette__effacer:hover { color: var(--lbdp-orange-survol); text-decoration: underline; } .lbdp-facette__chevron { flex: none; color: var(--lbdp-texte-3); transition: transform .2s; } .lbdp-facette[open] > .lbdp-facette__titre .lbdp-facette__chevron { transform: rotate(180deg); } .lbdp-facette__contenu { padding-top: .5rem; } .lbdp-facette__liste { margin: 0; padding: 0 .25rem 0 0; list-style: none; } /* Taille / Pointure (seule liste --longue) : hauteur bornée sur ordinateur seulement. Dans le panneau du téléphone, qui défile déjà, jamais de petite zone qui défile à l'intérieur (lignes de 40 px au doigt : 6 pointures sur 27 en 232 px). */ @media (min-width: 1024px) { .lbdp-facette__liste--longue { max-height: 232px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--lbdp-champ) transparent; } } /* Case, pastille et nombre calés sur la PREMIÈRE ligne du nom (Enes, 10/10/2026 : sur deux ou trois lignes, centrés, on ne savait plus à quelle option allait le nombre). Une ligne : même place qu'avant (5 px + 17 px + 6 px = 28 px). */ .lbdp-facette__option { display: flex; align-items: flex-start; gap: .625rem; min-height: 28px; padding-block: 5px; color: var(--lbdp-texte); line-height: 1.3; cursor: pointer; } .lbdp-facette__option > .lbdp-facette__pastille { margin-top: 1px; } .lbdp-facette__option > .lbdp-facette__nombre { margin-top: 1px; } .lbdp-facette__option:hover { color: var(--lbdp-orange); } .lbdp-facette__option input { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--lbdp-orange); cursor: pointer; } /* « Voir les N autres » / « Voir moins » (inc/filtres.php, au-delà de 8 options) : volet natif dans la facette, lien orange foncé comme les liens de texte, au même pas que les options. */ .lbdp-facette__voir { display: inline-flex; align-items: center; min-height: 28px; padding: 0; border: 0; background: none; list-style: none; cursor: pointer; color: var(--lbdp-orange-texte); font: inherit; font-weight: 600; } .lbdp-facette__voir::-webkit-details-marker { display: none; } .lbdp-facette__voir:hover { text-decoration: underline; } /* Déplié : « Voir les N autres » s'efface, « Voir moins » attend en bas de la liste. */ .lbdp-facette__plus[open] > summary.lbdp-facette__voir, .lbdp-facette__plus:not([open]) > [data-lbdp-facette-moins] { display: none; } .lbdp-facette__plus > [data-lbdp-facette-moins] { margin-top: .25rem; } /* Une seule liste de A à Z (D10.2, 08/10/2026) : les options repliées y sont à leur place, cachées tant que le volet « Voir les N autres » qui suit la liste est fermé. Navigateur sans :has (avant Safari 15.4 / Firefox 121) : toute la liste est visible et le volet, inutile, disparaît. */ @supports selector(:has(*)) { .lbdp-facette__contenu:has(> .lbdp-facette__plus:not([open])) .lbdp-facette__autre, .lbdp-facette__nuances-contenu:has(> .lbdp-facette__plus:not([open])) .lbdp-facette__liste:not(.lbdp-facette__liste--recherche) .lbdp-facette__autre { display: none; } } @supports not selector(:has(*)) { .lbdp-facette__plus { display: none; } } /* Lien d'évitement « Aller aux produits » (avant le panneau de filtres) : visible au focus, en haut de la liste. Hors focus, masqué comme .screen-reader-text : le top: -100px de base.css se compte depuis .lbdp-boutique, en milieu de page, et posait le lien sur le menu. */ .lbdp-boutique { position: relative; } .lbdp-evitement--liste:focus { top: 0; left: 0; } .lbdp-evitement--liste:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; } .lbdp-boutique__principal:focus { outline: none; } /* cible du lien d'évitement (tabindex -1) */ /* Filtres actifs en pastilles retirables au-dessus de la liste (inc/filtres.php, audit D5) : mêmes codes que les pastilles de code promo du panier (orange clair, bords ronds) */ .lbdp-puces { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 1rem; padding: 0; list-style: none; } .lbdp-puce { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px 4px 12px; border-radius: 999px; background: var(--lbdp-orange-clair); color: var(--lbdp-orange-texte); font-size: .75rem; font-weight: 600; line-height: 1.2; text-decoration: none; } .lbdp-puce:hover { background: var(--lbdp-orange-bord); color: var(--lbdp-orange-texte); } .lbdp-puce .lbdp-icone { flex: none; } /* Nuances d'une famille de couleurs (inc/filtres.php, règle finale d'Enes du 10/10/2026) : après « Couleurs : Bleu », un bouton discret « Affiner les nuances (N) » (fond blanc, bord gris, 12 px) ; au clic, filtres.js montre en place une petite puce par nuance cochée, même habillage, sa croix ne retire que cette nuance, et le bouton devient « Réduire ». La rangée passe à la ligne normalement ; au doigt, 44 px de haut. */ .lbdp-puce--nuance { min-height: 28px; padding: 3px 8px 3px 10px; border: 1px solid var(--lbdp-bord); background: #fff; color: var(--lbdp-texte-2); font-size: .75rem; font-weight: 500; } .lbdp-puce--nuance:hover { border-color: var(--lbdp-bord-survol); background: var(--lbdp-fond); color: var(--lbdp-texte); } .lbdp-puce--plus { cursor: pointer; font: inherit; font-size: .75rem; font-weight: 500; color: var(--lbdp-texte-2); } @media (pointer: coarse) { .lbdp-puce { min-height: 44px; } } /* Écran tactile : lignes de 40 px (28 px auparavant) et zone du lien « Effacer » agrandie sans le déplacer (audit A5) */ @media (pointer: coarse) { .lbdp-facette__option, .lbdp-facette__voir { min-height: 40px; } .lbdp-facette__option { padding-block: 11px; } .lbdp-facette__effacer { margin: -.625rem -.5rem; padding: .625rem .5rem; } } .lbdp-facette__nom { flex: 1; min-width: 0; } .lbdp-facette__nombre { color: var(--lbdp-texte-3); font-size: .75rem; } .lbdp-facette__pastille { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--lbdp-c, var(--lbdp-pastille)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); } .lbdp-facette__pastille--bicolore { background: linear-gradient(135deg, var(--lbdp-c) 50%, var(--lbdp-c2) 50%); } .lbdp-facette__pastille--image { object-fit: cover; } /* Couleurs par familles (inc/filtres.php ; rendu tranché par Enes le 10/10/2026, maquette filtre-couleurs-rendus/rendu-1) : grille de carrés de 30 px à coins arrondis, nom en 11 px dessous sur une ligne (jamais tronqué), AUCUN nombre à l'écran ; 6 par ligne dans le tiroir du téléphone et de la tablette, 4 dans la colonne de l'ordinateur. Chaque pastille =