:root {
	--rc-green: #0cdc75;
	--rc-green-light: #12F484;
	--rc-dark: #01271a;
	--rc-teal: #014F53;
	--rc-arrow-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='9' viewBox='0 0 15 9' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M0 4.5h14M10.5 1l3.5 3.5-3.5 3.5'/%3E%3C/svg%3E");
}


/* =========================================================
   CATÉGORIES  [display_categs]
   ========================================================= */
.rc-categories-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	display: none;

	& .rc-category-item {
		margin: 0;
		padding: 4px 8px;
		background: transparent;
		border: 1px solid var(--rc-green);
		border-radius: 0;
		box-shadow: none;

		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 14px;
		font-weight: 400;
		line-height: 22px;
		letter-spacing: 0;
		text-transform: none;
		color: var(--rc-green);
		cursor: pointer;
		transition: background-color .25s ease, color .25s ease;

		&:hover,
		&:focus-visible,
		&.active {
			background: var(--rc-green);
			color: var(--rc-dark);
		}

		&:focus-visible {
			outline: 2px solid var(--rc-dark);
			outline-offset: 2px;
		}
	}
}


/* =========================================================
   GRILLE  [display_posts]
   ========================================================= */
.rc-posts-container {

	& .rc-posts-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 80px 40px;
		transition: opacity .2s ease;
	}

	&.is-loading .rc-posts-grid {
		opacity: .4;
		pointer-events: none;
	}

	/* ---------- Carte ---------- */
	& .rc-post-item {
		display: flex;
		flex-direction: column;
		padding-bottom: 32px;
		border-bottom: 1px solid var(--rc-teal);

		& a {
			outline-offset: 2px;
		}
	}

	& .rc-post-thumb {
		display: block;
		margin-bottom: 25px;
		overflow: hidden;

		& img,
		& .rc-post-thumb-placeholder {
			display: block;
			width: 100%;
			height: auto;
			aspect-ratio: 374 / 210;
			object-fit: cover;
			border-radius: 0;
		}

		& .rc-post-thumb-placeholder {
			background: var(--rc-teal);
		}
	}

	/* ---------- Catégorie + date ---------- */
	& .rc-post-meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px 15px;
		margin-bottom: 16px;
	}

	& .rc-post-cats {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	& .rc-post-cat {
		padding: 4px 8px;
		border: 1px solid var(--rc-green);
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 14px;
		font-weight: 400;
		line-height: 22px;
		color: var(--rc-green);
	}

	& .rc-post-date {
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 14px;
		font-weight: 400;
		line-height: 22px;
		color: var(--rc-dark);
	}

	/* ---------- Titre ---------- */
	& .rc-post-title {
		margin: 0 0 30px;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 20px;
		font-weight: 500;
		line-height: 26px;
		letter-spacing: -0.02em;

		& a {
			color: var(--rc-dark);
			text-decoration: underline;
			text-decoration-color: transparent;
			text-underline-offset: 3px;
			transition: text-decoration-color .25s ease;
		}
	}

	/* ---------- Bouton flèche ---------- */
	& .rc-post-arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		margin-top: auto; /* aligne les flèches d'une même ligne */

		background-color: var(--rc-teal);
		background-image: linear-gradient(var(--rc-green-light), var(--rc-green-light));
		background-repeat: no-repeat;
		background-position: right center;
		background-size: 0% 100%;
		color: #fff;
		transition: background-size .3s ease, color .3s ease;

		&::before {
			content: '';
			width: 15px;
			height: 9px;
			background: currentColor;
			-webkit-mask: var(--rc-arrow-sm) no-repeat center / contain;
			mask: var(--rc-arrow-sm) no-repeat center / contain;
		}
	}

	/* ---------- Survol de la carte ---------- */
	& .rc-post-item:hover,
	& .rc-post-item:focus-within {

		& .rc-post-title a {
			text-decoration-color: currentColor;
		}

		& .rc-post-arrow {
			background-position: left center;
			background-size: 100% 100%;
			color: var(--rc-dark);
		}
	}

	& .rc-no-posts {
		grid-column: 1 / -1;
		margin: 0;
		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 18px;
		line-height: 27px;
		color: var(--rc-dark);
	}

	/* ---------- Voir + ---------- */
	& .rc-load-more-wrapper {
		margin-top: 60px;
		text-align: center;
	}

	& #rc-load-more {
		margin: 0;
		padding: 20px;
		background: var(--rc-green-light);
		border: none;
		border-radius: 0;
		box-shadow: none;

		font-family: 'Plus Jakarta Sans', sans-serif;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		color: var(--rc-dark);
		cursor: pointer;
		transition: background-color .25s ease;

		&:hover {
			background: var(--rc-green);
			color: var(--rc-dark);
		}

		&:focus-visible {
			outline: 2px solid var(--rc-dark);
			outline-offset: 2px;
		}
	}
}


/* =========================================================
   RESPONSIVE
   ========================================================= */
@media screen and (width <= 1024px) {
	.rc-posts-container .rc-posts-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 60px 30px;
	}
}

@media screen and (width <= 767px) {
	.rc-posts-container {

		& .rc-posts-grid {
			grid-template-columns: 1fr;
			gap: 40px;
		}

		& .rc-post-item {
			padding-bottom: 25px;
		}

		& .rc-post-thumb {
			margin-bottom: 20px;
		}

		& .rc-post-meta {
			margin-bottom: 12px;
		}

		& .rc-post-title {
			font-size: 18px;
			line-height: 24px;
			margin-bottom: 20px;
		}

		& .rc-load-more-wrapper {
			margin-top: 40px;
		}
	}
}