/*
 * PB Product Grid : carte et grille produits.
 *
 * Toutes les valeurs proviennent des styles CALCULES relevés sur
 * https://maquette.poivre-blanc.eu/nos-produits/collection-ete/ le 17 août 2026,
 * et non d'une lecture approximative des feuilles sources.
 *
 * Tout est porté sous .pbpg-grid : contrairement au CSS de l'addon remplacé,
 * aucune règle ne s'échappe vers le reste de la page (l'ancien redéfinissait
 * del, ins et .uc_regular_price globalement).
 */

.pbpg-grid {
	display: grid;
	grid-template-columns: repeat(var(--pbpg-columns, 4), 1fr);
	gap: 20px;
	margin: 0;
	padding: 0 0 20px;
	list-style: none;
}

@media (max-width: 1024px) {
	.pbpg-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.pbpg-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
}

/* ---------- La carte ---------- */

.pbpg-grid .pbpg-item {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: #111;
	font-size: 16px;
	border-radius: 0;
	transition: all 0.3s;
}

.pbpg-grid .pbpg-item * {
	box-sizing: border-box;
}

/* ---------- Le visuel ---------- */

.pbpg-grid .pbpg-media {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	text-decoration: none;
}

.pbpg-grid .pbpg-image {
	position: relative;
	display: block;
	overflow: hidden;

	/* Le rapport est verrouille, et la hauteur de la carte ne depend donc
	   d'aucune image. Avec `height: auto`, elle suivait la photo reellement
	   chargee : un echange de couleur, une image encore en cours de
	   chargement ou une image en echec faisaient sauter la carte, et la
	   grille entiere avec elle. Toutes les photos produit sont en
	   1000 x 1500, ce verrou ne change donc rien au rendu. */
	aspect-ratio: 2 / 3;

	background-color: #ffffff;
	transition: all 0.25s ease-in-out;
}

.pbpg-grid .pbpg-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: 0.3s;
}

.pbpg-grid .pbpg-image--hover {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	object-fit: cover;
	transition: all 0.3s;
}

.pbpg-grid .pbpg-image--hover img {
	height: 100%;
	object-fit: cover;
}

.pbpg-grid .pbpg-media:hover .pbpg-image--hover,
.pbpg-grid .pbpg-media:focus-visible .pbpg-image--hover {
	opacity: 1;
}

.pbpg-grid .pbpg-media:focus-visible {
	outline: 2px solid #b8a687;
	outline-offset: 2px;
}

/* ---------- Le bandeau posé sur le visuel ---------- */

.pbpg-grid .pbpg-banner {
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 1;
	display: block;
	width: fit-content;
	max-width: calc(100% - 10px);
	padding: 10px 20px;
	background-color: rgba(184, 166, 135, 0.45);
	color: #ffffff;
	font-family: "Tenor Sans", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 21px;
	text-align: left;
	text-transform: uppercase;
	border-radius: 0;
}

@media (max-width: 767px) {
	.pbpg-grid .pbpg-banner {
		font-size: 11px;
	}
}

/* ---------- Le texte ---------- */

/* La carte occupe toute la hauteur de sa rangee, et son contenu prend ce qui
   reste sous la photo : le bouton d'ajout peut alors etre pousse en pied de
   carte. Sans ce `flex`, le contenu gardait sa hauteur naturelle et les boutons
   se retrouvaient a des hauteurs differentes d'une carte a l'autre.

   Pas de `justify-content` ici : titre, prix, pastilles et tailles se suivent
   sans ecart impose, et c'est la marge automatique du bouton qui ouvre l'espace
   restant, tout en bas. */
.pbpg-grid .pbpg-content {
	display: flex;
	flex: 1 1 auto;
	flex-flow: column nowrap;
	padding: 10px 0;
	background-color: transparent;
}

/* Hauteur reservee au bloc titre + prix : deux lignes de titre (2 x 1,2 x 13px,
   soit 31), la marge sous le titre (5), et un bloc prix avec prix barre (39).

   Une carte au titre plus court, ou sans promotion, ouvre la difference SOUS le
   prix. C'est ce qui aligne pastilles et tailles d'un bout a l'autre de la
   rangee, sans jamais decoller le prix de son titre : les quinze pixels de la
   deuxieme ligne de titre decalaient sinon tout ce qui suit. */
.pbpg-grid .pbpg-head {
	display: block;
	min-height: 75px;
}

/* Quand la grille ne contient aucun prix barre, les 18 px reserves a la ligne
   de promotion ne servent plus qu'a creuser un blanc entre le prix et les
   pastilles. La place de la deuxieme ligne de titre reste due, elle : sans
   elle, une carte au nom court desalignerait ses pastilles.

   Mesure sur une rangee reelle : 42 px pour un titre d'une ligne, 57 pour
   deux, 75 avec le prix barre.

   La regle est ecrite dans ce sens, en retrait sur la reservation par defaut,
   pour qu'un navigateur qui ignore `:has()` retrouve simplement le
   comportement precedent plutot que de perdre l'alignement. */
.pbpg-grid:not(:has(.pbpg-price-regular)) .pbpg-head {
	min-height: 57px;
}

/* Le prix reste colle au titre : pas de hauteur reservee, un titre d'une seule
   ligne ne creuse aucun blanc au-dessus du prix. Le titre est en revanche borne
   a deux lignes, coupe par des points de suspension au-dela, pour qu'un nom a
   rallonge ne deforme pas la carte. L'alignement des boutons d'ajout ne depend
   pas de cette hauteur : il vient du bloc du bas, cale en pied de carte. */
.pbpg-grid .pbpg-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	margin: 0 0 5px;
	padding: 0;
	overflow: hidden;
	font-family: "Montserrat", sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
}

.pbpg-grid .pbpg-title a {
	color: #000000;
	text-decoration: none;
}

.pbpg-grid .pbpg-title a:focus-visible {
	outline: 2px solid #b8a687;
	outline-offset: 2px;
}

/* ---------- Les prix ---------- */


.pbpg-grid .pbpg-prices {
	display: block;
}

.pbpg-grid .pbpg-price-regular {
	display: block;
	color: #1d1d1d;
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	font-weight: 400;
	text-decoration: line-through;
}

.pbpg-grid .pbpg-price {
	display: block;
	color: #000000;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 21px;
	text-decoration: underline;
}

/* Le prix barré ne doit pas hériter du soulignement du prix courant. */
.pbpg-grid .pbpg-price-regular .woocommerce-Price-amount {
	text-decoration: inherit;
}

.pbpg-grid .pbpg-discount {
	margin-left: 5px;
	color: #b8a687;
	font-weight: 700;
	text-decoration: none;
	display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
	.pbpg-grid .pbpg-item,
	.pbpg-grid .pbpg-image,
	.pbpg-grid .pbpg-image img,
	.pbpg-grid .pbpg-image--hover {
		transition: none;
	}
}

/* ==========================================================================
   Sélecteurs de couleur et de taille, ajout au panier
   Reprend le langage visuel de la fiche produit (pastilles rondes de 40px,
   boutons de taille noirs quand sélectionnés), à une échelle adaptée à une
   carte de 241px de large.
   ========================================================================== */

/* Pastilles et tailles suivent le prix, elles ne descendent pas avec le bouton.
   Ce bloc porte aussi le bouton d'ajout : il prend donc toute la hauteur
   restante, pour que la marge automatique du bouton ait de quoi jouer. */
.pbpg-grid .pbpg-variants {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	margin-top: 10px;
}

/* Tant qu'aucune couleur n'est retenue, les tailles disparaissent, place
   comprise : leur disponibilite depend du coloris, les montrer avant induirait
   en erreur, et reserver leur hauteur creusait une bande vide au bas de TOUTES
   les cartes d'une page non filtree, pour des tailles que personne ne verra
   avant d'avoir clique. La carte grandit donc au premier clic, en meme temps
   que le bouton d'ajout apparait : un seul mouvement plutot que deux.

   La regle ne vise que les cartes QUI ONT des couleurs, les autres affichent
   leurs tailles tout de suite. Elle emporte aussi la rangee reservee des
   produits en taille unique, qui n'a de sens qu'une fois le coloris choisi. */
.pbpg-grid .pbpg-variants--attente .pbpg-sizes {
	display: none;
}

/* ---------- Pastilles de couleur ---------- */

.pbpg-grid .pbpg-swatches {
	display: flex;
	flex-flow: row wrap;
	gap: 6px;
}

/* Compteur des coloris qui ne tiennent pas sur la rangee. Il prend la place
   d'une pastille et renvoie vers la fiche produit, comme le « + » des tailles
   en mobile. Le script decide combien de pastilles cacher, en fonction de la
   largeur reelle de la carte. */
.pbpg-grid .pbpg-swatch-plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1px solid rgba(0, 0, 0, 0.125);
	border-radius: 50%;
	background: #ffffff;
	color: #1d1d1d;
	font-family: "Montserrat", sans-serif;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: 200ms;
}

.pbpg-grid .pbpg-swatch-plus:hover,
.pbpg-grid .pbpg-swatch-plus:focus {
	border-color: #1d1d1d;
	color: #1d1d1d;
	text-decoration: none;
}

.pbpg-grid .pbpg-swatch-plus[hidden],
.pbpg-grid .pbpg-swatch[hidden] {
	display: none;
}

/* La forme ronde est verrouillee dans TOUS les etats. Le theme et Elementor
   posent leurs propres regles sur les boutons, y compris au survol et au
   focus : sans cette declaration explicite, la pastille redevient carree. */
.pbpg-grid .pbpg-swatch,
.pbpg-grid .pbpg-swatch:hover,
.pbpg-grid .pbpg-swatch:focus,
.pbpg-grid .pbpg-swatch:active,
.pbpg-grid .pbpg-swatch.is-selected {
	border-radius: 50%;
}

.pbpg-grid .pbpg-swatch {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 1px;
	border: 1px solid rgba(0, 0, 0, 0.125);
	background: #ffffff;
	background-clip: padding-box;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 200ms, box-shadow 200ms;
	appearance: none;
	-webkit-appearance: none;
}

.pbpg-grid .pbpg-swatch-inner {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: #f2efe9;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.pbpg-grid .pbpg-swatch:hover {
	border-color: rgba(0, 0, 0, 0.5);
}

/* La pastille doit rester parfaitement ronde une fois selectionnee : on
   epaissit le contour par une ombre portee plutot que par la bordure, ce qui
   evite aussi tout deplacement des voisines. */
.pbpg-grid .pbpg-swatch.is-selected {
	border-color: #000000;
	box-shadow: 0 0 0 1px #000000;
}

/* Coloris dont aucune taille n'est achetable : meme langage que les tailles
   indisponibles, une barre oblique et un affaiblissement. La pastille reste
   cliquable, pour que la photo du coloris soit consultable. */
.pbpg-grid .pbpg-swatch.is-unavailable {
	opacity: 0.6;
}

/* Meme barre que sur une taille indisponible : 1px, inclinee a -20 degres.
   Elle est gris clair pour rester discrete sur les pastilles foncees comme
   sur les claires. */
.pbpg-grid .pbpg-swatch.is-unavailable::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -10%;
	width: 120%;
	height: 1px;
	background-color: #d3d3d3;
	transform: rotate(-20deg);
	pointer-events: none;
}

/* ---------- Boutons de taille ---------- */

/* La hauteur d'une rangee est toujours prise, meme quand le selecteur est vide.
   Sans cette reserve, un produit en taille unique portait un trou de 28px juste
   au-dessus de son bouton et desalignait toute la rangee, et une carte
   grandissait d'un coup au premier clic sur une pastille. */
.pbpg-grid .pbpg-sizes {
	display: flex;
	flex-flow: row wrap;
	gap: 6px;
	min-height: 28px;
}

.pbpg-grid .pbpg-size,
.pbpg-grid .pbpg-sizes-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 28px;
	padding: 0 7px;
	border: 1px solid rgba(0, 0, 0, 0.125);
	border-radius: 1px;
	background: #ffffff;
	color: #1d1d1d;
	font-family: "Montserrat", sans-serif;
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: 200ms;
	appearance: none;
}

.pbpg-grid .pbpg-size:hover:not(:disabled) {
	background-color: #d3d3d3;
}

.pbpg-grid .pbpg-size.is-selected {
	background-color: #000000;
	border-color: #000000;
	color: #ffffff;
}

/* Taille unique : elle est retenue d'office et ne se deselectionne pas. Elle
   garde donc son fond noir de selection au survol, et le curseur ne promet pas
   un clic qui ne fera rien. Posee apres la regle de survol generique, dont elle
   partage la specificite. */
.pbpg-grid .pbpg-size--fixe {
	cursor: default;
}

.pbpg-grid .pbpg-size--fixe:hover:not(:disabled) {
	background-color: #000000;
	color: #ffffff;
}

.pbpg-grid .pbpg-size.is-unavailable {
	position: relative;
	color: rgba(29, 29, 29, 0.35);
	background: #fafafa;
	cursor: not-allowed;
	overflow: hidden;
}

/* Barre oblique, comme le « blurCross » de la fiche produit. */
.pbpg-grid .pbpg-size.is-unavailable::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -10%;
	width: 120%;
	height: 1px;
	background: rgba(29, 29, 29, 0.35);
	transform: rotate(-20deg);
}

/* Le bouton « + » ne sert qu'au repli mobile. */
.pbpg-grid .pbpg-sizes-more {
	display: none;
	font-size: 13px;
	font-weight: 600;
}

/* ---------- Ajout au panier ---------- */

/* Meme gabarit que le bouton « En savoir plus » : 21px d'interligne,
   10px/20px de remplissage, soit 43px de haut.

   La marge automatique cale le bouton, et lui seul, en pied de carte : c'est
   ce qui aligne les boutons d'une rangee sans faire descendre les pastilles
   avec eux. Elle ne joue pas tant que le bouton est masque, donc une carte pas
   encore prete a l'achat garde son contenu groupe en haut. */
.pbpg-grid .pbpg-add {
	display: block;
	width: 100%;
	margin-top: auto;
	padding: 10px 20px;
	border: 1px solid #b8a687;
	border-radius: 0;
	background: transparent;
	color: #b8a687;
	font-family: "Harmonia Sans", "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 21px;
	text-align: center;
	cursor: pointer;
	transition: 200ms;
	appearance: none;
}

.pbpg-grid .pbpg-add:hover:not(:disabled) {
	background: #b8a687;
	color: #ffffff;
}

.pbpg-grid .pbpg-add:disabled {
	border-color: rgba(184, 166, 135, 0.4);
	color: rgba(184, 166, 135, 0.6);
	cursor: default;
}

.pbpg-grid .pbpg-add.is-loading {
	opacity: 0.6;
	cursor: progress;
}

.pbpg-grid .pbpg-add.is-done {
	background: #b8a687;
	border-color: #b8a687;
	color: #ffffff;
}

.pbpg-grid .pbpg-feedback {
	margin: 0;
	/* Le doré de la marque plutôt qu'un rouge d'alerte : le message explique
	   une limite de stock, il n'annonce pas une panne. */
	color: #b8a687;
	font-family: "Montserrat", sans-serif;
	font-size: 11px;
	line-height: 1.4;
}

.pbpg-grid .pbpg-feedback:empty {
	display: none;
}

/* Une couleur ayant été choisie, l'image de survol de la galerie
   contredirait ce choix : on la neutralise. */
.pbpg-grid .pbpg-item--color-locked .pbpg-image--hover {
	display: none;
}

.pbpg-grid .pbpg-swatch:focus-visible,
.pbpg-grid .pbpg-size:focus-visible,
.pbpg-grid .pbpg-sizes-more:focus-visible,
.pbpg-grid .pbpg-add:focus-visible {
	outline: 2px solid #b8a687;
	outline-offset: 2px;
}

/* ---------- Repli mobile : trois tailles disponibles, puis « + » ---------- */

@media (max-width: 767px) {
	.pbpg-grid .pbpg-item--tronque .pbpg-size {
		display: none;
	}

	.pbpg-grid .pbpg-item--tronque .pbpg-size[data-mobile-rank="0"],
	.pbpg-grid .pbpg-item--tronque .pbpg-size[data-mobile-rank="1"],
	.pbpg-grid .pbpg-item--tronque .pbpg-size[data-mobile-rank="2"] {
		display: inline-flex;
	}

	.pbpg-grid .pbpg-item--tronque .pbpg-sizes-more {
		display: inline-flex;
	}

	.pbpg-grid .pbpg-swatch {
		width: 24px;
		height: 24px;
	}

	.pbpg-grid .pbpg-size,
	.pbpg-grid .pbpg-sizes-more {
		min-width: 30px;
		height: 26px;
		padding: 0 5px;
		font-size: 10px;
	}
}

/* ==========================================================================
   Bouton « En savoir plus » révélé au survol de la photo.
   Valeurs relevées sur le rendu d'origine : bloc à -65px de marge haute,
   17px de marge basse, bouton de 43px de haut, fond blanc, bordure et texte
   #B8A687, Harmonia Sans 14px/600. Il menait vers l'aperçu rapide ; il mène
   désormais vers la fiche produit.
   ========================================================================== */

.pbpg-grid .pbpg-media-wrap {
	position: relative;
	display: block;
}

.pbpg-grid .pbpg-actions {
	/* L'image de survol est en position absolue : sans contexte d'empilement
	   ici, elle passait AU-DESSUS du bouton, qui apparaissait puis semblait
	   disparaitre pendant le fondu. */
	position: relative;
	z-index: 2;
	width: 100%;
	margin-top: -65px;
	margin-bottom: 17px;
	padding: 0 10px;
	transition: all 0.5s ease-out;
}

.pbpg-grid .pbpg-more {
	display: block;
	margin-top: 10px;
	padding: 10px 20px;
	border: 1px solid #b8a687;
	border-radius: 0;
	background-color: #ffffff;
	color: #b8a687;
	font-family: "Harmonia Sans", "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
	/* 21px d'interligne + 20px de remplissage + 2px de bordure = 43px de haut,
	   hauteur exacte du bouton d'origine. */
	line-height: 21px;
	text-align: center;
	text-decoration: none;
	opacity: 0;
	transition: all 0.5s ease-out;
}

.pbpg-grid .pbpg-item:hover .pbpg-more,
.pbpg-grid .pbpg-item:focus-within .pbpg-more {
	opacity: 1;
}

.pbpg-grid .pbpg-more:hover {
	background-color: #f7f5f4;
}

/* Le survol n'existe pas au doigt : sous 1024px le bouton disparait, comme
   dans le rendu d'origine. La photo reste cliquable. */
@media (max-width: 1024px) {
	.pbpg-grid .pbpg-actions {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pbpg-grid .pbpg-actions,
	.pbpg-grid .pbpg-more {
		transition: none;
	}
}

/* ==========================================================================
   Archive filtrable
   Toutes les valeurs proviennent du rendu de PRODUCTION relevé le 18 août :
   accordéon « FILTRES » de 43px, sous-accordéons Collections / Catégories /
   Taille & Âge / Couleurs / Stock fermés par défaut, cases dessinées de 20px
   à bordure #DFDFDF, libellés Harmonia Sans 14px #54595F.
   ========================================================================== */

.pbpg-archive,
.pbpg-part {
	position: relative;
}

.pbpg-part--filters.is-loading,
.pbpg-part--results.is-loading .pbpg-results,
.pbpg-archive.is-loading .pbpg-results {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 150ms;
}

/* ---------- Accordéon principal « FILTRES » ---------- */

.pbpg-filters-accordion {
	width: 100%;
}

.pbpg-filters-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	border-bottom: 1px solid #d5d8dc;
	color: #1f2124;
	font-family: "Harmonia Sans", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	list-style: none;
	cursor: pointer;
}

.pbpg-filters-title::-webkit-details-marker {
	display: none;
}

.pbpg-filters-title::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 1px solid #424242;
	border-bottom: 1px solid #424242;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 300ms;
}

.pbpg-filters-accordion[open] > .pbpg-filters-title::after {
	transform: rotate(-135deg) translateY(-2px);
}

.pbpg-filters-body {
	display: flex;
	flex-direction: column;
	padding: 10px 0 0;
}

/* ---------- Un accordéon par facette ---------- */

.pbpg-facet {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}

.pbpg-facet-title {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px 10px 0;
	background-color: transparent;
	color: #54595f;
	font-family: "Harmonia Sans", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	list-style: none;
	cursor: pointer;
}

.pbpg-facet-title::-webkit-details-marker {
	display: none;
}

.pbpg-facet-title::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-left: auto;
	border-right: 1px solid rgba(66, 66, 66, 0.77);
	border-bottom: 1px solid rgba(66, 66, 66, 0.77);
	transform: rotate(45deg) translateY(-2px);
	transition: transform 300ms;
}

.pbpg-facet[open] > .pbpg-facet-title::after {
	transform: rotate(-135deg) translateY(-2px);
}

.pbpg-facet-items {
	display: flex;
	flex-flow: column nowrap;
	row-gap: 10px;
	width: 100%;
	padding: 4px 0 12px;
}

/* ---------- Une ligne de filtre ---------- */

.pbpg-facet-item {
	display: flex;
	align-items: center;
	color: #54595f;
	font-family: "Harmonia Sans", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	cursor: pointer;
}

/* La case native est masquée : on dessine la nôtre, comme le faisait le
   filtre remplacé, pour maîtriser sa taille et son état coché. */
.pbpg-facet-item input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.pbpg-box {
	flex: 0 0 auto;
	width: 20px;
	min-width: 20px;
	height: 20px;
	margin-right: 10px;
	border: 1px solid #dfdfdf;
	border-radius: 0;
	background-color: #ffffff;
	transition: 300ms;
}

.pbpg-facet-item input[type="checkbox"]:checked ~ .pbpg-box {
	border-width: 3px;
	border-color: #ffffff;
	background-color: #1d1d1d;
	box-shadow: 0 0 0 1px #dfdfdf;
}

.pbpg-facet-item input[type="checkbox"]:focus-visible ~ .pbpg-box {
	outline: 2px solid #b8a687;
	outline-offset: 2px;
}

.pbpg-facet-item input[type="checkbox"]:checked ~ .pbpg-facet-label {
	color: #1d1d1d;
}

.pbpg-facet-label {
	flex: 1 1 auto;
}

.pbpg-facet-count {
	flex: 0 0 auto;
	margin-left: 10px;
	color: #54595f;
	font-family: "Harmonia Sans", sans-serif;
	font-weight: 400;
}

.pbpg-facet-dot {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin-right: 8px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 50%;
	background-color: #f2efe9;
}

/* ---------- Repli des facettes longues ---------- */

.pbpg-facet-item.is-extra {
	display: none;
}

.pbpg-facet.is-expanded .pbpg-facet-item.is-extra {
	display: flex;
}

/* ---------- Sous-categories repliees sous leur parent ---------- */

.pbpg-facet-branche.is-extra {
	display: none;
}

.pbpg-facet.is-expanded .pbpg-facet-branche.is-extra {
	display: block;
}

/* La gouttiere du chevron est reservee sur TOUTES les lignes, avec ou sans
   sous-categories : sans elle, les compteurs des lignes depliables etaient
   decales vers la gauche et la colonne de chiffres n'etait plus alignee. */
.pbpg-facet-ligne {
	position: relative;
}

.pbpg-facet-item {
	padding-right: 26px;
}

.pbpg-facet-count {
	text-align: right;
}

/* Bouton dedie au depliage : cliquer le libelle doit cocher la case, pas
   ouvrir la branche. Le selecteur est double car le theme impose une bordure
   dore a tous les boutons. */
.pbpg-filters .pbpg-facet-deplier,
.pbpg-filters .pbpg-facet-deplier:hover,
.pbpg-filters .pbpg-facet-deplier:focus {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 100%;
	min-height: 20px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
	appearance: none;
}

.pbpg-facet-deplier::before {
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	border-right: 1px solid rgba(66, 66, 66, 0.77);
	border-bottom: 1px solid rgba(66, 66, 66, 0.77);
	transform: rotate(45deg) translateY(-2px);
	transition: transform 300ms;
}

.pbpg-facet-branche.is-open .pbpg-facet-deplier::before {
	transform: rotate(-135deg) translateY(2px);
}

.pbpg-facet-deplier:focus-visible {
	outline: 2px solid #b8a687;
	outline-offset: 2px;
}

.pbpg-facet-enfants {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 10px 0 0 14px;
	padding-left: 12px;
	border-left: 1px solid #e6e6e6;
}

.pbpg-facet-enfants[hidden] {
	display: none;
}

.pbpg-facet-enfants .pbpg-facet-label {
	font-size: 13px;
}

.pbpg-facet-more {
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: #b8a687;
	font-family: "Harmonia Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	text-align: left;
	text-decoration: underline;
	cursor: pointer;
}

/* ---------- Filtres actifs ---------- */

/* Bandeau des filtres retenus, au-dessus de la grille. Il remplace le
   compteur : plus de trait de separation, il n'y a plus rien au-dessus. */
.pbpg-active {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 0 0 16px;
	padding: 0;
}

/* Filet de securite : si un lien « Voir le panier » venait malgre tout se
   poser dans une carte, il ne s'affiche pas. */
.pbpg-grid .added_to_cart {
	display: none;
}

/* Le compteur reste lisible par les lecteurs d'ecran, invisible a l'oeil. */
.pbpg-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.pbpg-chip,
.pbpg-clear {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border: 1px solid #dfdfdf;
	border-radius: 0;
	background: #ffffff;
	color: #54595f;
	font-family: "Harmonia Sans", sans-serif;
	font-size: 12px;
	line-height: 1.4;
	cursor: pointer;
}

.pbpg-chip:hover,
.pbpg-clear:hover {
	border-color: #1d1d1d;
	color: #1d1d1d;
}

.pbpg-clear {
	color: #b8a687;
	border-color: #b8a687;
}

/* ---------- Compteur, vide, pagination ---------- */

/* Etiquette de couleur sans code hexadecimal : on montre une pastille vide
   plutot que rien, pour que la ligne garde son alignement. */
.pbpg-facet-dot--vide {
	background-color: transparent;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

/* La case a cocher des couleurs porte la teinte, comme le faisait le widget
   remplace : une seule pastille, qui sert aussi de case. */
.pbpg-box--couleur {
	/* Meme dessin que les pastilles des cartes : ronde, et non carree comme
	   les autres cases de la colonne. Le visiteur reconnait ainsi la meme
	   chose au filtre et sur le produit. */
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.pbpg-box--couleur.pbpg-box--vide {
	background-color: #ffffff;
	background-image: linear-gradient(
		135deg,
		transparent 45%,
		rgba(0, 0, 0, 0.2) 45%,
		rgba(0, 0, 0, 0.2) 55%,
		transparent 55%
	);
}

/* Etat coche : anneau noir autour de la pastille, sans toucher a la teinte.
   L'anneau est une ombre portee et non une bordure epaissie, pour que la
   pastille reste parfaitement ronde et ne deplace pas ses voisines.

   La specificite est calee sur celle de la regle generique des cases cochees
   (`.pbpg-facet-item input[type="checkbox"]:checked ~ .pbpg-box`), sans quoi
   cette derniere l'emporterait et repeindrait la pastille en noir. */
.pbpg-facet-item.is-active .pbpg-box--couleur,
.pbpg-facet-item input[type="checkbox"]:checked ~ .pbpg-box--couleur {
	border-width: 1px;
	border-color: #000000;
	box-shadow: 0 0 0 1px #000000;
}

/* Sous-rayons : boutons de sous-categories poses au-dessus de la grille.
   La barre defile horizontalement plutot que de passer a la ligne, pour ne pas
   repousser la grille quand une categorie compte beaucoup de sous-rayons. */
.pbpg-subnav {
	display: flex;
	flex-flow: row nowrap;
	gap: 6px;
	margin: 0 0 14px;
	padding-bottom: 4px;
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.pbpg-sub {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 12px;
	border: 1px solid rgba(0, 0, 0, 0.125);
	border-radius: 1px;
	background: #ffffff;
	color: #1d1d1d;
	font-family: "Montserrat", sans-serif;
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: 200ms;
}

.pbpg-sub:hover,
.pbpg-sub:focus {
	background-color: #d3d3d3;
	color: #1d1d1d;
	text-decoration: none;
}

.pbpg-sub.is-current {
	background-color: #000000;
	border-color: #000000;
	color: #ffffff;
}

.pbpg-sub-count {
	color: rgba(29, 29, 29, 0.45);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0;
}

.pbpg-sub.is-current .pbpg-sub-count {
	color: rgba(255, 255, 255, 0.6);
}

.pbpg-sub:focus-visible {
	outline: 2px solid #1d1d1d;
	outline-offset: 2px;
}

.pbpg-count {
	margin: 0 0 16px;
	color: #54595f;
	font-family: "Harmonia Sans", sans-serif;
	font-size: 13px;
}

.pbpg-empty {
	margin: 32px 0;
	color: #1d1d1d;
	font-family: "Harmonia Sans", sans-serif;
	font-size: 14px;
	text-align: center;
}

.pbpg-pagination {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 8px;
	margin: 24px 0 0;
}

.pbpg-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	border: 1px solid #dfdfdf;
	background: #ffffff;
	color: #1d1d1d;
	font-family: "Harmonia Sans", sans-serif;
	font-size: 13px;
	text-decoration: none;
	transition: 200ms;
}

.pbpg-page:hover {
	border-color: #1d1d1d;
}

.pbpg-page.is-current {
	background: #1d1d1d;
	border-color: #1d1d1d;
	color: #ffffff;
}

.pbpg-filters-submit {
	margin-top: 10px;
	padding: 10px 20px;
	border: 1px solid #b8a687;
	background: #ffffff;
	color: #b8a687;
	font-family: "Harmonia Sans", sans-serif;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

/* Le bouton d'ajout n'apparaît qu'une fois couleur ET taille choisies, et la
   combinaison disponible. Une grille de 24 boutons « Ajouter au panier » avant
   tout choix n'aide personne et alourdit la page. */
.pbpg-grid .pbpg-add {
	display: none;
}

.pbpg-grid .pbpg-item--ready .pbpg-add {
	display: block;
}

/* La croix de fermeture d'une puce de filtre actif. */
.pbpg-chip-x {
	margin-left: 6px;
	font-size: 13px;
	line-height: 1;
	opacity: 0.55;
}

.pbpg-chip:hover .pbpg-chip-x {
	opacity: 1;
}

/* ============================================================
   Carrousel de produits (widget PB Carrousel produits)
   La piste reprend la classe .pbpg-grid pour heriter de tout le
   style des cartes, et repasse en ligne au lieu de la grille.
   ============================================================ */

.pbpg-carousel {
	--pbpg-car-cols: 4;
	--pbpg-car-gap: 20px;
	--pbpg-car-arrow: 62px;
	--pbpg-car-arrow-top: 40%;

	position: relative;
}

.pbpg-carousel .pbpg-carousel-track {
	display: flex;
	grid-template-columns: none;
	gap: var(--pbpg-car-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.pbpg-carousel .pbpg-carousel-track::-webkit-scrollbar {
	display: none;
}

.pbpg-carousel .pbpg-carousel-track:focus-visible {
	outline: 2px solid #b8a687;
	outline-offset: 4px;
}

.pbpg-carousel .pbpg-item {
	flex: 0 0 calc((100% - var(--pbpg-car-gap) * (var(--pbpg-car-cols) - 1)) / var(--pbpg-car-cols));
	max-width: calc((100% - var(--pbpg-car-gap) * (var(--pbpg-car-cols) - 1)) / var(--pbpg-car-cols));
	scroll-snap-align: start;
}

/* ---------- Fleches ---------- */

.pbpg-carousel-nav {
	position: absolute;
	top: var(--pbpg-car-arrow-top);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: #f7f5f4;
	font-size: var(--pbpg-car-arrow);
	line-height: 1;
	background: none;
	border: 0;
	transform: translateY(-50%);
	cursor: pointer;
	transition: color 0.2s, opacity 0.2s;
}

.pbpg-carousel-nav--prev {
	left: 0;
}

.pbpg-carousel-nav--next {
	right: 0;
}

.pbpg-carousel-nav[hidden] {
	display: none;
}

.pbpg-carousel-nav:focus-visible {
	outline: 2px solid #b8a687;
	outline-offset: 2px;
}

/* Rien ne depasse : les fleches n'ont plus de raison d'etre. */
.pbpg-carousel--fixe .pbpg-carousel-nav {
	display: none;
}

/* ============================================================
   La case « en promotion »
   Seule facette hors accordeon : elle se pose en tete de colonne
   et reprend la hauteur d'un titre de facette, pour que la
   colonne garde son rythme.
   ============================================================ */

.pbpg-facet--promo {
	border-bottom: 1px solid rgba(66, 66, 66, 0.12);
}

/* Aucune surcharge de typographie : la ligne herite de .pbpg-facet-item, donc
   exactement la graisse, la casse et la couleur des filtres ranges dans les
   accordeons. Seul l'espacement est repris de la barre de titre, pour que la
   case tienne sa place en tete de colonne et que son compteur se range sur la
   meme colonne de chiffres que les autres. */
.pbpg-facet-item--solo {
	padding: 10px 26px 10px 0;
}