:root{
	--cat-cols: 6;
}


.cat-grid{
	max-width:1600px;
	margin:0 auto;
	padding:28px 16px 36px;

	--radius: 10px;
	--bd: rgba(0,0,0,.08);
	--shadow: 0 10px 30px rgba(0,0,0,.08);
	--bg: #fff;
	--soft: rgba(0,0,0,.04);
}

.cat-grid__title{
	/* text-align:center; */
	/* font-weight:850; */
	/* font-size:clamp(32px,4.8vw,56px); */
	/* letter-spacing:-.02em; */
	/* margin:0 0 26px; */
	/* color:#141414; */
	
	/* copie hilight */
	display: flex;
    justify-content: flex-start;
    font-size: 2.4em;
    font-weight: 700;
    margin: 0 0 26px;
    text-align: center;
}

/* ===== GRID : 4 COLONNES ===== */
.cat-grid__list{
	list-style:none;
	margin:0;
	padding:0;

	display:grid;
	grid-template-columns:repeat(var(--cat-cols, 4), minmax(0,1fr));
	gap:18px;
}

.cat-grid__item{
	min-width:0;
}

/* ===== CARTE ===== */
.cat-grid__link{
	display:grid;
	grid-template-rows: 150px auto; /* image / texte */
	height:100%;

	text-decoration:none;
	color:inherit;

	background:var(--bg);
	border:1px solid var(--bd);
	border-radius:var(--radius);
	overflow:hidden;

	box-shadow: 0 0 0 rgba(0,0,0,0);
	transform:translateY(0);
	transition:
		transform .25s ease,
		box-shadow .25s ease,
		border-color .25s ease;
}

/* ===== ZONE IMAGE ===== */
.cat-grid__media{
	display:flex;
	align-items:center;
	justify-content:center;

	height:150px;
	padding:12px;

	background:linear-gradient(180deg, var(--soft), rgba(0,0,0,0));
}

/* Image plus petite */
.cat-grid__img{
	width:auto;
	height:auto;
	max-width:90%;
	max-height:90%;
	object-fit:contain;

	transform:scale(1);
	transition:transform .35s ease;
	mix-blend-mode: multiply;
}

/* ===== ZONE TEXTE ===== */
.cat-grid__meta{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;

	padding:14px 16px 16px;
	border-top:1px solid rgba(0,0,0,.06);
}

/* Titre : 2 lignes max */
.cat-grid__name{
	font-size:16px;
	font-weight:750;
	letter-spacing:.01em;
	text-transform:uppercase;
	line-height:1.15;
	opacity:.92;

	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}

.cat-grid__cta{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	width:34px;
	height:34px;
	border-radius:999px;
	background:rgba(0,0,0,.05);

	transform:translateX(0);
	transition:transform .25s ease, background .25s ease;
}

/* ===== HOVER ===== */
.cat-grid__link:hover,
.cat-grid__link:focus-visible{
	border-color: rgba(0,0,0,.16);
	box-shadow: var(--shadow);
	transform:translateY(-2px);
	outline:none;
}

.cat-grid__link:hover .cat-grid__img,
.cat-grid__link:focus-visible .cat-grid__img{
	transform:scale(1.04);
}

.cat-grid__link:hover .cat-grid__cta,
.cat-grid__link:focus-visible .cat-grid__cta{
	background:rgba(0,0,0,.08);
	transform:translateX(2px);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px){
	.cat-grid__list{
		grid-template-columns:repeat(3, minmax(0,1fr));
	}
}

@media (max-width: 860px){
	.cat-grid__list{
		grid-template-columns:repeat(2, minmax(0,1fr));
	}

	.cat-grid__link{
		grid-template-rows: 140px auto;
	}

	.cat-grid__media{
		height:140px;
	}
}

@media (max-width: 520px){
	.cat-grid__list{
		grid-template-columns:1fr;
	}
}

/* ===== ACCESSIBILITÉ ===== */
@media (prefers-reduced-motion: reduce){
	.cat-grid__link,
	.cat-grid__img,
	.cat-grid__cta{
		transition:none;
	}

	.cat-grid__link:hover{
		transform:none;
	}

	.cat-grid__link:hover .cat-grid__img{
		transform:none;
	}
}