/*
--------------------------------------
item
--------------------------------------
*/

.post-item__title a {
	color: var(--e-global-color-primary);
	transition: color 0.5s ease;
}

.post-item__title svg rect {
	fill: transparent; /* ✅ pas de fond au repos */
	stroke: var(--e-global-color-primary); /* ✅ contour dès le début */
	transition: clip-path 0.5s ease, fill 0.5s ease, stroke 0.5s ease;
	clip-path: inset(100% 0 0 0); /* ✅ effet de remplissage masqué */
}

.post-item__title--is-active svg rect {
	fill: var(--e-global-color-primary); /* ✅ fond se remplit en actif */
	clip-path: inset(0 0 0 0); /* ✅ révèle progressivement le fond */
}

.post-item__title--is-active svg path {
	stroke: #fff; /* ✅ flèche devient blanche */
	transition: stroke 0.5s ease;
}



/*content*/

.post-items__content {
	column-gap: 60px;
	padding-bottom: 80px;
}

.post-items__content .post-item__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid rgba(21, 11, 102, 0.20);
	padding: 1em 0;
}

.post-items__content .post-item__title-text {
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 24px;
	font-weight: 400;
	color: var(--e-global-color-primary);
	line-height: calc(20px + (34 - 20) * ((100vw - 320px) / (1920 - 320)));
	letter-spacing: -0.6px;
}
@media (max-width: 767px) {
	.post-items__content .post-item__title-text {
		font-size: 20px !important;
	}
}
/*img*/

.post-item__img img {
	object-fit: cover;
	transition: opacity 0.35s ease;
	width: 100%;
	max-width: 100%;
	height: 480px;
	opacity: 1;
}