/* ==========================================================================
   HARD DÉCO — « À LIRE AUSSI »
   ========================================================================== */

.hd-read-more {
	--hd-read-more-cyan: var(--theme-palette-color-1, #20b9d7);

	margin: clamp(28px, 4vw, 42px) 0;
	border-left: 3px solid var(--hd-read-more-cyan);
	background: var(--hd-read-more-bg);
}

/* Variante par défaut, destinée aux fonds blancs ou clairs. */
.hd-read-more--light {
	--hd-read-more-title: var(--theme-headings-color, #30465f);
	--hd-read-more-bg: #f4f7f9;
}

.hd-read-more__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 22px;
	align-items: center;
	padding: 19px 22px;
	color: var(--hd-read-more-title) !important;
	text-decoration: none !important;
}

.hd-read-more__content {
	display: block;
	min-width: 0;
}

.hd-read-more__kicker {
	display: block;
	margin-bottom: 5px;
	color: var(--hd-read-more-cyan);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.hd-read-more__title {
	display: block;
	color: var(--hd-read-more-title);
	font-size: clamp(1rem, 1.6vw, 1.12rem);
	font-weight: 700;
	line-height: 1.4;
	transition: color 180ms ease;
}

.hd-read-more__arrow {
	color: var(--hd-read-more-cyan);
	font-size: 1.15rem;
	line-height: 1;
	transition: transform 180ms ease;
}

.hd-read-more__link:hover .hd-read-more__title,
.hd-read-more__link:focus-visible .hd-read-more__title {
	color: var(--hd-read-more-cyan);
}

.hd-read-more__link:hover .hd-read-more__arrow,
.hd-read-more__link:focus-visible .hd-read-more__arrow {
	transform: translateX(4px);
}

.hd-read-more__link:focus-visible {
	outline: 2px solid var(--hd-read-more-cyan);
	outline-offset: 3px;
}

/* Variante destinée aux sections Hard Déco sur fond bleu foncé. */
.hd-read-more--dark {
	--hd-read-more-title: #ffffff;
	--hd-read-more-bg: rgba(255, 255, 255, 0.045);
}

.hd-read-more--dark .hd-read-more__link:hover .hd-read-more__title,
.hd-read-more--dark .hd-read-more__link:focus-visible .hd-read-more__title {
	color: var(--hd-read-more-cyan);
}

@media (max-width: 600px) {
	.hd-read-more {
		margin-block: 25px 34px;
	}

	.hd-read-more__link {
		gap: 14px;
		padding: 17px 17px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hd-read-more__title,
	.hd-read-more__arrow {
		transition: none;
	}
}