/*
 * Archive des articles (gabarit home.php) : intro + grille 3 colonnes.
 * Classes propres (d4e-blog*), pas de reprise du CSS legacy .post-wrap
 * (imevent-child/content.php) dont le gabarit visuel est différent.
 */

.d4e-blog {
	padding: 60px 0 80px;
}

.d4e-blog__intro {
	max-width: 760px;
	margin: 0 auto 50px;
	text-align: center;
	font-size: 17px;
	line-height: 1.6em;
}

.d4e-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px 30px;
}

.d4e-blog__card {
	margin: 0;
}

.d4e-blog__thumb {
	display: block;
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background-color: #f0f0f0;
}

.d4e-blog__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms;
}

.d4e-blog__thumb:hover img {
	transform: scale(1.04);
}

.d4e-blog__title {
    margin: 18px 0 6px;
    font-size: 25px !important;
    line-height: 1.25em;
    font-weight: 700;
    margin-top: 5px;
}

.d4e-blog__title a {
	color: #f18785;
}

.d4e-blog__title a:hover,
.d4e-blog__title a:focus {
	color: #ee7474;
}

.d4e-blog__date {
	display: block;
	color: #999;
	font-size: 14px;
}

.d4e-blog__pagination {
	margin-top: 60px;
	text-align: center;
}

.d4e-blog__pagination .page-numbers {
	display: inline-block;
	min-width: 36px;
	padding: 6px 10px;
	margin: 0 3px;
	border-radius: 5px;
	color: #333;
	text-align: center;
}

.d4e-blog__pagination a.page-numbers:hover {
	background-color: #f18785;
	color: #fff;
}

.d4e-blog__pagination .page-numbers.current {
	background-color: #f18785;
	color: #fff;
}

@media (max-width: 991px) {
	.d4e-blog__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.d4e-blog__grid {
		grid-template-columns: 1fr;
	}
}