.listeproduits {
		width:100%;
		margin-top:20px;
		display:grid;
		grid-gap:1em;
		grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
	}

/* Entrance for cards re-appearing after a filter. categorie.js opts them out of the
   FLIP (so they never fly from off-screen), then tags them .acg-enter for a gentle
   grow-in. We animate the INNER .blocproduit so the grid item's measured box — which
   animategrid reads for the shuffle — is never touched. */
@keyframes cardEnter {
	from { opacity: 0; transform: scale(.86); }
	to   { opacity: 1; transform: none; }
}
.productcard.acg-enter > .blocproduit {
	animation: cardEnter .3s cubic-bezier(.22,1,.36,1) both;
}


/* Mobile filter bottom-sheet chrome is hidden on desktop (where #filtrespage is
   the normal left sidebar). Revealed only inside the ≤960px block below. */
#filters-toggle,
#filters-backdrop,
.filters-sheet-head,
.filters-sheet-foot { display: none; }

@media only screen and (max-width : 960px) {
	.productpage {
		padding-left:1em;
		padding-right:1em;
		grid-template-columns: 1fr;     /* grid full width; the filter panel becomes a fixed bottom sheet (out of flow) */
	}

	/* ---- #filtrespage as a bottom sheet ---- */
	#filtrespage {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		max-height: 85dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		transform: translateY(100%);
		transition: transform .28s ease;
		z-index: 99990;                 /* below the menu drawer (99999); above content */
		background: #261e19;
		box-shadow: 0 -8px 24px rgba(0,0,0,.45);
		border-radius: 16px 16px 0 0;
		padding: 0;   /* no bottom padding: the sticky "Voir N résultats" footer is the last child and must sit flush
		                 on the screen edge — 4px here lifted it (12px above the button vs 16px below) */
	}
	body.filters-open #filtrespage { transform: translateY(0); }
	body.filters-open { overflow: hidden; }   /* scroll-lock the page behind the sheet */

	/* the sheet's own sticky header is the title now — hide the desktop sidebar
	   "Filtres" heading to avoid a double title */
	#filtrespage > .gradient.h2 { display: none; }

	/* single column on mobile: the "Produits" section header just repeats the page
	   <h1> right below it (it only earns its place next to the filters column on
	   desktop) — drop it */
	.produits > .gradient.h2 { display: none; }

	/* dim backdrop */
	#filters-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,.5);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .28s ease;
		z-index: 99989;
	}
	body.filters-open #filters-backdrop {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/* floating "Filtres (N)" trigger pill */
	#filters-toggle {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		position: fixed;
		right: 14px;
		bottom: 14px;
		z-index: 99988;
		padding: 12px 18px;
		border: 0;
		border-radius: 999px;
		background: var(--brand-gradient);
		color: #fff;
		font-weight: 700;
		box-shadow: 0 4px 14px rgba(0,0,0,.35);
		cursor: pointer;
	}
	body.filters-open #filters-toggle { display: none; }   /* hidden while the sheet is open */

	/* sticky in-sheet header (title + ×) — uses the brand gradient (preferred look) */
	.filters-sheet-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: sticky;
		top: 0;
		z-index: 2;
		padding: 10px 16px;
		background: var(--brand-gradient);
		color: #fff;
		font-weight: 700;
		font-size: 1.5rem;
	}
	.filters-sheet-head #filters-close {
		width: 36px; height: 36px;
		border: 0; background: none; color: #fff;
		font-size: 26px; line-height: 1; cursor: pointer; border-radius: 8px;
	}
	.filters-sheet-head #filters-close:hover { background: rgba(255,255,255,.12); }

	/* sticky in-sheet footer ("Voir N résultats") */
	/* Filter rows sized for a finger (UI/UX review 2026-10-04): 44 px rows, 20 px boxes (were native 13 px, 16 px rows).
	   accent-color keeps the native control (state, a11y) in the brand colour. */
	#filtrespage .filtrecontent { display: flex; align-items: center; min-height: 44px; margin-left: 12px; }
	#filtrespage .filtrecontent input[type=checkbox] { flex: none; width: 20px; height: 20px; margin: 0 10px 0 0; accent-color: var(--brand); }
	#filtrespage .filtrecontent label { flex: 1; display: flex; align-items: center; gap: 6px; min-height: 44px; vertical-align: middle !important; }

	.filters-sheet-foot {
		display: block;
		position: sticky;
		bottom: 0;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: #261e19;
		border-top: 1px solid rgba(255,255,255,.12);
	}
	.filters-sheet-foot #filters-apply {
		width: 100%;
		padding: 14px;
		font-size: 15px;
		border: 0;
		border-radius: 10px;
		cursor: pointer;
	}
}

.imagecat3 {

}




@media only screen and (max-width : 400px) {
	

}