/* ==========================================================================
   HARD DÉCO — ARTICLES SIMILAIRES
   ========================================================================== */

/* ==========================================================================
   TITRE DE SECTION
   ========================================================================== */

.hd-related-articles {
	margin-bottom:60px !important;
}
.hd-related-articles__heading {
	margin-bottom: clamp(32px, 4vw, 48px);
	text-align: center;
}

.hd-related-articles__kicker {
	margin: 0 0 8px;

	color: #20b9d7;

	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1.4;

	text-transform: uppercase;
}

.hd-related-articles__title {
	margin: 0;

	color: #30465f;

	font-size: clamp(28px, 3vw, 38px);
	font-weight: 700;
	letter-spacing: -.025em;
	line-height: 1.15;
}


/* ==========================================================================
   GRILLE
   ========================================================================== */

.hd-related-articles__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 36px);
}


/* ==========================================================================
   ARTICLE
   ========================================================================== */

.hd-related-article {
	min-width: 0;
}


/* Image */

.hd-related-article__image-link {
	display: block;

	aspect-ratio: 16 / 10;

	margin-bottom: 22px;

	border-radius: 7px;

	overflow: hidden;
	background: #edf3f6;
}

.hd-related-article__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition: transform .45s ease;
}

.hd-related-article__image-link:hover
.hd-related-article__image {
	transform: scale(1.025);
}

.hd-related-article__placeholder {
	display: block;

	width: 100%;
	height: 100%;

	background: #edf3f6;
}


/* ==========================================================================
   MÉTADONNÉES
   ========================================================================== */

.hd-related-article__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;

	margin-bottom: 10px;

	color: #7b8da0;

	font-size: 12px;
	line-height: 1.4;
}

.hd-related-article__category {
	color: #20b9d7;

	font-weight: 650;

	text-transform: uppercase;
	letter-spacing: .045em;
}

.hd-related-article__separator {
	color: #a7b3bd;
}


/* ==========================================================================
   TITRE ARTICLE
   ========================================================================== */

.hd-related-article__title {
	margin: 0;

	color: #30465f;

	font-size: clamp(20px, 2vw, 25px);
	font-weight: 650;
	letter-spacing: -.015em;
	line-height: 1.3;
}

.hd-related-article__title a {
	color: inherit;
	text-decoration: none;
}

.hd-related-article__title a:hover {
	color: #20b9d7;
}


/* ==========================================================================
   EXTRAIT
   ========================================================================== */

.hd-related-article__excerpt {
	margin: 14px 0 0;

	color: #61758a;

	font-size: 14px;
	line-height: 1.7;
}


/* ==========================================================================
   LIEN
   ========================================================================== */

.hd-related-article__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;

	margin-top: 18px;

	color: #30465f;

	font-size: 13px;
	font-weight: 700;

	text-decoration: none;
}

.hd-related-article__link span {
	color: #20b9d7;

	font-size: 17px;

	transition: transform .2s ease;
}

.hd-related-article__link:hover {
	color: #20b9d7;
}

.hd-related-article__link:hover span {
	transform: translateX(4px);
}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 900px) {

	.hd-related-articles__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * Si 3 articles :
	 * le dernier occupe toute la ligne.
	 */
	.hd-related-article:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.hd-related-article:last-child:nth-child(odd)
	.hd-related-article__image-link {
		aspect-ratio: 16 / 7;
	}
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

	.hd-related-articles {
		width: calc(100vw - 32px);

		margin-top: 60px;
		margin-bottom: 60px;
	}

	.hd-related-articles__heading {
		margin-bottom: 30px;
	}

	.hd-related-articles__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.hd-related-article:last-child:nth-child(odd) {
		grid-column: auto;
	}

	.hd-related-article:last-child:nth-child(odd)
	.hd-related-article__image-link {
		aspect-ratio: 16 / 10;
	}

	.hd-related-article__excerpt {
		font-size: 14px;
	}
}


/* ==========================================================================
   ACCESSIBILITÉ
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.hd-related-article__image,
	.hd-related-article__link span {
		transition: none;
	}

}