/* Studio Lumile AffiLink – grille de produits */

.affx-grid-wrap {
	--affx-grid-gap: 20px;
	--affx-grid-cols: 4;
	--affx-grid-cols-tablet: 2;
	--affx-grid-cols-mobile: 1;
	--affx-loupe-offset: 12px;
	--affx-clear-offset: 12px;
}

.affx-grid-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 18px;
}

.affx-grid-toolbar .affx-grid-search {
	margin: 0;
	flex: 0 1 360px;
}

.affx-grid-toolbar .affx-grid-filters {
	margin: 0;
	flex: 1 1 auto;
	justify-content: flex-end;
}

.affx-grid-toolbar--filters_first .affx-grid-filters {
	justify-content: flex-start;
}

@media ( max-width: 640px ) {
	.affx-grid-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.affx-grid-toolbar .affx-grid-search {
		flex-basis: auto;
	}

	.affx-grid-toolbar .affx-grid-filters,
	.affx-grid-toolbar--filters_first .affx-grid-filters {
		justify-content: flex-start;
	}
}

.affx-grid-search {
	margin: 0 0 16px;
}

.affx-search-box {
	position: relative;
	max-width: 360px;
}

.affx-grid-search-input {
	width: 100%;
	padding: 9px 40px;
	border: 1px solid #d7dbe0;
	border-radius: 8px;
	font-size: 14px;
	background: #fff;
	box-sizing: border-box;
}

.affx-grid-search-input:focus {
	outline: 2px solid #9aa4af;
	outline-offset: 1px;
	border-color: #9aa4af;
}

.affx-search-icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.1em;
	height: 1.1em;
	font-size: 16px;
	color: #8a94a0;
	pointer-events: none;
}

.affx-search-icon[hidden] {
	display: none;
}

.affx-search-icon svg,
.affx-search-icon i {
	width: 1em;
	height: 1em;
	font-size: inherit;
}

.affx-search-loupe {
	pointer-events: none;
}

.affx-loupe-left .affx-search-loupe {
	left: var( --affx-loupe-offset, 12px );
}

.affx-loupe-right .affx-search-loupe {
	right: var( --affx-loupe-offset, 12px );
}

.affx-loupe-left .affx-grid-search-input {
	padding-left: calc( var( --affx-loupe-offset, 12px ) + 26px );
}

.affx-loupe-right .affx-grid-search-input {
	padding-right: calc( var( --affx-loupe-offset, 12px ) + 26px );
}

.affx-search-clear {
	appearance: none;
	border: none;
	background: none;
	cursor: pointer;
	padding: 0;
	pointer-events: auto;
}

.affx-clear-left .affx-search-clear {
	left: var( --affx-clear-offset, 12px );
}

.affx-clear-right .affx-search-clear {
	right: var( --affx-clear-offset, 12px );
}

.affx-clear-left .affx-grid-search-input {
	padding-left: calc( var( --affx-clear-offset, 12px ) + 26px );
}

.affx-clear-right .affx-grid-search-input {
	padding-right: calc( var( --affx-clear-offset, 12px ) + 26px );
}

/* Si loupe et croix sont du même côté, la croix ignore son propre
   décalage et vient se placer juste à côté de la loupe (distance fixe),
   pour éviter tout écart disgracieux entre les deux icônes. Le décalage
   réglable de la croix ne s'applique que lorsqu'elle est de l'autre côté
   par rapport à la loupe. */
.affx-loupe-left.affx-clear-left .affx-search-clear {
	left: calc( var( --affx-loupe-offset, 12px ) + 22px );
}

.affx-loupe-right.affx-clear-right .affx-search-clear {
	right: calc( var( --affx-loupe-offset, 12px ) + 22px );
}

.affx-loupe-left.affx-clear-left .affx-grid-search-input {
	padding-left: calc( var( --affx-loupe-offset, 12px ) + 44px );
}

.affx-loupe-right.affx-clear-right .affx-grid-search-input {
	padding-right: calc( var( --affx-loupe-offset, 12px ) + 44px );
}

.affx-grid-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
}

.affx-pill {
	appearance: none;
	cursor: pointer;
	border: 1px solid #d7dbe0;
	background: #fff;
	color: #33404a;
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	line-height: 1.4;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.affx-pill:hover {
	border-color: #b6bec6;
}

.affx-pill.is-active {
	background: #14181d;
	border-color: #14181d;
	color: #fff;
}

.affx-pill-count {
	opacity: .65;
	font-size: .9em;
}

.affx-grid-grid {
	display: grid;
	grid-template-columns: repeat( var( --affx-grid-cols ), 1fr );
	gap: var( --affx-grid-gap );
}

@media ( max-width: 1024px ) {
	.affx-grid-grid {
		grid-template-columns: repeat( var( --affx-grid-cols-tablet ), 1fr );
	}
}

@media ( max-width: 600px ) {
	.affx-grid-grid {
		grid-template-columns: repeat( var( --affx-grid-cols-mobile ), 1fr );
	}
}

.affx-grid-empty {
	text-align: center;
	color: #6c7781;
	padding: 32px 12px;
	margin: 0;
}

.affx-grid-empty[hidden] {
	display: none;
}

.affx-grid-more {
	display: flex;
	justify-content: center;
	margin-top: 22px;
}

.affx-grid-loadmore {
	appearance: none;
	cursor: pointer;
	border: 1px solid #14181d;
	background: #fff;
	color: #14181d;
	border-radius: 999px;
	padding: 10px 26px;
	font-size: 14px;
	font-weight: 600;
	transition: background .15s ease, color .15s ease;
}

.affx-grid-loadmore:hover {
	background: #14181d;
	color: #fff;
}

.affx-grid-loadmore[disabled] {
	opacity: .55;
	cursor: default;
	pointer-events: none;
}

/* Pagination numérotée */
.affx-grid-pager {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 22px;
}

.affx-pager-btn {
	appearance: none;
	cursor: pointer;
	border: 1px solid #d7dbe0;
	background: #fff;
	color: #33404a;
	border-radius: 6px;
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	font-size: 13px;
	line-height: 1;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.affx-pager-btn:hover:not([disabled]) {
	border-color: #b6bec6;
}

.affx-pager-btn.is-active {
	background: #14181d;
	border-color: #14181d;
	color: #fff;
	cursor: default;
}

.affx-pager-btn[disabled]:not(.is-active) {
	opacity: .4;
	cursor: default;
	pointer-events: none;
}

.affx-pager-ellipsis {
	color: #9aa4af;
	padding: 0 2px;
	font-size: 13px;
}

.affx-grid-wrap[data-affx-grid-loading] .affx-grid-grid {
	opacity: .6;
}

/* Carte compacte : hérite de .affx-card (front.css) pour la coquille
   (bordure, fond, arrondi) et le comptage de clic délégué, ne redéfinit
   que la mise en page dense. */
.affx-gcard {
	--affx-nav-display: none; /* pas de carrousel dans la grille */
}

.affx-gcard .affx-media img {
	height: 160px;
	padding: 10px;
}

.affx-gcard .affx-body {
	padding: 12px 14px 14px;
	gap: 6px;
}

.affx-gcard .affx-title {
	font-size: 14px;
	line-height: 1.35;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.affx-gcard .affx-desc {
	font-size: 12.5px;
	color: var( --affx-muted, #5f6b76 );
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}

.affx-gcard .affx-merchant {
	font-size: 11px;
	margin: 0 0 2px;
}

.affx-gtags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 2px 0;
}

.affx-gtag {
	display: inline-block;
	font-size: 11px;
	line-height: 1.4;
	padding: 2px 8px;
	border-radius: 999px;
	background: #eef0f2;
	color: #4a5560;
}

.affx-gcard .affx-foot {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	margin-top: auto;
}

.affx-gcard .affx-price {
	font-weight: 700;
	font-size: 13px;
}

.affx-gcard .affx-cta {
	white-space: nowrap;
	font-size: 12.5px;
	padding: 7px 12px;
	border-radius: 999px;
	background: var( --affx-cta-bg, #14181d );
	color: var( --affx-cta-color, #fff );
	text-decoration: none;
	margin-left: auto; /* comportement par défaut : bouton poussé à droite */
	transition: transform .15s ease;
}

/* Position du bouton, indépendante du prix — voir Style → Bouton d'action */
.affx-btnpos-left .affx-gcard .affx-cta {
	margin-left: 0;
	margin-right: auto;
}

.affx-btnpos-center .affx-gcard .affx-cta {
	margin-left: auto;
	margin-right: auto;
}

.affx-btnpos-right .affx-gcard .affx-cta {
	margin-left: auto;
	margin-right: 0;
}

/* Effet au survol du bouton, indépendant de celui de la carte et de l'image */
.affx-btnhover-scale .affx-gcard .affx-cta:hover {
	transform: scale(1.06);
}

.affx-btnhover-lift .affx-gcard .affx-cta:hover {
	transform: translateY(-2px);
}

@media ( prefers-reduced-motion: reduce ) {
	.affx-grid-wrap * {
		transition: none !important;
	}
}

/* Effets de survol — repris des réglages travaillés sur Riste - Postgrid */
.affx-hover-lift .affx-gcard {
	transition: transform .18s ease, box-shadow .18s ease;
}

.affx-hover-lift .affx-gcard:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .09);
}

.affx-hover-zoom .affx-gcard .affx-media {
	overflow: hidden;
}

.affx-hover-zoom .affx-gcard .affx-media img {
	transition: transform .35s ease;
}

.affx-hover-zoom .affx-gcard:hover .affx-media img {
	transform: scale(1.07);
}

/* Effet de survol propre à l'image (section « Image mise en avant »),
   indépendant de l'effet de survol de la carte entière ci-dessus. */
.affx-imghover-zoom_in .affx-gcard .affx-media,
.affx-imghover-zoom_out .affx-gcard .affx-media {
	overflow: hidden;
}

.affx-imghover-zoom_in .affx-gcard .affx-media img,
.affx-imghover-zoom_out .affx-gcard .affx-media img {
	transition: transform .35s ease;
}

.affx-imghover-zoom_in .affx-gcard:hover .affx-media img {
	transform: scale(1.08);
}

.affx-imghover-zoom_out .affx-gcard .affx-media img {
	transform: scale(1.08);
}

.affx-imghover-zoom_out .affx-gcard:hover .affx-media img {
	transform: scale(1);
}

/* ===================================================================== */
/* Style de carte « Superposition au survol »                             */
/* L'image occupe toute la carte ; titre et prix apparaissent en          */
/* incrustation, uniquement au survol (ou au focus clavier).              */
/* ===================================================================== */
.affx-cardstyle-overlay .affx-gcard {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.affx-cardstyle-overlay .affx-gcard .affx-media {
	position: absolute;
	inset: 0;
	height: 100%;
}

.affx-cardstyle-overlay .affx-gcard .affx-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	padding: 0;
}

.affx-cardstyle-overlay .affx-gcard .affx-body {
	position: absolute;
	inset: auto 0 0 0;
	background: linear-gradient( to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .35) 60%, transparent 100% );
	color: #fff;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .22s ease, transform .22s ease;
	pointer-events: none;
}

.affx-cardstyle-overlay .affx-gcard:hover .affx-body,
.affx-cardstyle-overlay .affx-gcard:focus-within .affx-body {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.affx-cardstyle-overlay .affx-gcard .affx-desc,
.affx-cardstyle-overlay .affx-gcard .affx-merchant {
	color: rgba(255, 255, 255, .85);
}

.affx-cardstyle-overlay .affx-gcard .affx-price {
	color: #fff;
}

.affx-cardstyle-overlay .affx-gcard .affx-title a,
.affx-cardstyle-overlay .affx-gcard .affx-title {
	color: #fff;
}

.affx-cardstyle-overlay .affx-gtag {
	background: rgba(255, 255, 255, .18);
	color: #fff;
}

@media ( hover: none ) {
	/* Écrans tactiles : pas de survol fiable, l'incrustation reste visible
	   en permanence pour ne pas cacher le titre et le prix. */
	.affx-cardstyle-overlay .affx-gcard .affx-body {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.affx-cardstyle-overlay .affx-gcard .affx-body {
		transition: none;
	}
}