/* Boutique Filtres pour WooCommerce. Texte agrandi par défaut (lisibilité). Couleurs et taille réglables dans les réglages du plugin. */

.bfx {
	--bfx-ink: #141b24;
	--bfx-accent: #283444;
	--bfx-line: #c9cfd8;
	--bfx-soft: #eef0f3;
	--bfx-muted: #3d4753;
	--bfx-focus: #283444;
	--bfx-sale: #8f2d2d;
	color: var(--bfx-ink);
	font-size: var(--bfx-size, 17px);
	line-height: 1.5;
}
.bfx *,
.bfx *::before,
.bfx *::after { box-sizing: border-box; }

.bfx :focus-visible {
	outline: 3px solid var(--bfx-focus);
	outline-offset: 2px;
}

.bfx [hidden] { display: none !important; }

.bfx .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Rangée de pastilles (un groupe de filtres mis en avant) */
.bfx-types {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	margin-bottom: 26px;
	background: var(--bfx-soft);
	border-radius: 6px;
}
.bfx-types__label {
	margin-right: 6px;
	color: var(--bfx-muted);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.bfx-pill {
	min-height: 48px;
	padding: 0 22px;
	border: 2px solid #8b94a1;
	border-radius: 24px;
	background: #fff;
	color: var(--bfx-accent);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.bfx-pill.is-on {
	background: var(--bfx-accent);
	border-color: var(--bfx-accent);
	color: #fff;
}

/* Disposition */
.bfx-layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px 36px;
}
.bfx-side {
	flex: 0 0 268px;
	width: 268px;
	max-width: 100%;
}
.bfx-main {
	flex: 1 1 300px;
	min-width: 0;
}

/* Filtres */
.bfx-group { border-top: 1px solid var(--bfx-line); }
.bfx-group:last-child { border-bottom: 1px solid var(--bfx-line); }
.bfx-group > summary,
.bfx-more > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	cursor: pointer;
	list-style: none;
	font-weight: 700;
}
.bfx-group > summary::-webkit-details-marker,
.bfx-more > summary::-webkit-details-marker { display: none; }
.bfx-group > summary::after {
	content: "";
	width: 10px;
	height: 10px;
	border-right: 3px solid var(--bfx-muted);
	border-bottom: 3px solid var(--bfx-muted);
	transform: rotate(45deg);
	margin-right: 4px;
}
.bfx-group[open] > summary::after { transform: rotate(225deg); }
.bfx-more > summary {
	justify-content: flex-start;
	gap: 8px;
	color: var(--bfx-accent);
	font-weight: 600;
}
.bfx-group__body { padding-bottom: 12px; }

.bfx-opt {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 42px;
	cursor: pointer;
}
.bfx-opt__name { flex: 1; }
.bfx-count { color: var(--bfx-muted); font-size: 15px; }
.bfx-count::before { content: "("; }
.bfx-count::after { content: ")"; }
.bfx-opt input {
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--bfx-accent);
}

.bfx-swatches { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.bfx-sw { position: relative; cursor: pointer; }
.bfx-sw input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.bfx-sw__dot {
	display: block;
	width: 38px;
	height: 38px;
	border: 2px solid #8b94a1;
	border-radius: 50%;
}
.bfx-sw input:checked + .bfx-sw__dot { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--bfx-accent); }
.bfx-sw input:focus-visible + .bfx-sw__dot { outline: 3px solid var(--bfx-focus); outline-offset: 4px; }

/* Curseur de prix */
.bfx-slider {
	position: relative;
	height: 36px;
	margin: 6px 14px 4px;
}
.bfx-slider__track {
	position: absolute;
	left: 0;
	right: 0;
	top: 15px;
	height: 6px;
	border-radius: 3px;
	background: var(--bfx-line);
}
.bfx-slider__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 3px;
	background: var(--bfx-accent);
}
.bfx-slider input[type="range"] {
	position: absolute;
	left: -14px;
	top: 0;
	width: calc(100% + 28px);
	height: 36px;
	margin: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}
.bfx-slider input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 36px; }
.bfx-slider input[type="range"]::-moz-range-track { background: transparent; height: 36px; }
.bfx-slider input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 28px;
	height: 28px;
	margin-top: 4px;
	border: 5px solid var(--bfx-accent);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}
.bfx-slider input[type="range"]::-moz-range-thumb {
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border: 5px solid var(--bfx-accent);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}
.bfx-slider__label {
	margin: 0 0 10px;
	color: var(--bfx-muted);
	font-size: 16px;
}

.bfx-range {
	display: block;
	padding: 6px 0;
	color: var(--bfx-ink);
	text-decoration: none;
}
.bfx-range:hover { text-decoration: underline; }
.bfx-price { display: flex; gap: 8px; margin-top: 10px; }
.bfx-price input {
	flex: 1;
	min-width: 0;
	height: 46px;
	padding: 0 10px;
	border: 2px solid #8b94a1;
	border-radius: 6px;
	font: inherit;
	font-size: 16px;
}
.bfx-ok {
	height: 46px;
	padding: 0 16px;
	border: 2px solid var(--bfx-accent);
	border-radius: 23px;
	background: #fff;
	color: var(--bfx-accent);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* Barre de résultats */
.bfx-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--bfx-line);
}
.bfx-sortlabel { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.bfx-sort {
	height: 50px;
	padding: 0 14px;
	border: 2px solid #8b94a1;
	border-radius: 6px;
	background: #fff;
	color: var(--bfx-ink);
	font: inherit;
}

/* Filtres actifs */
.bfx-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 14px 0 22px;
}
.bfx-chip {
	min-height: 44px;
	padding: 0 16px;
	border: 2px solid var(--bfx-accent);
	border-radius: 22px;
	background: #eaeef4;
	color: var(--bfx-accent);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}
.bfx-clear {
	padding: 8px 4px;
	border: 0;
	background: none;
	color: var(--bfx-accent);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

/* Grille */
.bfx-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 32px 24px;
	transition: opacity .15s;
}
.bfx-grid.is-loading { opacity: .45; pointer-events: none; }
.bfx-empty { grid-column: 1 / -1; margin: 24px 0; color: var(--bfx-muted); }

.bfx-card { display: flex; flex-direction: column; min-width: 0; }
.bfx-card__img {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #e3e7ec;
	border-radius: 6px;
}
.bfx-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bfx-badge {
	position: absolute;
	top: 0;
	left: 0;
	padding: 4px 12px;
	border-radius: 6px 0 6px 0;
	background: var(--bfx-sale);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
}
.bfx-card__title {
	margin: 12px 0 0;
	min-height: 46px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
}
.bfx-card__title a { color: var(--bfx-ink); text-decoration: none; }
.bfx-card__title a:hover { text-decoration: underline; }
.bfx-card__price { margin: 4px 0 10px; font-size: 24px; font-weight: 700; }
.bfx-card__price del { color: var(--bfx-muted); font-size: 16px; font-weight: 400; }
.bfx-card__price ins { text-decoration: none; }

.bfx-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	margin-top: auto;
	padding: 0 16px;
	border: 2px solid var(--bfx-accent);
	border-radius: 27px;
	background: var(--bfx-accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.bfx-btn:hover { color: #fff; opacity: .92; }
.bfx-btn--alt { background: var(--bfx-accent); color: #fff; }
.bfx-btn--alt:hover { color: var(--bfx-accent); background: var(--bfx-soft); }

/* Pagination */
.bfx-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 40px;
}
.bfx-page {
	min-width: 52px;
	height: 52px;
	padding: 0 10px;
	border: 0;
	border-radius: 8px;
	background: var(--bfx-soft);
	color: var(--bfx-accent);
	font: inherit;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
}
.bfx-page.is-current { background: var(--bfx-accent); color: #fff; }
.bfx-gap { align-self: center; padding: 0 4px; }

/* Bouton « Filtres » (téléphone) */
.bfx-toggle {
	display: none;
	align-items: center;
	min-height: 52px;
	margin-bottom: 18px;
	padding: 0 24px;
	border: 2px solid var(--bfx-accent);
	border-radius: 26px;
	background: #fff;
	color: var(--bfx-accent);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

@media (max-width: 900px) {
	.bfx-toggle { display: inline-flex; }
	.bfx-side { display: none; flex-basis: 100%; width: 100%; }
	.bfx--open .bfx-side { display: block; }
	.bfx-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 24px 16px; }
}

/* Protection contre les styles du thème / d'Elementor (boutons et curseurs) */
.bfx a.bfx-btn,
.bfx a.button.bfx-btn {
	display: flex;
	background: var(--bfx-accent);
	border: 2px solid var(--bfx-accent);
	color: #fff !important;
	opacity: 1;
	text-shadow: none;
	box-shadow: none;
	font-size: inherit;
	line-height: 1.3;
}
.bfx a.bfx-btn:hover { color: #fff !important; opacity: .9; }
/* Un seul style de bouton: « Personnaliser » = même apparence que « Ajouter au panier ». */
.bfx a.bfx-btn--alt,
.bfx a.button.bfx-btn--alt {
	background: var(--bfx-accent);
	color: #fff !important;
}
.bfx a.bfx-btn--alt:hover { background: var(--bfx-accent); color: #fff !important; opacity: .9; }
.bfx a.bfx-btn.loading { opacity: .6; }
.bfx a.bfx-btn.added::after,
.bfx a.bfx-btn.loading::after { position: static; margin-left: 8px; }
.bfx a.added_to_cart { display: block; margin-top: 8px; color: var(--bfx-accent); font-weight: 600; }

.bfx .bfx-slider { min-height: 36px; }
.bfx .bfx-slider__track { z-index: 0; background: var(--bfx-line); }
.bfx .bfx-slider input[type="range"] {
	z-index: 2;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	min-height: 0 !important;
	height: 36px !important;
	accent-color: var(--bfx-accent);
}
.bfx .bfx-slider input[type="range"]::-webkit-slider-thumb { position: relative; z-index: 3; }

/* Champs Min / Max: texte lisible malgré les styles du thème */
.bfx .bfx-price input[type="number"] {
	background: #fff !important;
	color: var(--bfx-ink) !important;
	-webkit-text-fill-color: var(--bfx-ink);
	opacity: 1 !important;
	border: 2px solid #8b94a1 !important;
	font-size: 17px !important;
	font-weight: 600;
}
.bfx .bfx-price input[type="number"]::placeholder {
	color: var(--bfx-muted) !important;
	-webkit-text-fill-color: var(--bfx-muted);
	opacity: 1 !important;
	font-weight: 400;
}
.bfx .bfx-price input[type="number"]:focus { border-color: var(--bfx-accent) !important; }

/* Texte des options et compteurs plus foncés (lisibilité) */
.bfx .bfx-opt,
.bfx .bfx-opt__name,
.bfx .bfx-range { color: var(--bfx-ink) !important; }
.bfx .bfx-count { color: var(--bfx-muted) !important; font-size: 16px; }
.bfx .bfx-range { font-weight: 500; }

/* Groupes à affichage conditionnel */
.bfx .bfx-nowhen { display: none !important; }

/* Groupe affiché seulement en pastilles (ses cases restent dans la page, cachées) */
.bfx .bfx-pillonly { display: none !important; }
/* Plusieurs rangées de pastilles: espacement réduit entre elles */
.bfx .bfx-types { margin-bottom: 12px; }
.bfx .bfx-types:last-of-type { margin-bottom: 26px; }

/* Pastilles: choisie = foncée, non choisie = blanche (malgré les styles du thème) */
.bfx .bfx-pill {
	background: #fff !important;
	color: var(--bfx-accent) !important;
	border: 2px solid #8b94a1 !important;
	border-radius: 24px !important;
	box-shadow: none !important;
	text-transform: none !important;
	font-size: inherit !important;
	letter-spacing: 0 !important;
	min-height: 48px;
	padding: 0 22px !important;
}
.bfx .bfx-pill:hover { border-color: var(--bfx-accent) !important; }
.bfx .bfx-pill.is-on {
	background: var(--bfx-accent) !important;
	border-color: var(--bfx-accent) !important;
	color: #fff !important;
}
.bfx .bfx-types__label { margin-right: 8px; }

/* Allègement des rangées de pastilles: sans fond gris, plus compactes */
.bfx .bfx-types {
	background: none !important;
	padding: 0 !important;
	margin: 0 0 14px !important;
	gap: 8px !important;
	border-radius: 0 !important;
}
.bfx .bfx-types__label {
	flex: 0 0 100%;
	margin: 0 0 2px !important;
	font-size: 14px !important;
}
.bfx .bfx-pill {
	min-height: 42px !important;
	padding: 0 16px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
}
/* Rangée secondaire (types, formats…): en retrait avec un trait à gauche */
.bfx .bfx-types ~ .bfx-types {
	margin-left: 4px !important;
	padding-left: 14px !important;
	border-left: 4px solid var(--bfx-focus);
}
.bfx .bfx-types:last-of-type { margin-bottom: 22px !important; }

/* Pastilles plus compactes pour tenir sur une ligne; la page ne saute pas */
.bfx .bfx-pill {
	min-height: 40px !important;
	padding: 0 13px !important;
	font-size: 15px !important;
	line-height: 1.2 !important;
	white-space: nowrap;
}
.bfx .bfx-types { gap: 6px !important; }
.bfx { overflow-anchor: none; }

/* ===== Tuiles plates (style MEC / Article), avec ou sans image ===== */
.bfx .bfx-types {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 8px !important;
}
.bfx .bfx-types__label { grid-column: 1 / -1; flex: none; }
.bfx .bfx-pill {
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-height: 56px !important;
	padding: 8px 12px !important;
	border: 1px solid #8b94a1 !important;
	border-radius: 4px !important;
	background: #fff !important;
	color: var(--bfx-ink) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.25 !important;
	text-align: center;
	white-space: normal !important;
}
.bfx .bfx-pill[hidden] { display: none !important; }
.bfx .bfx-pill:hover { border-color: var(--bfx-accent) !important; box-shadow: 0 0 0 1px var(--bfx-accent) !important; }
.bfx .bfx-pill.is-on {
	background: var(--bfx-accent) !important;
	border-color: var(--bfx-accent) !important;
	color: #fff !important;
	font-weight: 700 !important;
}
.bfx .bfx-types--img .bfx-pill {
	flex-direction: column;
	justify-content: flex-start;
	padding: 0 !important;
	overflow: hidden;
}
.bfx .bfx-pill__img { display: block; width: 100%; aspect-ratio: 4 / 3; background: #e3e7ec; }
.bfx .bfx-pill__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bfx .bfx-types--img .bfx-pill__t { display: block; padding: 10px 8px; }

/* Les rangées/groupes masqués restent masqués (priorité sur le style des tuiles) */
.bfx .bfx-types.bfx-nowhen,
.bfx details.bfx-nowhen,
.bfx details.bfx-pillonly { display: none !important; }

.bfx .bfx-types.bfx-emptyrow { display: none !important; }

/* Tuiles un peu plus étroites: 9 catégories sur une ligne dès ~1350 px de large */
.bfx .bfx-types { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
.bfx .bfx-types--img { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.bfx .bfx-pill { padding: 8px 8px !important; }

/* Les sous-catégories s'échangent sur place (pas de décalage de la page): seule la nouvelle rangée apparaît en fondu. */
@keyframes bfx-in { from { opacity: 0; } to { opacity: 1; } }
.bfx .bfx-types:not(.bfx-nowhen):not(.bfx-emptyrow) ~ .bfx-types:not(.bfx-nowhen):not(.bfx-emptyrow),
.bfx .bfx-types[data-when]:not(.bfx-nowhen):not(.bfx-emptyrow) { animation: bfx-in .2s ease-out; }
@media (prefers-reduced-motion: reduce) { .bfx .bfx-types { animation: none !important; } }

/* Étiquette « Sur commande » (produit pas en stock) */
.bfx .bfx-badge.bfx-badge--order { top: auto; bottom: 8px; background: #555; color: #fff; }

/* Cartes alignées: titre de hauteur variable, prix et bouton toujours à la même hauteur dans la rangée */
.bfx .bfx-grid { align-items: stretch; }
.bfx .bfx-card { height: 100%; }
.bfx .bfx-card__title { flex: 1 1 auto; min-height: 0; }
.bfx .bfx-card__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; line-height: 1.2; }
.bfx .bfx-card__price del, .bfx .bfx-card__price ins { display: inline; }

/* Banderole « X restants » sur le bas de l'image: ne change pas la hauteur des cartes */
.bfx .bfx-card__img .bfx-ribbon {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 7px 10px;
	background: rgba(179, 38, 30, .92);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
}

/* Léger cadre autour des photos: les images sur fond blanc gardent une forme nette, avec ou sans banderole */
.bfx .bfx-card__img { border: 1px solid #dfe2e7; border-radius: 6px; box-sizing: border-box; overflow: hidden; }

/* Sous-catégories: bandeau bleu compact qui « sort » de la rangée des catégories */
.bfx .bfx-types ~ .bfx-types:not(.bfx-nowhen):not(.bfx-emptyrow) {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px !important;
	margin: -12px 0 22px !important;
	padding: 10px 12px !important;
	border-left: 0 !important;
	border-radius: 0 0 8px 8px !important;
	background: var(--bfx-accent) !important;
	animation: bfx-drop .24s ease-out;
}
@keyframes bfx-drop { from { clip-path: inset(0 0 100% 0); opacity: .5; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
.bfx .bfx-types ~ .bfx-types .bfx-types__label { display: none !important; }
.bfx .bfx-types ~ .bfx-types .bfx-pill {
	min-height: 38px !important;
	padding: 0 16px !important;
	font-size: 15px !important;
	background: transparent !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, .55) !important;
	border-radius: 6px !important;
}
.bfx .bfx-types ~ .bfx-types .bfx-pill:hover { background: rgba(255, 255, 255, .15) !important; border-color: #fff !important; }
.bfx .bfx-types ~ .bfx-types .bfx-pill.is-on { background: #fff !important; color: var(--bfx-accent) !important; border-color: #fff !important; font-weight: 700 !important; }
@media (prefers-reduced-motion: reduce) { .bfx .bfx-types ~ .bfx-types { animation: none !important; } }

/* Plus de contraste dans le bandeau: tuiles blanches; la tuile choisie est foncée avec un cadre blanc */
.bfx .bfx-types ~ .bfx-types .bfx-pill { background: #fff !important; color: var(--bfx-accent) !important; border: 1px solid #fff !important; font-weight: 600 !important; }
.bfx .bfx-types ~ .bfx-types .bfx-pill:hover { background: #e9edf2 !important; border-color: #e9edf2 !important; }
.bfx .bfx-types ~ .bfx-types .bfx-pill.is-on { background: var(--bfx-accent) !important; color: #fff !important; border: 2px solid #fff !important; font-weight: 700 !important; }

/* Recherche */
.bfx .bfx-searchrow { margin: 0 0 14px; }
.bfx input.bfx-search {
	display: block; width: 100%; box-sizing: border-box; height: 52px; padding: 0 16px 0 46px;
	border: 2px solid #8b94a1 !important; border-radius: 8px !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23283444' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M16 16l5 5'/%3E%3C/svg%3E") no-repeat 14px center !important;
	color: var(--bfx-ink) !important; font: inherit; font-size: 17px !important; box-shadow: none !important;
}
.bfx input.bfx-search:focus { border-color: var(--bfx-accent) !important; outline: 2px solid var(--bfx-focus, #c8a45c); outline-offset: 1px; }

/* Recherche dans la barre des résultats (entre le nombre de résultats et le tri) */
.bfx .bfx-bar { gap: 14px 20px; flex-wrap: wrap; }
.bfx .bfx-bar .bfx-summary { flex: 0 0 auto; }
.bfx .bfx-bar input.bfx-search { flex: 1 1 240px; width: auto; min-width: 200px; max-width: 460px; height: 46px; margin: 0 auto; }
.bfx .bfx-bar .bfx-sortlabel { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 700px) { .bfx .bfx-bar input.bfx-search { order: 3; flex: 1 1 100%; max-width: none; } }

/* Lignes: un trait sous chaque groupe visible (jamais de trait orphelin quand un groupe est caché) */
.bfx .bfx-group, .bfx .bfx-group:last-child { border-top: 0 !important; border-bottom: 1px solid var(--bfx-line) !important; }
.bfx .bfx-group { margin: 0; }
.bfx .bfx-bar { border-bottom: 0 !important; padding-bottom: 6px; }

/* Cases de recherche et de tri: bordure plus fine */
.bfx input.bfx-search, .bfx select.bfx-sort { border-width: 1px !important; border-color: #aab3bf !important; }
.bfx input.bfx-search:focus, .bfx select.bfx-sort:focus { border-color: var(--bfx-accent) !important; }

/* Focus: bleu marine partout (plus de brun) */
.bfx *:focus, .bfx *:focus-visible { outline-color: var(--bfx-accent) !important; }
.bfx input.bfx-search:focus, .bfx select.bfx-sort:focus { outline: 2px solid var(--bfx-accent) !important; outline-offset: 1px !important; border-color: var(--bfx-accent) !important; box-shadow: none !important; }
.bfx button:focus-visible, .bfx a:focus-visible { outline: 2px solid var(--bfx-accent) !important; outline-offset: 2px !important; box-shadow: none !important; }

.bfx .bfx-card__price .bfx-card__ask { font-size: 18px; font-weight: 600; color: var(--bfx-muted); }

/* ===== Téléphone ===== */
@media (max-width: 700px) {
	/* Rangées de catégories: une seule ligne qu'on fait glisser du doigt */
	.bfx .bfx-types { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 8px !important; padding-bottom: 6px !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none; }
	.bfx .bfx-types::-webkit-scrollbar { display: none; }
	.bfx .bfx-types .bfx-types__label { display: none !important; }
	.bfx .bfx-types .bfx-pill { flex: 0 0 auto; min-width: 118px; max-width: 190px; scroll-snap-align: start; white-space: normal; }
	.bfx .bfx-types ~ .bfx-types:not(.bfx-nowhen):not(.bfx-emptyrow) { padding: 10px 12px !important; border-radius: 0 0 8px 8px !important; }
	.bfx .bfx-types ~ .bfx-types .bfx-pill { min-width: 0; white-space: nowrap; }

	/* Barre: recherche en premier, puis nombre de résultats et tri */
	.bfx .bfx-bar { gap: 10px 12px; }
	.bfx .bfx-bar input.bfx-search { order: -1; flex: 1 1 100%; max-width: none; margin: 0; }
	.bfx .bfx-bar .bfx-summary { flex: 1 1 auto; }
	.bfx .bfx-bar .bfx-sortlabel span { display: none; }

	/* Cartes sur 2 colonnes: textes et boutons qui tiennent sur une ligne */
	.bfx .bfx-grid { gap: 20px 12px; }
	.bfx .bfx-card__title { font-size: 16px; }
	.bfx .bfx-card__price { font-size: 20px; gap: 6px; }
	.bfx .bfx-btn, .bfx a.bfx-btn, .bfx a.button.bfx-btn { font-size: 14px !important; padding: 0 8px !important; min-height: 48px !important; line-height: 1.15; }
	.bfx .bfx-card__img .bfx-ribbon { font-size: 14px; padding: 5px 6px; }
}

/* Bouton « Voir X résultats » en bas du panneau de filtres (téléphone) */
.bfx .bfx-apply { display: none; }
@media (max-width: 900px) {
	.bfx.bfx--open .bfx-apply { display: block; position: sticky; bottom: 8px; width: 100%; margin-top: 16px; min-height: 52px; border: 0; border-radius: 27px; background: var(--bfx-accent); color: #fff; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
}

/* Catégories en menu déroulant + bouton Filtres pleine largeur (téléphone et tablette) */
.bfx .bfx-catselect { display: none; }
@media (max-width: 900px) {
	.bfx select.bfx-catselect {
		display: block; width: 100%; box-sizing: border-box; height: 52px; margin: 0 0 12px; padding: 0 14px;
		border: 1px solid #aab3bf !important; border-radius: 8px !important; background-color: #fff !important;
		color: var(--bfx-ink) !important; font: inherit; font-size: 17px !important; font-weight: 600;
	}
	.bfx .bfx-types.bfx-hasselect { display: none !important; }
	.bfx .bfx-types ~ .bfx-types:not(.bfx-nowhen):not(.bfx-emptyrow) { margin: -4px 0 16px !important; border-radius: 8px !important; }
	.bfx .bfx-toggle { display: flex !important; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin: 0 0 14px; border-radius: 8px; }
}

@media (max-width: 900px) {
	.bfx .bfx-types.bfx-nowhen + .bfx-catselect, .bfx .bfx-types.bfx-emptyrow + .bfx-catselect { display: none !important; }
}
@media (max-width: 900px) {
	.bfx .bfx-types ~ .bfx-types.bfx-hasselect:not(.bfx-nowhen):not(.bfx-emptyrow),
	.bfx .bfx-types.bfx-hasselect:not(.bfx-nowhen):not(.bfx-emptyrow) { display: none !important; animation: none !important; }
}

/* Téléphone: filtres actifs sur une seule ligne glissante; résultats et tri sur la même ligne */
@media (max-width: 700px) {
	.bfx .bfx-chips { flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin: 10px 0 14px; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.bfx .bfx-chips::-webkit-scrollbar { display: none; }
	.bfx .bfx-chips .bfx-chip, .bfx .bfx-chips .bfx-clear { flex: 0 0 auto; white-space: nowrap; min-height: 38px; padding: 0 12px; font-size: 15px; }
	.bfx .bfx-bar .bfx-summary { font-size: 16px; flex: 1 1 0; min-width: 0; }
	.bfx .bfx-bar .bfx-sortlabel { flex: 0 0 auto; }
	.bfx .bfx-bar select.bfx-sort { width: auto; max-width: 160px; height: 44px; padding: 0 10px; font-size: 16px; }
}

/* Bouton « Filtres »: appel à l'action (téléphone et tablette) */
@media (max-width: 900px) {
	.bfx button.bfx-toggle {
		gap: 10px; min-height: 56px; border: 0 !important; border-radius: 28px !important;
		background: var(--bfx-accent) !important; color: #fff !important;
		font-size: 18px !important; font-weight: 700 !important; letter-spacing: .2px;
		box-shadow: 0 3px 10px rgba(40, 52, 68, .28) !important;
	}
	.bfx button.bfx-toggle::before {
		content: ""; width: 22px; height: 22px; flex: 0 0 22px;
		background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h2M10 17h10'/%3E%3Ccircle cx='16' cy='7' r='2.2'/%3E%3Ccircle cx='8' cy='17' r='2.2'/%3E%3C/svg%3E");
	}
	.bfx button.bfx-toggle[data-count]:not([data-count="0"])::after {
		content: attr(data-count); min-width: 26px; height: 26px; padding: 0 6px; box-sizing: border-box;
		border-radius: 13px; background: #fff; color: var(--bfx-accent); font-size: 15px; line-height: 26px; text-align: center;
	}
	.bfx button.bfx-toggle:active { transform: translateY(1px); }
}

/* Tablette: recherche pleine largeur, résultats et tri en dessous */
@media (max-width: 900px) {
	.bfx .bfx-bar input.bfx-search { order: -1; flex: 1 1 100%; max-width: none; margin: 0; }
	.bfx .bfx-bar .bfx-summary { flex: 1 1 0; min-width: 0; }
	.bfx .bfx-bar .bfx-sortlabel { flex: 0 0 auto; margin-left: auto; }
}

/* Ordinateur: recherche en haut de la colonne de filtres */
@media (min-width: 901px) {
	.bfx .bfx-form input.bfx-search { width: 100%; max-width: none; height: 48px; margin: 0 0 18px; }
}

/* Ordinateur: résultats/tri et filtres actifs en haut, puis colonne de filtres (recherche en tête) alignée sur le haut des produits */
@media (min-width: 901px) {
	.bfx .bfx-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 0 36px; align-items: start; margin-top: 28px; }
	.bfx .bfx-main { display: contents; }
	.bfx .bfx-bar { grid-column: 1 / -1; grid-row: 1; margin-bottom: 4px; }
	.bfx .bfx-chips { grid-column: 1 / -1; grid-row: 2; margin: 10px 0 20px; }
	.bfx .bfx-chips[hidden] { display: none !important; }
	.bfx .bfx-side { grid-column: 1; grid-row: 3 / span 2; width: auto; }
	.bfx .bfx-grid { grid-column: 2; grid-row: 3; }
	.bfx .bfx-pagination-wrap { grid-column: 2; grid-row: 4; }
}

/* Ordinateur: « 1–12 sur N résultats » + tri au-dessus des produits seulement; la recherche démarre au même niveau */
@media (min-width: 901px) {
	.bfx .bfx-chips { grid-row: 1; margin: 0 0 16px; }
	.bfx .bfx-bar { grid-column: 2; grid-row: 2; margin: 0 0 18px; align-self: center; }
	.bfx .bfx-side { grid-column: 1; grid-row: 2 / span 3; }
	.bfx .bfx-grid { grid-column: 2; grid-row: 3; }
	.bfx .bfx-pagination-wrap { grid-column: 2; grid-row: 4; }
}

/* Filtres actifs: étiquettes discrètes */
.bfx .bfx-chips { gap: 8px; margin: 0 0 14px; }
.bfx .bfx-chips .bfx-chip {
	min-height: 34px; padding: 0 12px; border: 1px solid #c9ced6 !important; border-radius: 17px;
	background: #fff !important; color: #283444 !important; font-size: 15px; font-weight: 500; box-shadow: none;
}
.bfx .bfx-chips .bfx-chip:hover { border-color: #283444 !important; background: #f4f6f9 !important; }
.bfx .bfx-chips .bfx-clear {
	padding: 0 4px; min-height: 34px; background: none !important; border: 0 !important; box-shadow: none;
	color: #5a6472 !important; font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 2px;
}
.bfx .bfx-chips .bfx-clear:hover { color: #283444 !important; }

/* Compact: moins de hauteur pour les catégories, sous-catégories et en-tête */
.bfx .bfx-types { margin: 0 0 8px !important; gap: 6px !important; }
.bfx .bfx-types:first-of-type .bfx-types__label { display: none !important; }
.bfx .bfx-types:first-of-type .bfx-pill { min-height: 44px !important; font-size: 15px !important; }
.bfx .bfx-types ~ .bfx-types:not(.bfx-nowhen):not(.bfx-emptyrow) {
	margin: -8px 0 12px !important; padding: 6px 8px !important; gap: 6px !important; border-radius: 0 0 6px 6px !important;
}
.bfx .bfx-types ~ .bfx-types .bfx-pill { min-height: 32px !important; padding: 0 12px !important; font-size: 14px !important; border-radius: 5px !important; }
.bfx .bfx-types:last-of-type { margin-bottom: 12px !important; }
@media (min-width: 901px) {
	.bfx .bfx-layout { margin-top: 12px; }
	.bfx .bfx-chips { margin: 0 0 10px; }
	.bfx .bfx-bar { margin: 0 0 12px; }
	.bfx .bfx-form input.bfx-search { height: 44px; margin: 0 0 12px; }
}

/* Catégories principales: taille normale, bien lisibles */
.bfx .bfx-types:first-of-type .bfx-pill { min-height: 56px !important; font-size: 16px !important; }

/* Tuiles un peu plus grosses (catégories et sous-catégories) */
.bfx .bfx-types:first-of-type .bfx-pill { min-height: 62px !important; font-size: 17px !important; }
.bfx .bfx-types ~ .bfx-types:not(.bfx-nowhen):not(.bfx-emptyrow) { padding: 8px 10px !important; margin: -8px 0 14px !important; }
.bfx .bfx-types ~ .bfx-types .bfx-pill { min-height: 40px !important; padding: 0 16px !important; font-size: 16px !important; }

/* Tuiles: bleu-gris (comme les anciennes étiquettes); la sélection devient foncée */
.bfx .bfx-types:first-of-type .bfx-pill {
	background: #4c607a !important; color: #fff !important; border: 2px solid #4c607a !important;
}
.bfx .bfx-types:first-of-type .bfx-pill:hover { background: #3d4f68 !important; border-color: #3d4f68 !important; }
.bfx .bfx-types:first-of-type .bfx-pill.is-on { background: #283444 !important; border-color: #283444 !important; font-weight: 700 !important; }
.bfx .bfx-types ~ .bfx-types .bfx-pill { background: #4c607a !important; color: #fff !important; border: 1px solid #6d7f97 !important; }
.bfx .bfx-types ~ .bfx-types .bfx-pill:hover { background: #5f738d !important; border-color: #8fa0b5 !important; }
.bfx .bfx-types ~ .bfx-types .bfx-pill.is-on { background: #fff !important; color: #283444 !important; border: 1px solid #fff !important; font-weight: 700 !important; }

/* Sous-catégories: sans bande, simple rangée de petites tuiles sous les catégories */
.bfx .bfx-types ~ .bfx-types:not(.bfx-nowhen):not(.bfx-emptyrow) {
	background: none !important; padding: 0 !important; margin: 0 0 14px !important; border-radius: 0 !important;
	animation: bfx-in .2s ease-out;
}
.bfx .bfx-types ~ .bfx-types .bfx-pill {
	min-height: 40px !important; padding: 0 16px !important; font-size: 16px !important;
	background: #4c607a !important; color: #fff !important; border: 2px solid #4c607a !important; border-radius: 6px !important;
}
.bfx .bfx-types ~ .bfx-types .bfx-pill:hover { background: #3d4f68 !important; border-color: #3d4f68 !important; }
.bfx .bfx-types ~ .bfx-types .bfx-pill.is-on { background: #283444 !important; color: #fff !important; border-color: #283444 !important; font-weight: 700 !important; }
.bfx .bfx-types .bfx-pill:focus, .bfx .bfx-types .bfx-pill:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(76, 96, 122, .35) !important; }
.bfx .bfx-types .bfx-pill.is-on:focus { box-shadow: none !important; }

/* Sous-catégories: fond clair derrière la rangée */
.bfx .bfx-types ~ .bfx-types:not(.bfx-nowhen):not(.bfx-emptyrow) {
	background: #e9edf2 !important; padding: 8px 10px !important; margin: -2px 0 14px !important; border-radius: 0 0 6px 6px !important;
}

/* Système unique: non choisi = blanc + contour marine; choisi = marine plein (catégories, sous-catégories, pages) */
.bfx .bfx-types .bfx-pill,
.bfx .bfx-types ~ .bfx-types .bfx-pill {
	background: #fff !important; color: #283444 !important; border: 2px solid #283444 !important;
}
.bfx .bfx-types .bfx-pill:hover,
.bfx .bfx-types ~ .bfx-types .bfx-pill:hover { background: #e9edf2 !important; border-color: #283444 !important; }
.bfx .bfx-types .bfx-pill.is-on,
.bfx .bfx-types ~ .bfx-types .bfx-pill.is-on {
	background: #283444 !important; color: #fff !important; border-color: #283444 !important; font-weight: 700 !important;
}
.bfx .bfx-types .bfx-pill:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(40, 52, 68, .3) !important; }
.bfx .bfx-types .bfx-pill.is-on:focus-visible { box-shadow: 0 0 0 3px rgba(40, 52, 68, .3) !important; }
.bfx .bfx-types ~ .bfx-types:not(.bfx-nowhen):not(.bfx-emptyrow) { background: #eef1f5 !important; margin: -2px 0 14px !important; }
.bfx .bfx-page { background: #fff !important; color: #283444 !important; border: 2px solid #283444 !important; }
.bfx .bfx-page:hover { background: #e9edf2 !important; }
.bfx .bfx-page.is-current { background: #283444 !important; color: #fff !important; }

/* Grosses tuiles de catégories: marine plein; la choisie a un liseré blanc intérieur */
.bfx .bfx-types:first-of-type .bfx-pill {
	background: #283444 !important; color: #fff !important; border: 2px solid #283444 !important; box-shadow: none;
}
.bfx .bfx-types:first-of-type .bfx-pill:hover { background: #33435a !important; border-color: #33435a !important; }
.bfx .bfx-types:first-of-type .bfx-pill.is-on {
	background: #283444 !important; border-color: #283444 !important; font-weight: 700 !important;
	box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px #283444 !important;
}
.bfx .bfx-types:first-of-type .bfx-pill:focus-visible { box-shadow: 0 0 0 3px rgba(40, 52, 68, .35) !important; }
.bfx .bfx-types:first-of-type .bfx-pill.is-on:focus-visible { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px #283444, 0 0 0 3px rgba(40, 52, 68, .35) !important; }

/* Mobile: toujours 2 colonnes, même sur un écran étroit */
@media (max-width: 700px) {
	.bfx .bfx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px 10px; }
	.bfx .bfx-card__title { font-size: 15px; line-height: 1.25; }
	.bfx .bfx-card__price { font-size: 18px; }
	.bfx .bfx-card__price del { font-size: 14px; }
	.bfx .bfx-card__price .bfx-card__ask { font-size: 15px; }
	.bfx .bfx-btn, .bfx a.bfx-btn, .bfx a.button.bfx-btn { font-size: 14px !important; min-height: 46px !important; padding: 0 6px !important; white-space: normal; }
}
@media (max-width: 360px) {
	.bfx .bfx-card__title { font-size: 14px; }
	.bfx .bfx-btn, .bfx a.bfx-btn, .bfx a.button.bfx-btn { font-size: 13px !important; }
}

/* Tablette: 3 colonnes (cartes plus larges, textes plus lisibles) */
@media (min-width: 701px) and (max-width: 900px) {
	.bfx .bfx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 22px 16px; }
	.bfx .bfx-card__title { font-size: 17px; }
	.bfx .bfx-card__price { font-size: 22px; }
	.bfx .bfx-btn, .bfx a.bfx-btn, .bfx a.button.bfx-btn { font-size: 15px !important; min-height: 50px !important; padding: 0 10px !important; }
}

.bfx .bfx-card__from { font-size: 16px; font-weight: 500; color: var(--bfx-muted); }
.bfx .bfx-card__from strong { font-size: 20px; font-weight: 700; color: var(--bfx-ink); }

.bfx .bfx-card__price .azur-signet-from-price { font-size: 20px; font-weight: 700; color: var(--bfx-ink); }
@media (max-width: 700px) { .bfx .bfx-card__price .azur-signet-from-price { font-size: 16px; } }

/* Catégories avec image: vignette compacte à gauche du texte (même hauteur de rangée) */
@media (min-width: 901px) {
	.bfx .bfx-types--img .bfx-pill {
		flex-direction: row !important; justify-content: flex-start !important; align-items: center; gap: 10px;
		padding: 0 10px !important; min-height: 62px !important; text-align: left; overflow: hidden;
	}
	.bfx .bfx-types--img .bfx-pill__img {
		flex: 0 0 44px; width: 44px; height: 44px; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: #fff;
	}
	.bfx .bfx-types--img .bfx-pill__img:empty { display: none; }
	.bfx .bfx-types--img .bfx-pill__img img { width: 100%; height: 100%; object-fit: cover; }
	.bfx .bfx-types--img .bfx-pill__t { padding: 0 !important; flex: 1 1 auto; min-width: 0; line-height: 1.2; }
}
@media (max-width: 900px) {
	.bfx .bfx-pill__img { display: none !important; }
}

/* Tuiles avec vignette: le texte long passe à la ligne (pas coupé) */
@media (min-width: 901px) {
	.bfx .bfx-types--img .bfx-pill { white-space: normal !important; gap: 8px; padding: 0 8px !important; }
	.bfx .bfx-types--img .bfx-pill__img { flex-basis: 40px; width: 40px; height: 40px; }
	.bfx .bfx-types--img .bfx-pill__t { font-size: 15px; hyphens: auto; overflow-wrap: break-word; }
}

/* ---- Lisibilité (aînés): textes plus foncés et plus gros, zones de clic plus grandes ---- */
.bfx { --bfx-muted: #2b3440; }
.bfx .bfx-count, .bfx .bfx-count::before, .bfx .bfx-count::after { color: #2b3440 !important; font-size: 17px !important; }
.bfx .bfx-sortlabel, .bfx .bfx-sortlabel span { color: #283444 !important; font-size: 17px !important; }
.bfx .bfx-card__price del { color: #3d4753 !important; font-size: 18px !important; }
.bfx input.bfx-search::placeholder { color: #4a5563 !important; opacity: 1 !important; font-size: 17px !important; }
.bfx .bfx-slider__label { font-size: 18px !important; font-weight: 600; color: #283444 !important; }
.bfx .bfx-range { font-size: 18px !important; padding: 9px 0 !important; font-weight: 600; }
.bfx .bfx-types ~ .bfx-types .bfx-pill { font-size: 17px !important; min-height: 44px !important; }
/* Curseur de prix: poignées plus faciles à attraper */
.bfx .bfx-slider { min-height: 44px; }
.bfx .bfx-slider input[type="range"] { height: 44px !important; }
.bfx .bfx-slider input[type="range"]::-webkit-slider-runnable-track { height: 44px; }
.bfx .bfx-slider input[type="range"]::-moz-range-track { height: 44px; }
.bfx .bfx-slider input[type="range"]::-webkit-slider-thumb { width: 36px; height: 36px; margin-top: 4px; border-width: 6px; }
.bfx .bfx-slider input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-width: 6px; }
/* Couleurs: pastille + nom visible */
.bfx .bfx-swatches { display: flex; flex-direction: column; gap: 4px; }
.bfx .bfx-sw { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.bfx .bfx-sw[hidden] { display: none; }
.bfx .bfx-sw__dot { flex: none; width: 30px; height: 30px; }
.bfx .bfx-sw__name { font-size: 17px; color: #283444; }
.bfx .bfx-sw input:checked ~ .bfx-sw__name { font-weight: 700; }
.bfx .bfx-sw input:checked + .bfx-sw__dot { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--bfx-accent); }
/* Focus clavier plus visible */
.bfx button:focus-visible, .bfx a:focus-visible, .bfx select:focus-visible, .bfx input:focus-visible { outline: 3px solid #283444 !important; outline-offset: 3px !important; }
/* Mobile: textes des cartes un peu plus gros */
@media (max-width: 700px) {
	.bfx .bfx-btn, .bfx a.bfx-btn, .bfx a.button.bfx-btn { font-size: 15px !important; }
	.bfx .bfx-card__title { font-size: 16px; }
}

/* Ordinateur: la colonne de filtres (plus haute que les produits) ne doit pas étirer les lignes de la grille. */
@media (min-width: 901px) {
	.bfx .bfx-layout { grid-template-rows: auto auto auto 1fr; align-content: start; }
}

/* Couleurs sur deux colonnes (plus compact, noms toujours visibles) */
.bfx .bfx-swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.bfx .bfx-sw { gap: 8px; padding: 5px 0; min-width: 0; }
.bfx .bfx-sw__dot { width: 26px; height: 26px; }
.bfx .bfx-sw__name { font-size: 16px; line-height: 1.15; overflow-wrap: anywhere; }

/* Couleurs: retour aux ronds seuls (comme les grandes boutiques); le nom reste lu par les lecteurs d'écran et en infobulle */
.bfx .bfx-swatches { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; padding-top: 6px; }
.bfx .bfx-sw { display: block; padding: 0; }
.bfx .bfx-sw__dot { width: 38px; height: 38px; }
.bfx .bfx-sw__name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.bfx .bfx-sw input:checked + .bfx-sw__dot { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--bfx-accent); }

/* Colonne de filtres: titres de sections et options plus gros */
.bfx .bfx-group > summary { font-size: 20px !important; font-weight: 700 !important; }
.bfx .bfx-opt { min-height: 46px; gap: 12px; }
.bfx .bfx-opt__name { font-size: 18px !important; color: #283444; }
.bfx .bfx-opt input { width: 26px; height: 26px; }
.bfx .bfx-count, .bfx .bfx-count::before, .bfx .bfx-count::after { font-size: 18px !important; }

/* Banderole « X restants »: étiquette en coin, pour ne plus cacher le bas du produit */
.bfx .bfx-card__img .bfx-ribbon {
	left: 8px; right: auto; top: 8px; bottom: auto;
	padding: 4px 10px; border-radius: 4px; font-size: 15px;
}
/* Bouton: libellé court sur mobile */
.bfx .bfx-btn__short { display: none; }
@media (max-width: 700px) {
	.bfx .bfx-btn__long { display: none; }
	.bfx .bfx-btn__short { display: inline; }
	.bfx .bfx-btn, .bfx a.bfx-btn, .bfx a.button.bfx-btn { font-size: 17px !important; }
	.bfx .bfx-card__img .bfx-ribbon { font-size: 13px; padding: 3px 7px; }
}
/* Aucun résultat */
.bfx .bfx-empty { text-align: center; padding: 24px 0; }
.bfx .bfx-empty p { font-size: 19px; margin: 0 0 16px; color: #283444; }
.bfx .bfx-empty__btn { min-height: 52px; padding: 0 28px; border: 0; border-radius: 26px; background: #283444; color: #fff; font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; }

/* Curseur de prix: rail centré sur les poignées (36 px) et poignées qui ne dépassent pas de la colonne */
.bfx .bfx-slider { height: 44px; min-height: 44px; margin: 6px 18px 4px; }
.bfx .bfx-slider__track { top: 19px; height: 6px; }
.bfx .bfx-slider input[type="range"] { left: -18px; width: calc(100% + 36px); height: 44px !important; }

/* Cartes: le prix suit directement le titre (plus de grand vide); seuls les boutons restent alignés en bas */
.bfx .bfx-card__title { flex: 0 0 auto; }
.bfx .bfx-card .bfx-btn { margin-top: auto; }
.bfx .bfx-card__price { margin: 8px 0 14px; }

/* Fond des photos: blanc partout (les images à fond transparent laissaient voir un gris) */
.bfx .bfx-card__img { background: #fff !important; }

/* Défilement au survol: flèches et points */
.bfx .bfx-gal { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .15s; }
.bfx .bfx-card__img.is-gal .bfx-gal { opacity: 1; }
.bfx .bfx-gal__btn {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 40px; height: 40px; border-radius: 50%;
	background: rgba(40, 52, 68, .85); color: #fff;
	font-size: 28px; line-height: 36px; text-align: center; font-weight: 700;
	pointer-events: auto; cursor: pointer; user-select: none;
}
.bfx .bfx-gal__btn:hover { background: #283444; }
.bfx .bfx-gal__prev { left: 8px; }
.bfx .bfx-gal__next { right: 8px; }
.bfx .bfx-gal__dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; }
.bfx .bfx-gal__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .9); border: 1px solid #283444; }
.bfx .bfx-gal__dots i.is-on { background: #283444; }

/* Flèches du défilement: carré arrondi, plus petit, chevron dessiné (bien centré) */
.bfx .bfx-gal__btn {
	width: 34px; height: 34px; border-radius: 8px;
	font-size: 0; line-height: 0;
	background: rgba(40, 52, 68, .88);
}
.bfx .bfx-gal__btn::before {
	content: "";
	position: absolute; top: 50%; left: 50%;
	width: 9px; height: 9px;
	border: solid #fff; border-width: 0 0 3px 3px;
	border-radius: 1px;
}
.bfx .bfx-gal__prev::before { transform: translate(-30%, -50%) rotate(45deg); }
.bfx .bfx-gal__next::before { transform: translate(-70%, -50%) rotate(-135deg); }
.bfx .bfx-gal__prev { left: 6px; }
.bfx .bfx-gal__next { right: 6px; }

/* Boutons de cartes: carrés arrondis, comme les tuiles */
.bfx .bfx-btn, .bfx a.bfx-btn, .bfx a.button.bfx-btn, .bfx .bfx-empty__btn { border-radius: 8px !important; }
@media (max-width: 900px) { .bfx.bfx--open .bfx-apply { border-radius: 8px; } }

/* Ordinateur: texte des boutons de cartes plus gros */
@media (min-width: 901px) {
	.bfx .bfx-btn, .bfx a.bfx-btn, .bfx a.button.bfx-btn { font-size: 19px !important; min-height: 56px !important; font-weight: 700 !important; }
}

/* Tablette: textes des cartes et boutons plus gros */
@media (min-width: 701px) and (max-width: 1100px) {
	.bfx .bfx-card__title { font-size: 18px !important; line-height: 1.3; }
	.bfx .bfx-card__price { font-size: 24px !important; }
	.bfx .bfx-card__price del { font-size: 17px !important; }
	.bfx .bfx-card__price .bfx-card__from, .bfx .bfx-card__price .azur-signet-from-price { font-size: 18px !important; }
	.bfx .bfx-card__from strong { font-size: 22px !important; }
	.bfx .bfx-btn, .bfx a.bfx-btn, .bfx a.button.bfx-btn { font-size: 19px !important; min-height: 56px !important; font-weight: 700 !important; }
	.bfx .bfx-bar .bfx-summary { font-size: 18px; }
}

/* Prix et boutons alignés d'une carte à l'autre dans une rangée (le titre prend la hauteur restante) */
.bfx .bfx-card__title { flex: 1 1 auto !important; }
.bfx .bfx-card__price { margin: 6px 0 12px; }

/* « À partir de » aussi gros que les autres prix */
.bfx .bfx-card__price .azur-signet-from-price { font-size: 24px !important; font-weight: 700 !important; }
.bfx .bfx-card__price .bfx-card__from { font-size: 20px !important; }
.bfx .bfx-card__price .bfx-card__from strong { font-size: 24px !important; }
@media (min-width: 701px) and (max-width: 1100px) {
	.bfx .bfx-card__price .azur-signet-from-price, .bfx .bfx-card__price .bfx-card__from strong { font-size: 24px !important; }
	.bfx .bfx-card__price .bfx-card__from { font-size: 19px !important; }
}
@media (max-width: 700px) {
	.bfx .bfx-card__price .azur-signet-from-price, .bfx .bfx-card__price .bfx-card__from strong { font-size: 18px !important; }
	.bfx .bfx-card__price .bfx-card__from { font-size: 16px !important; }
}

/* Couleurs des boutons: bleu pâle du logo (#4c6079) au repos, bleu marine (#283444) au survol et pour le choix actif */
.bfx .bfx-types:first-of-type .bfx-pill { background: #4c6079 !important; border-color: #4c6079 !important; }
.bfx .bfx-types:first-of-type .bfx-pill:hover { background: #283444 !important; border-color: #283444 !important; }
.bfx .bfx-types:first-of-type .bfx-pill.is-on { background: #283444 !important; border-color: #283444 !important; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px #283444 !important; }
.bfx .bfx-btn, .bfx a.bfx-btn, .bfx a.button.bfx-btn, .bfx a.bfx-btn--alt, .bfx .bfx-empty__btn { background: #4c6079 !important; border-color: #4c6079 !important; color: #fff !important; opacity: 1 !important; transition: background-color .15s, border-color .15s; }
.bfx .bfx-btn:hover, .bfx a.bfx-btn:hover, .bfx a.button.bfx-btn:hover, .bfx a.bfx-btn--alt:hover, .bfx .bfx-empty__btn:hover,
.bfx .bfx-btn:focus-visible, .bfx a.bfx-btn:focus-visible { background: #283444 !important; border-color: #283444 !important; color: #fff !important; opacity: 1 !important; }

/* Flèches de la galerie et pagination: même logique (bleu pâle du logo au repos, marine au survol / choix actif) */
.bfx .bfx-gal__btn { background: #4c6079 !important; }
.bfx .bfx-gal__btn:hover, .bfx .bfx-gal__btn:focus-visible { background: #283444 !important; }
.bfx .bfx-gal__dots i { border-color: #4c6079 !important; }
.bfx .bfx-gal__dots i.is-on { background: #4c6079 !important; }
.bfx .bfx-page { color: #4c6079 !important; border-color: #4c6079 !important; }
.bfx .bfx-page:hover { background: #283444 !important; border-color: #283444 !important; color: #fff !important; }
.bfx .bfx-page.is-current { background: #283444 !important; border-color: #283444 !important; color: #fff !important; }


/* Tuiles et pages en vrais liens (<a>): même apparence que les boutons */
.bfx a.bfx-pill, .bfx a.bfx-page { text-decoration: none !important; box-sizing: border-box; }
.bfx a.bfx-pill { display: flex; align-items: center; justify-content: center; text-align: center; }
.bfx a.bfx-page { display: inline-flex; align-items: center; justify-content: center; }
.bfx a.bfx-pill:visited, .bfx a.bfx-page:visited { color: inherit; }

/* Boutons de guides (haut des filtres) */
.bfx .bfx-guides { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.bfx a.bfx-guide { display: block; padding: 12px 16px; border-radius: 999px; background: #4c6079; color: #fff !important; text-align: center; font-weight: 600; text-decoration: none !important; line-height: 1.25; }
.bfx a.bfx-guide:hover, .bfx a.bfx-guide:focus-visible { background: #283444; color: #fff !important; }
.bfx a.bfx-guide.bfx-nowhen { display: none !important; }

/* Fenêtre vidéo */
.bfx-modal { position: fixed; inset: 0; z-index: 999999; background: rgba(20, 28, 38, .82); display: flex; align-items: center; justify-content: center; padding: 16px; }
.bfx-modal__box { width: min(960px, 100%); aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; }
.bfx-modal__box iframe { width: 100%; height: 100%; border: 0; display: block; }
.bfx-modal__x { position: absolute; top: 10px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: #283444; font-size: 28px; line-height: 1; cursor: pointer; }
.bfx-modal__x:hover, .bfx-modal__x:focus-visible { background: #4c6079; color: #fff; }
html.bfx-modal-open { overflow: hidden; }

/* Tableau de tarifs (sous les guides) */
.bfx .bfx-ptable { margin: 0 0 18px; }
.bfx .bfx-ptable.bfx-nowhen { display: none !important; }
.bfx .bfx-ptable__title { font-weight: 700; font-size: 1.05em; color: #283444; padding-bottom: 6px; border-bottom: 2px solid #283444; }
.bfx .bfx-ptable__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid #e3e8ee; color: #4c6079; }
.bfx .bfx-ptable__row b { color: #283444; white-space: nowrap; }

/* Guides: même forme que les autres boutons, mais en contour (liens d'aide, pas des achats) */
.bfx a.bfx-guide { border-radius: 6px !important; background: #fff !important; color: #4c6079 !important; border: 2px solid #4c6079; padding: 10px 14px; }
.bfx a.bfx-guide:hover, .bfx a.bfx-guide:focus-visible { background: #283444 !important; border-color: #283444; color: #fff !important; }

/* Boutons rapides (téléphone et tablette): tarifs + guides hors du panneau des filtres */
.bfx .bfx-quick { display: none; }
@media (max-width: 900px) {
	.bfx .bfx-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
	.bfx .bfx-quick:not(:has(> :not(.bfx-nowhen))) { display: none; }
	.bfx .bfx-quick .bfx-guide { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 10px; margin: 0; font: inherit; font-weight: 600; font-size: .95em; line-height: 1.2; cursor: pointer; box-sizing: border-box; }
	.bfx .bfx-quick button.bfx-guide { border-radius: 6px; background: #fff; color: #4c6079; border: 2px solid #4c6079; }
	.bfx .bfx-quick button.bfx-guide:hover, .bfx .bfx-quick button.bfx-guide:focus-visible { background: #283444; border-color: #283444; color: #fff; }
	.bfx .bfx-quick .bfx-nowhen { display: none !important; }
	/* Dans le panneau des filtres, on ne répète pas ce qui est déjà au-dessus */
	.bfx .bfx-side .bfx-guides, .bfx .bfx-side .bfx-ptable { display: none !important; }
}
/* Tableau de tarifs dans la fenêtre */
.bfx-modal__box--text { aspect-ratio: auto; background: #fff; padding: 22px 22px 14px; max-width: 420px; max-height: 88vh; overflow: auto; }
.bfx-modal .bfx-ptable__title { font-weight: 700; font-size: 1.15em; color: #283444; padding-bottom: 8px; border-bottom: 2px solid #283444; margin-right: 40px; }
.bfx-modal .bfx-ptable__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid #e3e8ee; color: #4c6079; font-size: 1.05em; }
.bfx-modal .bfx-ptable__row b { color: #283444; white-space: nowrap; }

/* Boutons rapides: règles renforcées (le thème et d'autres règles du plugin les écrasaient) */
@media (max-width: 900px) {
	.bfx div.bfx-quick { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin: 0 0 14px !important; }
	.bfx div.bfx-quick:not(:has(> :not(.bfx-nowhen))) { display: none !important; }
	.bfx div.bfx-quick > .bfx-guide { display: flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; min-height: 52px !important; height: auto !important; margin: 0 !important; padding: 8px 10px !important; box-sizing: border-box !important; border: 2px solid #4c6079 !important; border-radius: 6px !important; background: #fff !important; color: #4c6079 !important; font-family: inherit !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important; text-align: center !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; cursor: pointer; }
	.bfx div.bfx-quick > .bfx-guide:hover, .bfx div.bfx-quick > .bfx-guide:focus-visible { background: #283444 !important; border-color: #283444 !important; color: #fff !important; }
	.bfx div.bfx-quick > .bfx-guide.bfx-nowhen { display: none !important; }
}

/* Catégories sans filtres utiles (ex: signets): pas de bouton « Filtres » sur téléphone et tablette */
@media (max-width: 900px) {
	.bfx.bfx--nofilt .bfx-toggle, .bfx.bfx--nofilt button.bfx-toggle { display: none !important; }
	.bfx.bfx--nofilt .bfx-side { display: none !important; }
}

/* Petit texte sous les guides (« Un besoin particulier ? Contactez-nous. ») */
.bfx p.bfx-note { margin: 4px 0 18px; text-align: center; font-size: .95em; line-height: 1.5; color: #283444; }
.bfx p.bfx-note a { font-weight: 700; color: #283444; text-decoration: none; }
.bfx p.bfx-note a:hover { text-decoration: underline; }
.bfx p.bfx-note.bfx-nowhen { display: none !important; }
.bfx p.bfx-note--quick { display: none; }
@media (max-width: 900px) {
	.bfx .bfx-side p.bfx-note { display: none !important; }
	.bfx div.bfx-quick > p.bfx-note--quick { display: block; grid-column: 1 / -1; margin: 4px 0 0; }
	.bfx div.bfx-quick > p.bfx-note--quick.bfx-nowhen { display: none !important; }
}

/* Retour au bleu marine (#283444) au repos; le bleu pâle du logo (#4c6079) sert au survol. */
.bfx .bfx-types:first-of-type .bfx-pill { background: #283444 !important; border-color: #283444 !important; }
.bfx .bfx-types:first-of-type .bfx-pill:hover { background: #4c6079 !important; border-color: #4c6079 !important; }
.bfx .bfx-types:first-of-type .bfx-pill.is-on { background: #283444 !important; border-color: #283444 !important; }
.bfx .bfx-btn, .bfx a.bfx-btn, .bfx a.button.bfx-btn, .bfx a.bfx-btn--alt, .bfx .bfx-empty__btn { background: #283444 !important; border-color: #283444 !important; }
.bfx .bfx-btn:hover, .bfx a.bfx-btn:hover, .bfx a.button.bfx-btn:hover, .bfx a.bfx-btn--alt:hover, .bfx .bfx-empty__btn:hover,
.bfx .bfx-btn:focus-visible, .bfx a.bfx-btn:focus-visible { background: #4c6079 !important; border-color: #4c6079 !important; }
.bfx .bfx-gal__btn { background: #283444 !important; }
.bfx .bfx-gal__btn:hover, .bfx .bfx-gal__btn:focus-visible { background: #4c6079 !important; }
.bfx .bfx-gal__dots i { border-color: #283444 !important; }
.bfx .bfx-gal__dots i.is-on { background: #283444 !important; }
.bfx .bfx-page { color: #283444 !important; border-color: #283444 !important; }
.bfx .bfx-page:hover { background: #4c6079 !important; border-color: #4c6079 !important; color: #fff !important; }
.bfx a.bfx-guide, .bfx div.bfx-quick > .bfx-guide { color: #283444 !important; border-color: #283444 !important; }
.bfx a.bfx-guide:hover, .bfx a.bfx-guide:focus-visible, .bfx div.bfx-quick > .bfx-guide:hover, .bfx div.bfx-quick > .bfx-guide:focus-visible { background: #283444 !important; color: #fff !important; border-color: #283444 !important; }
.bfx .bfx-ptable__row, .bfx-modal .bfx-ptable__row { color: #283444; }

/* ===== Tuiles-images (shortcode avec thumbs="1"): grande image, bandeau blanc du nom par-dessus (ordinateur) ===== */
@media (min-width: 901px) {
	.bfx .bfx-types.bfx-types--img { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
	.bfx .bfx-types.bfx-types--img a.bfx-pill, .bfx .bfx-types.bfx-types--img button.bfx-pill {
		position: relative; display: block !important; aspect-ratio: 9 / 10; height: auto !important; min-height: 0 !important;
		padding: 0 !important; border: 0 !important; border-radius: 8px !important; overflow: hidden;
		background: #fff !important; color: #283444 !important; text-align: center !important;
		box-shadow: 0 2px 8px rgba(40, 52, 68, .18) !important; transition: box-shadow .15s, transform .15s;
	}
	.bfx .bfx-types.bfx-types--img .bfx-pill__img {
		position: absolute; inset: 0; width: 100%; height: 100%; flex: none; aspect-ratio: auto; border-radius: 0; background: #e3e7ec; display: block !important;
	}
	.bfx .bfx-types.bfx-types--img .bfx-pill__img:empty { display: block !important; }
	.bfx .bfx-types.bfx-types--img .bfx-pill__img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
	.bfx .bfx-types.bfx-types--img .bfx-pill__t {
		position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box; min-height: 32%;
		display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
		padding: 10px 6px 12px !important; background: #fff; color: #283444; overflow-wrap: anywhere;
		font-size: 13px !important; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: .01em;
		box-shadow: 0 -2px 6px rgba(40, 52, 68, .10);
	}
	.bfx .bfx-types.bfx-types--img .bfx-pill__t::after { content: ""; display: block; width: 34px; height: 2px; background: #283444; }
	.bfx .bfx-types.bfx-types--img a.bfx-pill:hover, .bfx .bfx-types.bfx-types--img button.bfx-pill:hover { background: #fff !important; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(40, 52, 68, .28) !important; }
	.bfx .bfx-types.bfx-types--img a.bfx-pill.is-on, .bfx .bfx-types.bfx-types--img button.bfx-pill.is-on { background: #fff !important; box-shadow: 0 0 0 3px #283444, 0 6px 14px rgba(40, 52, 68, .28) !important; }
	.bfx .bfx-types.bfx-types--img .bfx-pill.is-on .bfx-pill__t { background: #283444; color: #fff; }
	.bfx .bfx-types.bfx-types--img .bfx-pill.is-on .bfx-pill__t::after { background: #fff; }
}

/* ===== Plus d'air (ordinateur): espaces plus grands entre tuiles, filtres et produits ===== */
@media (min-width: 901px) {
	.bfx .bfx-types.bfx-types--img { gap: 22px 22px; margin-bottom: 30px; }
	.bfx .bfx-types.bfx-types--img a.bfx-pill, .bfx .bfx-types.bfx-types--img button.bfx-pill { box-shadow: 0 0 0 1px #d3dae3, 0 3px 10px rgba(40, 52, 68, .16) !important; }
	.bfx .bfx-types.bfx-types--img .bfx-pill__t { font-size: 14px !important; min-height: 36%; letter-spacing: .02em; }
	.bfx .bfx-layout { grid-template-columns: 280px minmax(0, 1fr); gap: 0 56px; margin-top: 36px; }
	.bfx .bfx-grid { gap: 40px 28px; }
	.bfx .bfx-bar { margin-bottom: 20px; }
}

/* Noms des tuiles-images: jamais de mot coupé, même taille partout */
@media (min-width: 901px) {
	.bfx .bfx-types.bfx-types--img .bfx-pill__t {
		font-size: 12.5px !important; letter-spacing: 0 !important; padding: 10px 4px 12px !important;
		hyphens: none !important; -webkit-hyphens: none !important; overflow-wrap: normal !important; word-break: normal !important;
		text-wrap: balance; white-space: normal; min-height: 38%;
	}
}

/* Bandeaux identiques: même hauteur, trait au même endroit, texte centré au-dessus */
@media (min-width: 901px) {
	.bfx .bfx-types.bfx-types--img .bfx-pill__t {
		height: 40% !important; min-height: 0 !important; justify-content: center !important; gap: 0 !important;
		padding: 6px 6px 26px !important; line-height: 1.25 !important;
	}
	.bfx .bfx-types.bfx-types--img .bfx-pill__t::after { position: absolute; left: 50%; bottom: 12px; margin-left: -17px; }
}

/* Bandeau plus bas, sans trait: l'image reste bien visible (même hauteur pour les 9 tuiles) */
@media (min-width: 901px) {
	.bfx .bfx-types.bfx-types--img a.bfx-pill, .bfx .bfx-types.bfx-types--img button.bfx-pill { aspect-ratio: 5 / 6 !important; }
	.bfx .bfx-types.bfx-types--img .bfx-pill__t { height: 54px !important; padding: 6px 6px !important; }
	.bfx .bfx-types.bfx-types--img .bfx-pill__t::after { display: none !important; }
}

/* Court trait sous le nom (de retour), même place pour les 9 tuiles */
@media (min-width: 901px) {
	.bfx .bfx-types.bfx-types--img .bfx-pill__t { height: 64px !important; padding: 6px 6px 20px !important; }
	.bfx .bfx-types.bfx-types--img .bfx-pill__t::after { display: block !important; position: absolute; left: 50%; bottom: 9px; width: 30px; margin-left: -15px; }
}

/* Bandeau des tuiles-images: texte plus grand (suit la largeur de la tuile), espaces réguliers.
   Rangée du texte = 2 lignes de haut (texte centré dedans), puis le trait: même place pour les 9 tuiles. */
@media (min-width: 901px) {
	.bfx .bfx-types.bfx-types--img a.bfx-pill, .bfx .bfx-types.bfx-types--img button.bfx-pill { container-type: inline-size; }
	.bfx .bfx-types.bfx-types--img .bfx-pill__t {
		display: grid !important; grid-template-rows: 2.5em 2px; row-gap: 8px; align-content: center; align-items: center; justify-items: center;
		height: 74px !important; padding: 0 4px !important; box-sizing: border-box;
		font-size: 13px !important; font-size: clamp(12.5px, 8.5cqw, 16px) !important; font-weight: 700 !important; line-height: 1.25 !important;
	}
	.bfx .bfx-types.bfx-types--img .bfx-pill__t::after { position: static !important; margin: 0 !important; width: 30px; height: 2px; }
}

/* Bandeau (version finale): le texte est dans une zone de 2 lignes de haut, centré dedans; le trait est dessous, jamais sur le texte */
@media (min-width: 901px) {
	.bfx .bfx-types.bfx-types--img .bfx-pill__t {
		display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
		gap: 8px !important; height: 74px !important; padding: 0 4px !important;
	}
	.bfx .bfx-types.bfx-types--img .bfx-pill__tx { display: flex; align-items: center; justify-content: center; height: 2.5em; width: 100%; text-align: center; }
	.bfx .bfx-types.bfx-types--img .bfx-pill__t::after { position: static !important; margin: 0 !important; flex: 0 0 2px; width: 30px; height: 2px; }
}

/* Bandeau plus compact, tuile plus haute: on voit nettement plus l'image */
@media (min-width: 901px) {
	.bfx .bfx-types.bfx-types--img a.bfx-pill, .bfx .bfx-types.bfx-types--img button.bfx-pill { aspect-ratio: 4 / 5 !important; }
	.bfx .bfx-types.bfx-types--img .bfx-pill__t { height: 58px !important; gap: 5px !important; padding: 0 4px !important; }
}

/* Sans trait: bandeau de même hauteur pour toutes les tuiles, nom centré */
@media (min-width: 901px) {
	.bfx .bfx-types.bfx-types--img .bfx-pill__t { height: 48px !important; gap: 0 !important; padding: 0 4px !important; }
	.bfx .bfx-types.bfx-types--img .bfx-pill__t::after { display: none !important; }
	.bfx .bfx-types.bfx-types--img .bfx-pill__tx { height: 100%; }
}

/* Tuiles-images: toujours UNE seule rangée sur ordinateur. Si l'écran est trop étroit, la rangée défile de côté (jamais sur 2 rangées). */
@media (min-width: 901px) {
	.bfx .bfx-types.bfx-types--img {
		display: grid !important; grid-template-columns: none !important; grid-auto-flow: column !important; grid-auto-columns: minmax(128px, 1fr) !important;
		gap: 16px !important; overflow-x: auto; overflow-y: hidden; padding: 4px 4px 10px; margin-left: -4px; margin-right: -4px;
		scroll-snap-type: x proximity; scrollbar-width: thin;
	}
	.bfx .bfx-types.bfx-types--img > .bfx-pill { scroll-snap-align: start; }
}

/* La rangée défilable coupait les ombres et le contour de la tuile choisie: on laisse de la marge autour */
@media (min-width: 901px) {
	.bfx .bfx-types.bfx-types--img { padding: 12px 16px 24px !important; margin: -12px -16px 6px !important; }
}

/* Moins de vide sous les tuiles; boutique qui profite d'une page large (plafond 1760 px, centrée) */
@media (min-width: 901px) {
	.bfx .bfx-types.bfx-types--img { margin: -12px -16px -8px !important; }
	.bfx { max-width: 1760px; margin-left: auto; margin-right: auto; }
}

/* Pleine largeur: la boutique déborde du conteneur du thème et se centre sur l'écran (plafond 1760 px) */
@media (min-width: 901px) {
	.bfx {
		width: min(calc(100vw - 100px), 1760px) !important;
		max-width: none !important;
		margin-left: calc(50% - min(calc(100vw - 100px), 1760px) / 2) !important;
		margin-right: 0 !important;
	}
}

/* Tuiles moins hautes (carrées) */
@media (min-width: 901px) {
	.bfx .bfx-types.bfx-types--img a.bfx-pill, .bfx .bfx-types.bfx-types--img button.bfx-pill { aspect-ratio: 1 / 1 !important; }
}

/* Moins d'espace entre les tuiles et les filtres */
@media (min-width: 901px) {
	.bfx .bfx-types.bfx-types--img { margin: -12px -16px -4px !important; }
	.bfx .bfx-chips { margin: 0 0 10px !important; }
}

/* Choix avec image (ex. Matériel): tuiles dans la colonne de gauche */
.bfx .bfx-group__body:has(.bfx-opt--img) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bfx .bfx-group__body:has(.bfx-opt--img) > :not(.bfx-opt--img) { grid-column: 1 / -1; }
.bfx .bfx-opt--img { position: relative; flex-direction: column; align-items: stretch; gap: 0; min-height: 0 !important; border: 1px solid #d9dee4; border-radius: 8px; background: #fff; overflow: hidden; }
.bfx .bfx-opt--img input { position: absolute; opacity: 0; width: 1px !important; height: 1px !important; }
.bfx .bfx-opt--img .bfx-opt__img { display: block; aspect-ratio: 1 / 1; background: #e3e7ec; }
.bfx .bfx-opt--img .bfx-opt__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bfx .bfx-opt--img .bfx-opt__name { flex: none; padding: 6px 4px; text-align: center; font-size: 13px !important; font-weight: 700; line-height: 1.15; color: #283444; }
.bfx .bfx-opt--img .bfx-count { display: none; }
.bfx .bfx-opt--img:has(input:checked) { border-color: #283444; box-shadow: 0 0 0 2px #283444; }
.bfx .bfx-opt--img:has(input:checked) .bfx-opt__name { background: #283444; color: #fff; }
.bfx .bfx-opt--img:has(input:focus-visible) { outline: 3px solid #4c6079; outline-offset: 2px; }

/* Petits boutons (Bois, Acier, Laiton…) en mini-tuiles avec image, sous les grosses tuiles */
@media (min-width: 901px) {
	.bfx .bfx-types.bfx-types--img.bfx-types--sub {
		grid-auto-columns: 118px !important; gap: 12px !important;
		margin: 6px -16px 0 -16px !important; padding: 12px 16px 16px !important;
		border-left: 0 !important; background: none !important;
	}
	.bfx .bfx-types.bfx-types--sub .bfx-types__label { display: none; }
	.bfx .bfx-types.bfx-types--sub a.bfx-pill, .bfx .bfx-types.bfx-types--sub button.bfx-pill { aspect-ratio: 1 / 1 !important; border-radius: 6px !important; }
	.bfx .bfx-types.bfx-types--sub .bfx-pill__t { height: 34px !important; padding: 0 3px !important; font-size: 11.5px !important; }
	.bfx .bfx-types.bfx-types--sub .bfx-pill__tx { font-size: 11.5px !important; }
}

/* Les petits boutons ne s'affichent que si la grosse catégorie est choisie (mes règles « une seule rangée » écrasaient le masquage) */
.bfx .bfx-types.bfx-types--img.bfx-nowhen,
.bfx .bfx-types.bfx-types--img.bfx-emptyrow,
.bfx .bfx-types.bfx-types--img.bfx-types--sub.bfx-nowhen,
.bfx .bfx-types.bfx-types--img.bfx-types--sub.bfx-emptyrow { display: none !important; }

/* Petits boutons en mini-tuiles: ces règles passent par-dessus les anciennes règles « bandeau bleu / pastilles » des sous-catégories */
@media (min-width: 901px) {
	.bfx .bfx-types.bfx-types--img.bfx-types--sub:not(.bfx-nowhen):not(.bfx-emptyrow) {
		display: grid !important; grid-template-columns: none !important; grid-auto-flow: column !important; grid-auto-columns: 118px !important;
		gap: 12px !important; background: none !important; animation: none !important; border-radius: 0 !important;
		overflow-x: auto; overflow-y: hidden; padding: 12px 16px 16px !important; margin: 4px -16px 6px -16px !important;
	}
	.bfx .bfx-types.bfx-types--img.bfx-types--sub > a.bfx-pill, .bfx .bfx-types.bfx-types--img.bfx-types--sub > button.bfx-pill {
		position: relative; display: block !important; width: auto !important; min-height: 0 !important; height: auto !important; aspect-ratio: 1 / 1 !important;
		padding: 0 !important; border: 0 !important; border-radius: 6px !important; overflow: hidden;
		background: #fff !important; color: #283444 !important; box-shadow: 0 2px 8px rgba(40, 52, 68, .18) !important;
	}
	.bfx .bfx-types.bfx-types--img.bfx-types--sub > .bfx-pill.is-on { background: #fff !important; color: #283444 !important; box-shadow: 0 0 0 3px #283444, 0 6px 14px rgba(40, 52, 68, .28) !important; }
	.bfx .bfx-types.bfx-types--img.bfx-types--sub > .bfx-pill.is-on .bfx-pill__t { background: #283444; color: #fff; }
}

/* Mini-tuiles: pleine largeur, moins hautes, et moins de vide dessous */
@media (min-width: 901px) {
	.bfx .bfx-types.bfx-types--img.bfx-types--sub:not(.bfx-nowhen):not(.bfx-emptyrow) {
		grid-auto-columns: minmax(104px, 1fr) !important; gap: 16px !important;
		padding: 8px 16px 10px !important; margin: 0 -16px -12px -16px !important;
	}
	.bfx .bfx-types.bfx-types--img.bfx-types--sub > a.bfx-pill, .bfx .bfx-types.bfx-types--img.bfx-types--sub > button.bfx-pill { aspect-ratio: 5 / 3 !important; }
	.bfx .bfx-types.bfx-types--sub .bfx-pill__t { height: 32px !important; }
}

/* Mini-tuiles: texte plus gros; avec peu de tuiles (ex. Bijoux: 3) elles gardent une largeur raisonnable, alignées à gauche */
@media (min-width: 901px) {
	.bfx .bfx-types.bfx-types--img.bfx-types--sub:not(.bfx-nowhen):not(.bfx-emptyrow) { grid-auto-columns: minmax(104px, 230px) !important; justify-content: start; }
	.bfx .bfx-types.bfx-types--sub .bfx-pill__t { height: 40px !important; }
	.bfx .bfx-types.bfx-types--sub .bfx-pill__t, .bfx .bfx-types.bfx-types--sub .bfx-pill__tx { font-size: 14.5px !important; }
}

/* Grille de produits: nombre de colonnes qui divise toujours 12 (2, 3, 4 ou 6), donc jamais de trous dans la dernière rangée d'une page de 12 produits */
.bfx .bfx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (min-width: 601px) { .bfx .bfx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 901px) and (max-width: 999px) { .bfx .bfx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (min-width: 1000px) { .bfx .bfx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 1280px) { .bfx .bfx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (min-width: 2300px) { .bfx .bfx-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } }

/* ===== Téléphone et tablette avec photos: un bouton qui ouvre une fenêtre de choix avec les photos ===== */
.bfx .bfx-picker { display: none; }
.bfx-sheet[hidden] { display: none !important; }
@media (max-width: 900px) {
	body .bfx .bfx-types.bfx-types--img.bfx-hasselect + select.bfx-catselect { display: none !important; }
	.bfx button.bfx-picker {
		display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; min-height: 60px; margin: 0 0 12px; padding: 6px 14px 6px 6px;
		border: 1px solid #aab3bf; border-radius: 10px; background: #fff; color: #283444; font: inherit; font-size: 17px; font-weight: 700; text-align: left; cursor: pointer;
	}
	.bfx .bfx-picker__img { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 6px; overflow: hidden; background: #e3e7ec; }
	.bfx .bfx-picker__img.is-empty { display: none; }
	.bfx .bfx-picker__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 0%; }
	.bfx .bfx-picker__img.is-empty + .bfx-picker__t { margin-left: 8px; }
	.bfx .bfx-picker__t { flex: 1; }
	.bfx .bfx-picker__chev { flex: 0 0 auto; width: 10px; height: 10px; border-right: 3px solid #283444; border-bottom: 3px solid #283444; transform: rotate(45deg); margin: -4px 6px 0 0; }
	.bfx .bfx-types.bfx-nowhen + .bfx-catselect + .bfx-picker, .bfx .bfx-types.bfx-emptyrow + .bfx-catselect + .bfx-picker { display: none !important; }

	.bfx-sheet { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: flex-end; justify-content: center; }
	.bfx-sheet__bg { position: absolute; inset: 0; background: rgba(20, 28, 40, .55); }
	.bfx-sheet__panel { position: relative; width: 100%; max-width: 720px; max-height: 88vh; display: flex; flex-direction: column; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.3); }
	.bfx-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; font-size: 22px; font-weight: 700; color: #283444; }
	.bfx-sheet__title { font-weight: 700; }
	.bfx-sheet button.bfx-sheet__x { position: relative; width: 44px; height: 44px; padding: 0 !important; border: 2px solid #283444 !important; border-radius: 22px !important; background: #fff !important; box-shadow: none !important; cursor: pointer; }
	.bfx-sheet__x::before, .bfx-sheet__x::after { content: ""; position: absolute; left: 9px; top: 18px; width: 22px; height: 3px; background: #283444; transform: rotate(45deg); }
	.bfx-sheet__x::after { transform: rotate(-45deg); }
	.bfx-sheet__body { overflow-y: auto; padding: 10px 16px 28px; -webkit-overflow-scrolling: touch; }
	.bfx-sheet button.bfx-sheet__all { display: block; width: 100%; min-height: 48px; margin: 0 0 14px; padding: 0 12px !important; border: 0 !important; border-radius: 8px !important; background: #eef1f5 !important; color: #283444 !important; font: inherit; font-size: 16px; font-weight: 600; text-align: center; box-shadow: none !important; cursor: pointer; }
	.bfx-sheet button.bfx-sheet__all.is-on { font-weight: 700; }
	.bfx-sheet__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.bfx-sheet__tile.bfx-sheet__tile { cursor: pointer; }
	.bfx-sheet__grid button.bfx-sheet__tile { display: flex; flex-direction: column; padding: 0 !important; border: 0 !important; border-radius: 10px !important; overflow: hidden; background: #fff !important; color: #283444 !important; font: inherit; box-shadow: 0 2px 8px rgba(40, 52, 68, .22) !important; }
	.bfx-sheet__img { position: relative; display: block; flex: none; aspect-ratio: 7 / 5; overflow: hidden; background: #f1f3f6; }
	.bfx-sheet__img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 0%; mix-blend-mode: multiply; }
	.bfx-sheet__name { display: flex; align-items: center; justify-content: center; height: 54px; flex: none; padding: 4px 8px; text-align: center; font-size: 14px; font-weight: 700; line-height: 1.15; text-transform: uppercase; background: #fff; border-top: 1px solid #e3e7ec; }
	.bfx-sheet__grid button.bfx-sheet__tile.is-on { box-shadow: 0 0 0 3px #283444 !important; }
	.bfx-sheet__grid .bfx-sheet__tile.is-on .bfx-sheet__name { background: #283444; color: #fff; border-top-color: #283444; }
}
@media (min-width: 601px) and (max-width: 900px) {
	.bfx-sheet { align-items: center; }
	.bfx-sheet__panel { border-radius: 16px; max-height: 84vh; }
	.bfx-sheet__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	/* Matériaux et autres sous-choix: une ligne par choix, petite vignette à gauche */
	.bfx-sheet__grid.bfx-sheet__grid--list { grid-template-columns: 1fr; gap: 10px; }
	.bfx-sheet__grid--list button.bfx-sheet__tile { flex-direction: row; align-items: center; min-height: 68px; }
	.bfx-sheet__grid--list .bfx-sheet__img { flex: 0 0 68px; width: 68px; height: 68px; aspect-ratio: 1 / 1; }
	.bfx-sheet__grid--list .bfx-sheet__name { flex: 1; height: auto; min-height: 68px; justify-content: flex-start; padding: 6px 16px; border-top: 0; font-size: 17px; text-align: left; }
}
html.bfx-sheet-open, html.bfx-sheet-open body { overflow: hidden; }

/* Petits boutons (Bracelets, Bagues, Pendentifs…) sur ordinateur seulement: on remonte la photo pour montrer le bas de l'image (le bijou) */
@media (min-width: 901px) {
	.bfx .bfx-types.bfx-types--sub .bfx-pill__img img { object-position: center 80% !important; }
}

/* Petits boutons sur ordinateur: tuiles un peu plus étroites et plus hautes pour montrer plus de la photo (moins de bande étroite) */
@media (min-width: 901px) {
	.bfx .bfx-types.bfx-types--img.bfx-types--sub:not(.bfx-nowhen):not(.bfx-emptyrow) { grid-auto-columns: minmax(104px, 190px) !important; }
	.bfx .bfx-types.bfx-types--img.bfx-types--sub > a.bfx-pill, .bfx .bfx-types.bfx-types--img.bfx-types--sub > button.bfx-pill { aspect-ratio: 8 / 7 !important; }
	.bfx .bfx-types.bfx-types--sub .bfx-pill__img img { object-position: center 70% !important; }
}

/* Petits boutons: exactement la largeur des grosses tuiles du haut (une colonne sur 9, même espacement) */
@media (min-width: 901px) {
	.bfx .bfx-types.bfx-types--img.bfx-types--sub:not(.bfx-nowhen):not(.bfx-emptyrow) { grid-auto-columns: minmax(128px, calc((100% - 128px) / 9)) !important; gap: 16px !important; }
}

/* Petits boutons sur ordinateur: retour aux tuiles larges et basses (230 px max, format 5/3), plus petites en hauteur que les grosses catégories */
@media (min-width: 901px) {
	.bfx .bfx-types.bfx-types--img.bfx-types--sub:not(.bfx-nowhen):not(.bfx-emptyrow) { grid-auto-columns: minmax(104px, 230px) !important; gap: 16px !important; }
	.bfx .bfx-types.bfx-types--img.bfx-types--sub > a.bfx-pill, .bfx .bfx-types.bfx-types--img.bfx-types--sub > button.bfx-pill { aspect-ratio: 5 / 3 !important; }
	.bfx .bfx-types.bfx-types--sub .bfx-pill__img img { object-position: center 60% !important; }
}

/* Petits boutons dans un cadre qui part de la grosse tuile choisie (pointe sous la tuile « maman ») — ordinateur */
@media (min-width: 901px) {
	body .bfx .bfx-types.bfx-types--img.bfx-types--sub:not(.bfx-nowhen):not(.bfx-emptyrow) {
		position: relative; overflow: visible !important; background: #e9edf2 !important; border-radius: 12px !important;
		padding: 18px 18px 20px !important; margin: 14px 0 10px !important;
	}
	body .bfx .bfx-types.bfx-types--img.bfx-types--sub:not(.bfx-nowhen):not(.bfx-emptyrow)::before {
		content: ""; position: absolute; top: -11px; left: calc(var(--bfx-notch, 80px) - 13px); width: 0; height: 0;
		border-left: 13px solid transparent; border-right: 13px solid transparent; border-bottom: 11px solid #e9edf2;
	}
}

/* Cadre des sous-boutons: épouse ses tuiles (plus de grand vide gris), toujours assez large pour que la pointe reste sous la tuile « maman » */
@media (min-width: 901px) {
	body .bfx .bfx-types.bfx-types--img.bfx-types--sub:not(.bfx-nowhen):not(.bfx-emptyrow) {
		width: fit-content; max-width: 100%; min-width: calc(var(--bfx-notch, 80px) + 40px); box-sizing: border-box;
		background: #dfe5ec !important; padding: 16px !important; margin: 14px 0 10px !important;
	}
	body .bfx .bfx-types.bfx-types--img.bfx-types--sub:not(.bfx-nowhen):not(.bfx-emptyrow)::before { border-bottom-color: #dfe5ec; }
}

/* Cadre des sous-boutons collé sous les grosses tuiles: la pointe touche presque la tuile choisie */
@media (min-width: 901px) {
	body .bfx .bfx-types.bfx-types--img.bfx-types--sub:not(.bfx-nowhen):not(.bfx-emptyrow) { margin: -8px 0 10px !important; }
}

/* Sous-boutons sur ordinateur: tuiles carrées sans cadre ni pointe (le cadre est abandonné) */
@media (min-width: 901px) {
	body .bfx .bfx-types.bfx-types--img.bfx-types--sub:not(.bfx-nowhen):not(.bfx-emptyrow) {
		width: auto; min-width: 0; max-width: none; background: none !important; border-radius: 0 !important;
		overflow-x: auto !important; overflow-y: hidden !important; padding: 8px 16px 14px !important; margin: 6px -16px 4px -16px !important;
		grid-auto-columns: minmax(104px, 150px) !important; gap: 16px !important;
	}
	body .bfx .bfx-types.bfx-types--img.bfx-types--sub:not(.bfx-nowhen):not(.bfx-emptyrow)::before { display: none !important; }
	.bfx .bfx-types.bfx-types--img.bfx-types--sub > a.bfx-pill, .bfx .bfx-types.bfx-types--img.bfx-types--sub > button.bfx-pill { aspect-ratio: 1 / 1 !important; }
	.bfx .bfx-types.bfx-types--sub .bfx-pill__img img { object-position: center 70% !important; }
}