/* Vitrine – Product Filter & Grid for WooCommerce
 * Couleurs et espacements modifiables via les variables ci-dessous (ou dans le
 * CSS additionnel du thème) sans toucher au plugin.
 */
.vtr-bloc {
	--vtr-texte: #1a1a1a;
	--vtr-texte-doux: #6f6f6a;
	--vtr-bordure: #dcdcd6;
	--vtr-fond-hover: #f3f4ef;
	--vtr-actif-fond: #1a1a1a;
	--vtr-actif-texte: #ffffff;
	--vtr-fond-image: #f4f4f1;
	--vtr-promo-fond: #d62828;
	--vtr-promo-texte: #ffffff;
	--vtr-pastille-fond: #edf2e4;
	--vtr-pastille-texte: #4b6a2e;
	--vtr-pastille-express-fond: #fff1d6;
	--vtr-pastille-express-texte: #8a5a00;
	--vtr-stock-ok: #3f7d33;
	--vtr-stock-commande: #b26a00;
	--vtr-stock-rupture: #b3261e;
	--vtr-gap: 28px;
	--vtr-colonnes: 3;
	--vtr-colonnes-t: 2;
	--vtr-colonnes-m: 2;
	--vtr-arrondi: 0px;
	--vtr-ratio: 1/1;
	--vtr-titre-lignes: 2;
	--vtr-ease: cubic-bezier(0.22, 1, 0.36, 1);

	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-block: 24px;
}

.vtr-bloc *,
.vtr-bloc *::before,
.vtr-bloc *::after {
	box-sizing: inherit;
}

.vtr-bloc a,
.vtr-bloc button,
.vtr-bloc summary,
.vtr-bloc label {
	-webkit-tap-highlight-color: transparent;
}

.vtr-bloc summary:focus:not(:focus-visible),
.vtr-bloc button:focus:not(:focus-visible),
.vtr-bloc a:focus:not(:focus-visible) {
	outline: none;
}

/* =================================================================
 * Filtres par catégorie (pastilles)
 * ================================================================= */
.vtr-bloc {
	--vtr-filtre-texte: var(--vtr-texte);
	--vtr-forme-rayon: 0px;
	--vtr-rayon-doux: 0px;
	--vtr-rayon-petit: 0px;
	--vtr-rayon-case: 0px;
	--vtr-filtre-hauteur: 40px;
	--vtr-filtre-pad: 8px 18px;
	--vtr-filtre-police: 13px;
}

.vtr-forme-pastille {
	--vtr-forme-rayon: 999px;
	--vtr-rayon-doux: 12px;
	--vtr-rayon-petit: 8px;
	--vtr-rayon-case: 4px;
}

.vtr-forme-arrondi {
	--vtr-forme-rayon: 6px;
	--vtr-rayon-doux: 10px;
	--vtr-rayon-petit: 6px;
	--vtr-rayon-case: 3px;
}

.vtr-taille-compact {
	--vtr-filtre-hauteur: 34px;
	--vtr-filtre-pad: 6px 14px;
	--vtr-filtre-police: 12px;
}

.vtr-taille-grand {
	--vtr-filtre-hauteur: 48px;
	--vtr-filtre-pad: 12px 24px;
	--vtr-filtre-police: 14px;
}

.vtr-filtres ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.vtr-align-centre .vtr-filtres ul,
.vtr-align-centre .vtr-barre,
.vtr-align-centre .vtr-actifs {
	justify-content: center;
}

.vtr-filtres li {
	margin: 0;
	padding: 0;
}

.vtr-filtres li::before,
.vtr-filtres li::marker {
	content: none;
}

.vtr-chip {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	min-height: var(--vtr-filtre-hauteur);
	padding: var(--vtr-filtre-pad);
	border: 1px solid var(--vtr-bordure);
	border-radius: var(--vtr-forme-rayon);
	background: transparent;
	color: var(--vtr-filtre-texte);
	font-size: var(--vtr-filtre-police);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
	-webkit-tap-highlight-color: transparent;
}

.vtr-casse-normale .vtr-chip,
.vtr-casse-normale .vtr-facette__bouton,
.vtr-casse-normale .vtr-facette--interrupteur,
.vtr-casse-normale .vtr-ouvrir {
	letter-spacing: 0;
	text-transform: none;
}

.vtr-chip:hover,
.vtr-chip:focus-visible {
	border-color: var(--vtr-filtre-texte);
	background: var(--vtr-fond-hover);
	color: var(--vtr-filtre-texte);
	text-decoration: none;
}

.vtr-chip:focus-visible,
.vtr-facette__bouton:focus-visible,
.vtr-option:has(input:focus-visible),
.vtr-option--lien:focus-visible,
.vtr-ouvrir:focus-visible {
	outline: 2px solid var(--vtr-texte);
	outline-offset: 2px;
}

.vtr-chip.is-active,
.vtr-chip.is-active:hover {
	border-color: var(--vtr-actif-fond);
	background: var(--vtr-actif-fond);
	color: var(--vtr-actif-texte);
	cursor: default;
}

/* Forme "onglets soulignés" */
.vtr-forme-souligne .vtr-filtres ul {
	gap: 4px 26px;
	border-bottom: 1px solid var(--vtr-bordure);
}

.vtr-forme-souligne .vtr-chip,
.vtr-forme-souligne .vtr-chip:hover,
.vtr-forme-souligne .vtr-chip.is-active {
	margin-bottom: -1px;
	padding-inline: 0;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: transparent;
	color: var(--vtr-texte-doux);
}

.vtr-forme-souligne .vtr-chip:hover {
	color: var(--vtr-filtre-texte);
}

.vtr-forme-souligne .vtr-chip.is-active {
	border-bottom-color: var(--vtr-actif-fond);
	color: var(--vtr-filtre-texte);
	font-weight: 600;
}

/* Menu déroulant des catégories (mobile, option) */
.vtr-menu-cat {
	position: relative;
	display: none;
	margin: 0 0 16px;
}

.vtr-menu-cat select {
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 10px 44px 10px 16px;
	border: 1px solid var(--vtr-bordure);
	border-radius: min(var(--vtr-forme-rayon), 10px);
	background: #fff;
	color: var(--vtr-texte);
	font-size: 15px;
	font-weight: 500;
	-webkit-appearance: none;
	appearance: none;
}

.vtr-menu-cat .vtr-chevron {
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	pointer-events: none;
}

/* =================================================================
 * Barre de filtres combinables (ordinateur : menus déroulants)
 * ================================================================= */
.vtr-barre {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 8px 16px;
	margin: 0 0 14px;
}

.vtr-barre > .vtr-total--bureau {
	flex: none;
	align-self: center;
}

.vtr-barre > .vtr-tri {
	flex: none;
}

.vtr-panneau {
	display: contents;
}

.vtr-panneau__tete,
.vtr-panneau__pied,
.vtr-ouvrir,
.vtr-total--mobile {
	display: none;
}

.vtr-panneau__corps {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.vtr-total {
	color: var(--vtr-texte-doux);
	font-size: 14px;
	white-space: nowrap;
}

.vtr-total--bureau {
	margin-left: auto;
}

.vtr-facette {
	position: relative;
	margin: 0;
}

.vtr-facette__bouton,
.vtr-facette--interrupteur {
	box-sizing: border-box !important;
	display: inline-flex;
	margin: 0;
	align-items: center;
	gap: 8px;
	min-height: var(--vtr-filtre-hauteur);
	padding: 6px 12px 6px 16px;
	border: 1px solid var(--vtr-bordure);
	border-radius: var(--vtr-forme-rayon);
	background: #fff;
	color: var(--vtr-filtre-texte);
	font-size: var(--vtr-filtre-police);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.vtr-facette__bouton::-webkit-details-marker {
	display: none;
}

.vtr-facette__bouton::marker {
	content: "";
}

.vtr-facette__bouton:hover,
.vtr-facette[open] > .vtr-facette__bouton,
.vtr-facette.is-actif > .vtr-facette__bouton,
.vtr-facette--interrupteur:hover,
.vtr-facette--interrupteur.is-actif {
	border-color: var(--vtr-filtre-texte);
}

.vtr-facette--interrupteur {
	padding-right: 16px;
}

.vtr-chevron {
	flex-shrink: 0;
	transition: transform 0.25s var(--vtr-ease);
}

.vtr-facette[open] > .vtr-facette__bouton .vtr-chevron {
	transform: rotate(180deg);
}

.vtr-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--vtr-actif-fond);
	color: var(--vtr-actif-texte);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0;
}

.vtr-badge:empty {
	display: none;
}

/* Panneau déroulant d'une facette */
.vtr-facette__panneau {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 40;
	width: max-content;
	min-width: 240px;
	max-width: min(340px, 90vw);
	max-height: 380px;
	overflow-y: auto;
	padding: 8px;
	border: 1px solid var(--vtr-bordure);
	border-radius: var(--vtr-rayon-doux);
	background: #fff;
	box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.3);
	animation: vtr-deroule 0.2s var(--vtr-ease);
}

.vtr-facette[data-facette="prix"] .vtr-facette__panneau {
	min-width: 300px;
	padding: 18px;
}

@keyframes vtr-deroule {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.vtr-options {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vtr-options li {
	margin: 0;
	padding: 0;
}

.vtr-options li::before,
.vtr-options li::marker {
	content: none;
}

.vtr-option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 9px 10px;
	border-radius: var(--vtr-rayon-petit);
	color: var(--vtr-texte);
	font-size: 14px;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.vtr-option:hover {
	background: var(--vtr-fond-hover);
	color: var(--vtr-texte);
	text-decoration: none;
}

.vtr-option input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.vtr-option__case {
	position: relative;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border: 1.5px solid #b9b9b3;
	border-radius: var(--vtr-rayon-case);
	background: #fff;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.vtr-option__case::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 5px;
	width: 5px;
	height: 9px;
	border: solid var(--vtr-actif-texte);
	border-width: 0 2px 2px 0;
	opacity: 0;
	transform: rotate(45deg) scale(0.6);
	transition: opacity 0.15s ease, transform 0.2s var(--vtr-ease);
}

.vtr-option input:checked + .vtr-option__case,
.vtr-option.is-coche .vtr-option__case {
	border-color: var(--vtr-actif-fond);
	background: var(--vtr-actif-fond);
}

.vtr-option input:checked + .vtr-option__case::after {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}

.vtr-option__case--radio {
	border-radius: 50%;
}

.vtr-option__case--radio::after {
	/* Centrage exact, quelle que soit l'épaisseur du bord (1,5 px arrondit mal). */
	inset: 0;
	margin: auto;
	width: 7px;
	height: 7px;
	border: 0;
	border-radius: 50%;
	background: var(--vtr-actif-texte);
	transform: none;
}

.vtr-option.is-coche .vtr-option__case--radio::after {
	opacity: 1;
}

.vtr-option__nom {
	flex: 1;
	min-width: 0;
}

.vtr-option__nom small {
	color: var(--vtr-texte-doux);
	font-size: 11px;
}

.vtr-option__nb {
	margin-left: auto;
	padding-left: 12px;
	color: var(--vtr-texte-doux);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.vtr-option.is-vide {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}

.vtr-facette__actions {
	display: flex;
	justify-content: flex-end;
	padding: 8px 4px 2px;
}

.vtr-js .vtr-facette__actions {
	display: none;
}

.vtr-appliquer,
.vtr-voir {
	min-height: 40px;
	padding: 8px 18px;
	border: 0;
	border-radius: var(--vtr-forme-rayon);
	background: var(--vtr-actif-fond);
	color: var(--vtr-actif-texte);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

/* Interrupteur "En promotion" */
.vtr-facette--interrupteur input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.vtr-interrupteur {
	position: relative;
	flex-shrink: 0;
	width: 32px;
	height: 18px;
	border-radius: 9px;
	background: #cfcfca;
	transition: background-color 0.2s ease;
}

.vtr-interrupteur::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: transform 0.25s var(--vtr-ease);
}

.vtr-facette--interrupteur input:checked + .vtr-interrupteur {
	background: var(--vtr-actif-fond);
}

.vtr-facette--interrupteur input:checked + .vtr-interrupteur::after {
	transform: translateX(14px);
}

.vtr-facette--interrupteur input:focus-visible + .vtr-interrupteur {
	outline: 2px solid var(--vtr-texte);
	outline-offset: 2px;
}

.vtr-facette--interrupteur .vtr-option__nb {
	padding-left: 2px;
}

/* Prix : curseur double + champs */
.vtr-prix__curseurs {
	position: relative;
	height: 28px;
	margin: 4px 9px 14px;
}

.vtr-prix__rail {
	position: absolute;
	top: 12px;
	right: -9px;
	left: -9px;
	height: 4px;
	border-radius: 2px;
	background: var(--vtr-bordure);
}

.vtr-prix__plage {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--vtr-g, 0) * 1%);
	right: calc(100% - var(--vtr-d, 100) * 1%);
	border-radius: 2px;
	background: var(--vtr-actif-fond);
}

.vtr-prix__range {
	box-sizing: border-box !important;
	position: absolute;
	border: 0;
	padding: 0;
	top: 0;
	left: -9px;
	width: calc(100% + 18px);
	height: 28px;
	margin: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.vtr-prix__range:focus,
.vtr-prix__range:focus-visible {
	outline: none;
	box-shadow: none;
}

.vtr-prix__range::-webkit-slider-runnable-track {
	height: 28px;
	background: none;
}

.vtr-prix__range::-moz-range-track {
	background: none;
}

.vtr-prix__range::-webkit-slider-thumb {
	width: 20px;
	height: 20px;
	margin-top: 4px;
	border: 2px solid var(--vtr-actif-fond);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
	cursor: grab;
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
}

.vtr-prix__range::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border: 2px solid var(--vtr-actif-fond);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
	cursor: grab;
	pointer-events: auto;
}

.vtr-prix__champs {
	display: flex;
	align-items: flex-end;
	gap: 10px;
}

.vtr-prix__champs label {
	display: flex;
	flex: 1;
	min-width: 0;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	color: var(--vtr-texte-doux);
	font-size: 12px;
}

.vtr-prix__saisie {
	position: relative;
	display: block;
}

.vtr-prix__saisie input {
	box-sizing: border-box !important;
	width: 100%;
	max-width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 8px 28px 8px 10px;
	border: 1px solid var(--vtr-bordure);
	border-radius: var(--vtr-rayon-petit);
	background: #fff;
	color: var(--vtr-texte);
	font-size: 14px;
	-moz-appearance: textfield;
}

.vtr-prix__saisie input::-webkit-outer-spin-button,
.vtr-prix__saisie input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.vtr-prix__saisie em {
	position: absolute;
	top: 50%;
	right: 10px;
	color: var(--vtr-texte-doux);
	font-size: 13px;
	font-style: normal;
	transform: translateY(-50%);
	pointer-events: none;
}

.vtr-prix__tiret {
	width: 10px;
	height: 1px;
	margin-bottom: 20px;
	background: var(--vtr-texte-doux);
}

.vtr-prix__note {
	margin: 10px 0 0;
	color: var(--vtr-texte-doux);
	font-size: 12px;
}

/* Filtres actifs */
.vtr-actifs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 22px;
}

.vtr-actifs.is-vide {
	display: none;
}

.vtr-actif {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px 6px 12px;
	border-radius: var(--vtr-forme-rayon);
	background: var(--vtr-fond-hover);
	color: var(--vtr-texte);
	font-size: 13px;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.vtr-actif:hover {
	background: #e7e8e1;
	color: var(--vtr-texte);
	text-decoration: none;
}

.vtr-actifs__effacer,
.vtr-effacer,
.vtr-bouton-texte {
	color: var(--vtr-texte-doux);
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vtr-actifs__effacer:hover,
.vtr-effacer:hover,
.vtr-bouton-texte:hover {
	color: var(--vtr-texte);
}

/* =================================================================
 * Grille (carte du plugin et carte du thème)
 * ================================================================= */
.vtr-grille,
.vtr-bloc ul.products {
	display: grid !important;
	grid-template-columns: repeat(var(--vtr-colonnes), minmax(0, 1fr));
	gap: var(--vtr-gap);
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.vtr-bloc ul.products::before,
.vtr-bloc ul.products::after {
	content: none !important;
	display: none !important;
}

.vtr-bloc ul.products li.product {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

@media (max-width: 921px) {
	.vtr-grille,
	.vtr-bloc ul.products {
		grid-template-columns: repeat(var(--vtr-colonnes-t), minmax(0, 1fr));
		--vtr-gap: 22px;
	}
}

@media (max-width: 544px) {
	.vtr-grille,
	.vtr-bloc ul.products {
		grid-template-columns: repeat(var(--vtr-colonnes-m), minmax(0, 1fr));
		--vtr-gap: 16px 12px;
	}
}

/* =================================================================
 * Carte du plugin
 * ================================================================= */
.vtr-carte {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-radius: var(--vtr-arrondi);
}

.vtr-carte::before,
.vtr-carte::marker {
	content: none;
}

.vtr-grille--bordure .vtr-carte {
	overflow: hidden;
	border: 1px solid var(--vtr-bordure);
	background: #fff;
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.vtr-grille--bordure .vtr-carte:hover {
	border-color: transparent;
	box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.35);
}

/* --- Lignes de délimitation de la grille (filets fins, sans encadré) --- */
.vtr-grille--lignes {
	--vtr-ligne: #ebebeb;
	--vtr-cellule: var(--vtr-cellule-base, 20px);
}

.vtr-bloc .vtr-grille--lignes > li {
	padding: var(--vtr-cellule);
}

/* Séparateurs : filets entre les produits uniquement, rien sur le pourtour. */
.vtr-bloc .vtr-grille--lignes-separateurs {
	gap: 0;
	overflow: hidden;
	/* Coupe les filets du bord droit et du bas (arrondis de colonnes compris). */
	clip-path: inset(0 1.5px 1.5px 0);
	width: calc(100% + 2 * var(--vtr-cellule));
	margin-inline: calc(-1 * var(--vtr-cellule)) !important;
}

.vtr-bloc .vtr-grille--lignes-separateurs > li {
	box-shadow: 1px 0 0 var(--vtr-ligne), 0 1px 0 var(--vtr-ligne);
}

/* Lignes horizontales : un filet sous chaque rangée. */
.vtr-bloc .vtr-grille--lignes-horizontales {
	gap: 0 calc(2 * var(--vtr-cellule));
	overflow: hidden;
	clip-path: inset(0 0 1.5px 0);
}

.vtr-bloc .vtr-grille--lignes-horizontales > li {
	padding-inline: 0;
}

.vtr-bloc .vtr-grille--lignes-horizontales > li::after {
	content: "";
	position: absolute;
	right: calc(-1 * var(--vtr-cellule));
	bottom: 0;
	left: calc(-1 * var(--vtr-cellule));
	height: 1px;
	background: var(--vtr-ligne);
	pointer-events: none;
}

/* Quadrillage : filets entre les produits et sur le pourtour. */
.vtr-bloc .vtr-grille--lignes-quadrillage {
	gap: 0;
	border-top: 1px solid var(--vtr-ligne);
	border-left: 1px solid var(--vtr-ligne);
}

.vtr-bloc .vtr-grille--lignes-quadrillage > li {
	box-shadow: inset -1px -1px 0 var(--vtr-ligne);
}

/* Le cadre de focus clavier reste dans la cellule (sinon coupé par les filets). */
.vtr-grille--lignes .vtr-carte:has(.vtr-carte__titre a:focus-visible) {
	outline-offset: -3px;
}

@media (max-width: 640px) {
	.vtr-grille--lignes {
		--vtr-cellule: min(var(--vtr-cellule-base, 20px), 10px);
	}
}

/* --- Image --- */
.vtr-carte__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--vtr-ratio);
	border-radius: var(--vtr-arrondi);
	background: var(--vtr-fond-image);
}

.vtr-grille--bordure .vtr-carte__media {
	border-radius: 0;
}

.vtr-carte__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--vtr-ease), opacity 0.45s ease;
}

.vtr-grille--entier .vtr-carte__img {
	padding: 8%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.vtr-carte__img--survol {
	position: absolute;
	inset: 0;
	opacity: 0;
}

@media (hover: hover) {
	.vtr-carte:hover .vtr-carte__img {
		transform: scale(1.04);
	}

	.vtr-carte:hover .vtr-carte__img--survol {
		opacity: 1;
	}
}

/* --- Badges (remise, nouveauté) --- */
.vtr-badges {
	position: absolute;
	top: 12px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	pointer-events: none;
}

.vtr-badges--gauche {
	left: 12px;
}

.vtr-badges--droite {
	right: 12px;
	align-items: flex-end;
}

.vtr-badge-promo,
.vtr-badge-nouveau {
	padding: 6px 10px;
	border-radius: var(--vtr-rayon-case);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.vtr-badge-promo {
	background: var(--vtr-promo-fond);
	color: var(--vtr-promo-texte);
	font-size: 14px;
}

.vtr-badge-nouveau {
	background: #fff;
	color: var(--vtr-texte);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* --- Logo de marque sur l'image --- */
.vtr-carte__logo {
	position: absolute;
	bottom: 12px;
	left: 12px;
	z-index: 2;
	display: flex;
	pointer-events: none;
}

.vtr-logo {
	display: block;
	width: auto;
	max-width: 88px;
	height: auto;
	max-height: 26px;
	object-fit: contain;
}

.vtr-carte__marque--logo .vtr-logo {
	max-width: 76px;
	max-height: 20px;
}

.vtr-logo--noir {
	filter: brightness(0);
}

.vtr-logo--blanc {
	filter: brightness(0) invert(1);
}

.vtr-logo.is-opaque {
	filter: grayscale(1) contrast(1.2);
	mix-blend-mode: multiply;
}

/* --- Corps --- */
.vtr-carte__corps {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	padding-top: 14px;
	color: var(--vtr-texte);
}

/* L'ordre choisi dans le bloc prime sur celui imposé par le thème
   (Astra place par exemple le prix en fin de carte avec "order"). */
.vtr-bloc .vtr-carte .vtr-carte__corps > * {
	order: 0 !important;
}

.vtr-grille--bordure .vtr-carte__corps {
	padding: 16px;
}

.vtr-grille--align-center .vtr-carte__corps {
	align-items: center;
	text-align: center;
}

.vtr-carte__delai {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 4px;
}

.vtr-grille--align-center .vtr-carte__delai {
	justify-content: center;
}

.vtr-pastille {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: var(--vtr-forme-rayon);
	background: var(--vtr-pastille-fond);
	color: var(--vtr-pastille-texte);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

.vtr-pastille::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.8;
}

.vtr-pastille--livraison-express {
	background: var(--vtr-pastille-express-fond);
	color: var(--vtr-pastille-express-texte);
}

.vtr-delai {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	min-width: 0;
	color: var(--vtr-pastille-texte);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
}

.vtr-delai-icone {
	flex-shrink: 0;
}

.vtr-delai-texte {
	overflow: hidden;
	min-width: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vtr-delai-sep {
	opacity: 0.55;
}

.vtr-delai--unique {
	padding: 4px 10px 4px 8px;
	border-radius: var(--vtr-forme-rayon);
	background: var(--vtr-pastille-fond);
}

.vtr-delai.is-express {
	color: var(--vtr-pastille-express-texte);
}

.vtr-delai--unique.is-express {
	background: var(--vtr-pastille-express-fond);
}

.vtr-carte__categorie {
	color: var(--vtr-texte-doux);
	font-size: 13px;
	line-height: 1.3;
}

.vtr-carte__marque {
	color: var(--vtr-texte-doux);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* --- Coloris --- */
.vtr-carte__coloris {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 2px 0 0;
}

.vtr-grille--align-center .vtr-carte__coloris {
	justify-content: center;
}

.vtr-coloris {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--vtr-c);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.vtr-coloris__plus {
	color: var(--vtr-texte-doux);
	font-size: 12px;
	line-height: 14px;
}

.vtr-carte__titre {
	margin: 0;
	padding: 0;
	color: var(--vtr-texte);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

.vtr-grille--clamp .vtr-carte__titre {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: var(--vtr-titre-lignes);
	line-clamp: var(--vtr-titre-lignes);
	-webkit-box-orient: vertical;
}

.vtr-carte__titre a {
	color: inherit;
	text-decoration: none;
}

.vtr-carte__titre a:hover {
	color: inherit;
	text-decoration: none;
}

.vtr-carte__titre a:focus-visible {
	outline: none;
}

/* Clavier : le cadre de focus entoure toute la carte. */
.vtr-carte:has(.vtr-carte__titre a:focus-visible) {
	outline: 2px solid var(--vtr-texte);
	outline-offset: 4px;
}

/* Toute la carte est cliquable via le titre (lien étendu). */
.vtr-carte__titre a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.vtr-carte__extrait {
	margin: 0;
	color: var(--vtr-texte-doux);
	font-size: 14px;
	line-height: 1.5;
}

.vtr-carte__prix {
	margin: 2px 0 0;
	color: var(--vtr-texte);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

.vtr-carte__prix del {
	margin-right: 4px;
	color: var(--vtr-texte-doux);
	font-weight: 400;
	opacity: 1;
}

.vtr-carte__prix ins {
	background: none;
	text-decoration: none;
}

.vtr-carte__prix small,
.vtr-prix-suffixe {
	color: var(--vtr-texte-doux);
	font-size: 11px;
	font-weight: 400;
}

.vtr-carte__stock {
	font-size: 13px;
	font-weight: 500;
}

.vtr-carte__stock--instock {
	color: var(--vtr-stock-ok);
}

.vtr-carte__stock--onbackorder {
	color: var(--vtr-stock-commande);
}

.vtr-carte__stock--outofstock {
	color: var(--vtr-stock-rupture);
}

/* --- Bouton (au-dessus du lien étendu de la carte) --- */
.vtr-carte__bouton {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 10px;
}

.vtr-grille--align-center .vtr-carte__bouton {
	justify-content: center;
}

.vtr-bloc .vtr-carte .vtr-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	margin: 0;
	padding: 10px 20px;
	border: 1px solid var(--vtr-texte);
	border-radius: var(--vtr-forme-rayon);
	background: transparent;
	color: var(--vtr-texte);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	box-shadow: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.vtr-bloc .vtr-carte .vtr-bouton:hover,
.vtr-bloc .vtr-carte .vtr-bouton:focus-visible {
	background: var(--vtr-texte);
	color: #fff;
}

.vtr-bloc .vtr-carte .vtr-bouton--plein {
	background: var(--vtr-texte);
	color: #fff;
}

.vtr-bloc .vtr-carte .vtr-bouton--plein:hover {
	background: #3a3a3a;
	border-color: #3a3a3a;
}

.vtr-bloc .vtr-carte .vtr-bouton--lien {
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.vtr-bloc .vtr-carte .vtr-bouton--lien:hover {
	background: none;
	color: var(--vtr-texte);
	text-decoration-thickness: 2px;
}

.vtr-bloc .vtr-carte .vtr-bouton.loading {
	opacity: 0.6;
	pointer-events: none;
}

.vtr-bloc .vtr-carte .added_to_cart {
	color: var(--vtr-texte);
	font-size: 13px;
	text-decoration: underline;
}

@media (max-width: 544px) {
	.vtr-carte__corps {
		gap: 4px;
		padding-top: 10px;
	}

	.vtr-carte__titre,
	.vtr-carte__prix {
		font-size: 14px;
	}

	.vtr-carte__extrait {
		display: -webkit-box;
		overflow: hidden;
		font-size: 13px;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.vtr-pastille {
		padding: 3px 8px;
		font-size: 11px;
	}

	.vtr-delai {
		gap: 4px;
		font-size: 11.5px;
	}

	.vtr-delai-icone {
		width: 12px;
		height: 12px;
	}

	.vtr-badges {
		top: 8px;
		gap: 4px;
	}

	.vtr-badges--gauche {
		left: 8px;
	}

	.vtr-badges--droite {
		right: 8px;
	}

	.vtr-badge-promo {
		padding: 5px 7px;
		font-size: 12px;
	}

	.vtr-badge-nouveau {
		padding: 4px 6px;
		font-size: 10px;
	}

	.vtr-carte__logo {
		bottom: 8px;
		left: 8px;
	}

	.vtr-logo {
		max-width: 64px;
		max-height: 20px;
	}

	.vtr-carte__bouton {
		padding-top: 6px;
	}

	.vtr-bloc .vtr-carte .vtr-bouton:not(.vtr-bouton--lien) {
		width: 100%;
		min-height: 38px;
		padding: 8px 10px;
		font-size: 13px;
	}
}

/* =================================================================
 * Mobile : catégories et panneau de filtres
 * ================================================================= */
@media (max-width: 640px) {
	.vtr-mobile-defilement .vtr-filtres ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-inline: -16px;
		margin-bottom: 12px;
		padding: 2px 16px 8px;
		scroll-padding-inline: 16px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
	}

	.vtr-mobile-defilement .vtr-filtres ul::-webkit-scrollbar {
		display: none;
	}

	.vtr-mobile-defilement .vtr-filtres li:last-child {
		padding-right: 16px;
	}

	.vtr-js.vtr-mobile-menu .vtr-filtres ul {
		display: none;
	}

	.vtr-js.vtr-mobile-menu .vtr-menu-cat {
		display: block;
	}

	.vtr-chip {
		min-height: min(var(--vtr-filtre-hauteur), 38px);
		padding: 7px 15px;
		font-size: min(var(--vtr-filtre-police), 12px);
	}
}

@media (max-width: 781px) {
	/* Barre : bouton "Filtrer" + nombre de produits */
	.vtr-js .vtr-barre {
		flex-wrap: nowrap;
		margin-bottom: 12px;
	}

	.vtr-js .vtr-ouvrir {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 42px;
		padding: 8px 16px;
		border: 1px solid var(--vtr-filtre-texte);
		border-radius: var(--vtr-forme-rayon);
		background: #fff;
		color: var(--vtr-filtre-texte);
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
	}

	.vtr-js .vtr-total--mobile {
		display: inline;
		margin-left: auto;
	}

	.vtr-js .vtr-total--bureau {
		display: none;
	}

	/* Panneau plein écran */
	.vtr-js .vtr-panneau {
		position: fixed;
		inset: 0;
		z-index: 100000;
		display: flex;
		flex-direction: column;
		background: #fff;
		visibility: hidden;
		transform: translateY(100%);
		transition: transform 0.4s var(--vtr-ease), visibility 0s linear 0.4s;
	}

	.vtr-bloc.is-panneau-ouvert .vtr-panneau {
		visibility: visible;
		transform: none;
		transition: transform 0.4s var(--vtr-ease), visibility 0s;
	}

	.vtr-js .vtr-panneau__tete {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 12px 14px 20px;
		border-bottom: 1px solid var(--vtr-bordure);
	}

	.vtr-panneau__titre {
		color: var(--vtr-texte);
		font-size: 18px;
		font-weight: 600;
	}

	.vtr-fermer {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: var(--vtr-texte);
		cursor: pointer;
	}

	.vtr-js .vtr-panneau__corps {
		display: block;
		flex: 1;
		overflow-y: auto;
		padding: 4px 20px 20px;
		overscroll-behavior: contain;
	}

	.vtr-js .vtr-panneau__pied {
		display: flex;
		align-items: center;
		gap: 16px;
		padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--vtr-bordure);
		background: #fff;
	}

	.vtr-voir {
		flex: 1;
		min-height: 48px;
		font-size: 15px;
	}

	/* Facettes en accordéon */
	.vtr-panneau .vtr-facette {
		border-bottom: 1px solid var(--vtr-bordure);
	}

	.vtr-panneau .vtr-facette__bouton {
		display: flex;
		width: 100%;
		min-height: 56px;
		padding: 14px 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		font-size: 15px;
		letter-spacing: 0;
		text-transform: none;
	}

	.vtr-panneau .vtr-facette__bouton > span:first-child {
		flex: 1;
		font-weight: 600;
	}

	.vtr-panneau .vtr-facette__panneau,
	.vtr-panneau .vtr-facette[data-facette="prix"] .vtr-facette__panneau {
		position: static;
		width: auto;
		min-width: 0;
		max-width: none;
		max-height: none;
		padding: 0 0 14px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		animation: none;
	}

	.vtr-panneau .vtr-option {
		padding: 11px 4px;
		font-size: 15px;
	}

	.vtr-panneau .vtr-facette--interrupteur {
		display: flex;
		width: 100%;
		min-height: 56px;
		padding: 14px 0;
		border: 0;
		border-bottom: 1px solid var(--vtr-bordure);
		border-radius: 0;
		font-size: 15px;
		font-weight: 600;
		letter-spacing: 0;
		text-transform: none;
	}

	.vtr-panneau .vtr-facette--interrupteur > span:nth-of-type(2) {
		flex: 1;
		order: -1;
	}

	/* Sans JavaScript : les filtres restent affichés en liste, avec le bouton "Voir". */
	.vtr-bloc:not(.vtr-js) .vtr-panneau {
		display: block;
		width: 100%;
	}

	.vtr-bloc:not(.vtr-js) .vtr-panneau__corps {
		display: block;
	}

	.vtr-bloc:not(.vtr-js) .vtr-panneau__pied {
		display: flex;
		align-items: center;
		gap: 16px;
		padding-top: 12px;
	}
}

html.vtr-verrou,
html.vtr-verrou body {
	overflow: hidden;
}

/* =================================================================
 * Pagination
 * ================================================================= */
.vtr-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 36px;
}

.vtr-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--vtr-bordure);
	border-radius: var(--vtr-forme-rayon);
	color: var(--vtr-texte);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.vtr-page:hover {
	background: var(--vtr-fond-hover);
	text-decoration: none;
}

.vtr-page.is-active {
	background: var(--vtr-actif-fond);
	border-color: var(--vtr-actif-fond);
	color: var(--vtr-actif-texte);
}

.vtr-aucun-produit {
	margin: 0;
	padding: 40px 0;
	color: var(--vtr-texte-doux);
	text-align: center;
}

/* =================================================================
 * "Voir plus de produits"
 * ================================================================= */
.vtr-plus {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 44px;
	text-align: center;
}

.vtr-plus__etat {
	margin: 0;
	color: var(--vtr-texte-doux);
	font-size: 13px;
}

.vtr-plus__barre {
	position: relative;
	display: block;
	width: 200px;
	max-width: 60%;
	height: 3px;
	overflow: hidden;
	border-radius: 2px;
	background: var(--vtr-bordure);
}

.vtr-plus__barre::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--vtr-progression, 0%);
	border-radius: 2px;
	background: var(--vtr-actif-fond);
	transition: width 0.5s var(--vtr-ease);
}

.vtr-plus__bouton {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	margin-top: 6px;
	padding: 12px 30px;
	border: 1px solid var(--vtr-texte);
	border-radius: var(--vtr-forme-rayon);
	color: var(--vtr-texte);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.vtr-plus__bouton:hover,
.vtr-plus__bouton:focus-visible {
	background: var(--vtr-texte);
	color: #fff;
	text-decoration: none;
}

.vtr-plus__bouton.is-chargement {
	pointer-events: none;
}

.vtr-plus__bouton.is-chargement span {
	opacity: 0.35;
}

.vtr-plus__bouton.is-chargement::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: vtr-rotation 0.7s linear infinite;
}

@keyframes vtr-rotation {
	to {
		transform: rotate(360deg);
	}
}


/* =================================================================
 * Menu "Trier par"
 * ================================================================= */
.vtr-tri {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--vtr-texte-doux);
	font-size: 13px;
	white-space: nowrap;
}

.vtr-tri__champ {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.vtr-tri select {
	box-sizing: border-box !important;
	min-height: var(--vtr-filtre-hauteur);
	margin: 0;
	padding: 6px 36px 6px 14px;
	border: 1px solid var(--vtr-bordure);
	border-radius: var(--vtr-forme-rayon);
	background: #fff;
	color: var(--vtr-texte);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.vtr-tri select:hover {
	border-color: var(--vtr-filtre-texte);
}

.vtr-tri .vtr-chevron {
	position: absolute;
	right: 12px;
	pointer-events: none;
}

.vtr-bloc:not(.has-facettes) .vtr-total--bureau {
	margin-left: 0;
	margin-right: auto;
}

/* =================================================================
 * Barre de filtres collante
 * ================================================================= */
@media (min-width: 782px) {
	.vtr-collant .vtr-barre {
		position: sticky;
		top: var(--vtr-decalage, 0px);
		z-index: 30;
		padding: 10px 0;
		box-shadow: -24px 0 0 #fff, 24px 0 0 #fff;
		background: #fff;
		transition: box-shadow 0.25s ease;
	}

	.vtr-collant .vtr-barre.is-colle {
		box-shadow: -24px 0 0 #fff, 24px 0 0 #fff, 0 10px 24px -18px rgba(0, 0, 0, 0.45);
	}
}

/* Bouton "Filtrer" flottant (mobile) */
.vtr-flottant {
	position: fixed;
	bottom: calc(18px + env(safe-area-inset-bottom));
	left: 50%;
	z-index: 9990;
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 10px 22px;
	border: 0;
	border-radius: var(--vtr-forme-rayon);
	background: var(--vtr-actif-fond);
	color: var(--vtr-actif-texte);
	font-size: 15px;
	font-weight: 600;
	box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.5);
	opacity: 0;
	transform: translate(-50%, 20px);
	transition: opacity 0.25s ease, transform 0.35s var(--vtr-ease);
	cursor: pointer;
	pointer-events: none;
}

.vtr-flottant .vtr-badge {
	background: var(--vtr-actif-texte);
	color: var(--vtr-actif-fond);
}

@media (max-width: 781px) {
	.vtr-flottant {
		display: inline-flex;
	}

	.vtr-flottant.is-visible {
		opacity: 1;
		transform: translate(-50%, 0);
		pointer-events: auto;
	}

	/* Ligne mobile : Filtrer + Trier + total */
	.vtr-js .vtr-barre {
		gap: 8px;
	}

	.vtr-tri__libelle {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.vtr-tri select {
		width: 100%;
		min-height: 42px;
		max-width: 46vw;
		font-size: 14px;
		text-overflow: ellipsis;
	}

	/* Colonne étroite (marges de page importantes) : le menu de tri passe
	   sur sa propre ligne au lieu de sortir de l'écran. */
	.vtr-js .vtr-barre {
		flex-wrap: wrap;
		align-items: center;
		row-gap: 8px;
	}

	.vtr-js .vtr-barre > .vtr-tri {
		flex: 1 0 130px;
		justify-content: flex-end;
		min-width: 0;
	}

	.vtr-js .vtr-barre .vtr-tri__champ {
		flex: 1 1 auto;
		max-width: 100%;
	}

	.vtr-js .vtr-barre .vtr-tri select {
		max-width: none;
		padding: 6px 30px 6px 12px;
		font-size: 13px;
	}

	.vtr-js .vtr-barre .vtr-tri .vtr-chevron {
		right: 9px;
	}
}

/* =================================================================
 * Carte "aménagement" dans la grille
 * ================================================================= */
.vtr-cta {
	position: relative;
	display: flex;
	min-height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	color: #fff;
	list-style: none;
	isolation: isolate;
}

/* Fond (couleur + photo) : aligné sur les cartes voisines, marges de cellule comprises. */
.vtr-cta__fond {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	border-radius: var(--vtr-arrondi);
	background: #1f1f1d;
}

.vtr-bloc .vtr-grille--lignes > .vtr-cta .vtr-cta__fond {
	inset: var(--vtr-cellule);
}

.vtr-bloc .vtr-grille--lignes-horizontales > .vtr-cta .vtr-cta__fond {
	inset: var(--vtr-cellule) 0;
}

.vtr-cta::marker,
.vtr-cta::before {
	content: none;
}

/* Plusieurs cartes dans la même case : une seule visible (tirée au sort par le script). */
.vtr-cta__variante {
	display: contents;
}

.vtr-cta__variante[hidden] {
	display: none !important;
}

.vtr-bloc .vtr-cta__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	/* Le thème impose height:auto aux images : la photo doit couvrir toute la carte. */
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	object-fit: cover;
	transition: transform 1s var(--vtr-ease);
}

.vtr-cta__fond.has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.82) 100%);
}

@media (hover: hover) {
	.vtr-cta:hover .vtr-cta__img {
		transform: scale(1.04);
	}
}

.vtr-cta__contenu {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
	width: 100%;
	padding: 28px 24px;
}

.vtr-cta__surtitre {
	margin: 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.vtr-cta__titre {
	margin: 0;
	color: #fff;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
}

.vtr-cta__texte {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
	line-height: 1.55;
}

.vtr-cta__bouton {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 10px;
	margin-top: 8px;
	padding: 12px 20px;
	border: 1px solid #fff;
	border-radius: var(--vtr-forme-rayon);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.vtr-cta__bouton svg {
	transition: transform 0.3s var(--vtr-ease);
}

.vtr-cta__bouton:hover,
.vtr-cta__bouton:focus-visible {
	background: #fff;
	color: #1a1a1a;
	text-decoration: none;
}

.vtr-cta__bouton:hover svg {
	transform: translateX(4px);
}

.vtr-cta__bouton.is-externe:hover svg {
	transform: translate(3px, -3px);
}

/* Le lien couvre toute la carte. */
.vtr-cta__bouton::after {
	content: "";
	position: absolute;
	inset: 0;
}

@media (max-width: 544px) {
	/* La carte prend toute la largeur : le produit suivant remonte combler le trou. */
	.vtr-grille:has(> .vtr-cta) {
		grid-auto-flow: row dense;
	}

	.vtr-cta {
		grid-column: 1 / -1;
		min-height: 320px;
	}

	.vtr-cta__titre {
		font-size: 21px;
	}
}

/* =================================================================
 * Apparition douce des photos
 * ================================================================= */
.vtr-js .vtr-carte__img:not(.vtr-carte__img--survol):not([loading="eager"]) {
	opacity: 0;
	transition: opacity 0.6s ease, transform 0.8s var(--vtr-ease);
}

.vtr-js .vtr-carte__img.is-chargee:not(.vtr-carte__img--survol) {
	opacity: 1;
}

/* =================================================================
 * Chargement et animations
 * ================================================================= */
.vtr-resultats {
	position: relative;
}

/* Sans animation : simple atténuation pendant le chargement. */
.vtr-bloc:not(.vtr-anime) .vtr-resultats {
	transition: opacity 0.2s ease;
}

.vtr-bloc.is-loading:not(.vtr-anime) .vtr-resultats {
	opacity: 0.4;
	pointer-events: none;
}

/* Barre de progression fine, visible seulement si la réponse tarde. */
.vtr-resultats::before {
	content: "";
	position: absolute;
	top: -14px;
	left: 0;
	z-index: 3;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--vtr-actif-fond), transparent);
	background-size: 40% 100%;
	background-repeat: no-repeat;
	opacity: 0;
	pointer-events: none;
}

.vtr-bloc.is-loading .vtr-resultats::before {
	opacity: 1;
	transition: opacity 0.2s ease 0.35s;
	animation: vtr-progression 1.1s ease-in-out infinite;
}

@keyframes vtr-progression {
	from {
		background-position: -40% 0;
	}

	to {
		background-position: 140% 0;
	}
}

/* Sortie des cartes. */
.vtr-anime .vtr-resultats > ul > li,
.vtr-anime .vtr-resultats > .vtr-pagination,
.vtr-anime .vtr-resultats > .vtr-plus,
.vtr-anime .vtr-resultats > .vtr-aucun-produit {
	transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

.vtr-anime .vtr-resultats.is-sortie > ul > li,
.vtr-anime .vtr-resultats.is-sortie > .vtr-pagination,
.vtr-anime .vtr-resultats.is-sortie > .vtr-plus,
.vtr-anime .vtr-resultats.is-sortie > .vtr-aucun-produit {
	opacity: 0;
	transform: translateY(-6px) scale(0.985);
	filter: blur(2px);
	pointer-events: none;
}

/* Entrée des nouvelles cartes en cascade. */
/* Entrée des cartes : après un filtrage (is-entree), un "Voir plus" (is-ajout)
   ou au défilement (is-revele). Trois styles au choix dans le bloc. */
.vtr-anime {
	--vtr-pas: 55ms;
}

.vtr-anime--rideau,
.vtr-anime--nettete {
	--vtr-pas: 90ms;
}

.vtr-anime .vtr-resultats.is-entree > ul > li,
.vtr-anime .vtr-resultats > ul > li.is-ajout,
.vtr-anime .vtr-resultats > ul > li.is-revele {
	animation: vtr-entree 0.6s var(--vtr-ease) both;
	animation-delay: calc(var(--vtr-i, 0) * var(--vtr-pas));
}

/* Style "Mise au point" : la carte passe du flou au net, sans déplacement. */
.vtr-anime--nettete .vtr-resultats.is-entree > ul > li,
.vtr-anime--nettete .vtr-resultats > ul > li.is-ajout,
.vtr-anime--nettete .vtr-resultats > ul > li.is-revele {
	animation-name: vtr-nettete;
	animation-duration: 1.1s;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Style "Rideau" : la photo se dévoile de bas en haut en se resserrant,
   puis les textes montent. */
.vtr-anime--rideau .vtr-resultats.is-entree > ul > li,
.vtr-anime--rideau .vtr-resultats > ul > li.is-ajout,
.vtr-anime--rideau .vtr-resultats > ul > li.is-revele {
	animation-name: vtr-fondu;
	animation-duration: 0.45s;
	animation-timing-function: ease;
}

.vtr-anime--rideau .vtr-resultats.is-entree > ul > li .vtr-carte__media,
.vtr-anime--rideau .vtr-resultats > ul > li.is-ajout .vtr-carte__media,
.vtr-anime--rideau .vtr-resultats > ul > li.is-revele .vtr-carte__media {
	animation: vtr-rideau 1s cubic-bezier(0.77, 0, 0.175, 1) both;
	animation-delay: calc(var(--vtr-i, 0) * var(--vtr-pas));
}

.vtr-anime--rideau .vtr-resultats.is-entree > ul > li .vtr-carte__img,
.vtr-anime--rideau .vtr-resultats > ul > li.is-ajout .vtr-carte__img,
.vtr-anime--rideau .vtr-resultats > ul > li.is-revele .vtr-carte__img {
	animation: vtr-rideau-img 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(var(--vtr-i, 0) * var(--vtr-pas));
}

.vtr-anime--rideau .vtr-resultats.is-entree > ul > li .vtr-carte__corps,
.vtr-anime--rideau .vtr-resultats > ul > li.is-ajout .vtr-carte__corps,
.vtr-anime--rideau .vtr-resultats > ul > li.is-revele .vtr-carte__corps {
	animation: vtr-monte 0.7s var(--vtr-ease) both;
	animation-delay: calc(var(--vtr-i, 0) * var(--vtr-pas) + 380ms);
}

/* Cartes sous la ligne de flottaison : en attente jusqu'à leur arrivée à l'écran. */
.vtr-anime .vtr-resultats > ul > li.is-attente.is-attente {
	opacity: 0;
	animation: none;
}

.vtr-anime .vtr-resultats > ul > li.is-attente.is-attente * {
	animation: none;
}

@keyframes vtr-nettete {
	from {
		opacity: 0;
		transform: scale(1.04);
		filter: blur(14px);
	}

	45% {
		opacity: 1;
	}

	to {
		opacity: 1;
		transform: none;
		filter: none;
	}
}

@keyframes vtr-rideau {
	from {
		clip-path: inset(100% 0 0 0);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes vtr-rideau-img {
	from {
		transform: scale(1.22);
	}

	to {
		transform: scale(1);
	}
}

@keyframes vtr-monte {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.vtr-anime .vtr-resultats.is-entree > .vtr-pagination,
.vtr-anime .vtr-resultats.is-entree > .vtr-plus,
.vtr-anime .vtr-resultats.is-entree > .vtr-aucun-produit {
	animation: vtr-fondu 0.5s ease 0.2s both;
}

@keyframes vtr-entree {
	from {
		opacity: 0;
		transform: translateY(22px) scale(0.97);
		filter: blur(4px);
	}

	60% {
		filter: blur(0);
	}

	to {
		opacity: 1;
		transform: none;
		filter: none;
	}
}

@keyframes vtr-fondu {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vtr-bloc *,
	.vtr-bloc *::before,
	.vtr-bloc *::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0s !important;
		transition-duration: 0.01ms !important;
	}
}

/* =================================================================
 * Recherche libre dans la liste (barre de filtres)
 * ================================================================= */
.vtr-texte {
	box-sizing: border-box;
	display: inline-flex;
	flex: 0 1 240px;
	align-items: center;
	gap: 8px;
	min-width: 150px;
	min-height: var(--vtr-filtre-hauteur);
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--vtr-bordure);
	border-radius: var(--vtr-forme-rayon);
	background: #fff;
	color: var(--vtr-filtre-texte);
	cursor: text;
	transition: border-color 0.2s ease;
}

.vtr-texte:focus-within,
.vtr-texte:hover {
	border-color: var(--vtr-filtre-texte);
}

.vtr-texte svg {
	flex: none;
	opacity: 0.7;
}

.vtr-texte input[type="search"] {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 6px 0;
	border: 0;
	border-radius: 0;
	outline: none;
	box-shadow: none;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: max(var(--vtr-filtre-police), 14px);
	line-height: 1.2;
	-webkit-appearance: none;
	appearance: none;
}

.vtr-texte input[type="search"]::placeholder {
	color: var(--vtr-texte-doux);
	opacity: 1;
}

.vtr-texte input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

@media (max-width: 781px) {
	/* Mobile : le champ prend toute la ligne, au-dessus de « Filtrer » et du tri. */
	.vtr-barre > .vtr-texte {
		flex: 1 1 100%;
		order: -1;
		min-height: 42px;
	}

	.vtr-texte input[type="search"] {
		font-size: 16px;
	}
}

/* =================================================================
 * Images de carte : le cadre est toujours rempli (recadrage au centre)
 * ================================================================= */
/* Le thème impose height:auto aux images WooCommerce : sans ceci, une photo qui n'a pas
   la forme du cadre (paysage dans un carré…) reste collée en haut au lieu de le remplir. */
.vtr-bloc .vtr-carte__img {
	width: 100%;
	max-width: none;
	height: 100%;
}

/* Produit mis de côté pour garder des rangées complètes (voir front.js). */
.vtr-grille > .is-reporte {
	display: none !important;
}

/* =================================================================
 * Titre des pages catégorie, boutique et recherche (gérées par Vitrine)
 * Même typographie que le titre des fiches produit : encre, graisse fine.
 * Le thème lui donne sinon la couleur des liens.
 * ================================================================= */
.vtr-archive-active .woocommerce-products-header__title.page-title,
.vtr-archive-active .ast-archive-description .ast-archive-title {
	margin-bottom: 0.5em;
	color: #14171f;
	font-size: clamp(32px, 3.2vw, 46px);
	font-weight: 300;
	line-height: 1.12;
	letter-spacing: -0.01em;
	text-transform: none;
}

/* --- Produit testable au showroom (pastille sur la photo) --- */
.vtr-badge-showroom {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 9px 5px 7px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--vtr-texte);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
	pointer-events: none;
	border-radius: var(--vtr-rayon-case);
}

@media (max-width: 544px) {
	.vtr-badge-showroom {
		right: 8px;
		bottom: 8px;
		padding: 4px 6px;
		font-size: 10px;
	}
}