/* ==========================================================================
   HARD DÉCO — SOMMAIRE DES ARTICLES
   ========================================================================== */

.hd-toc {
	--hd-toc-navy: var(--theme-headings-color, #30465f);
	--hd-toc-cyan: var(--theme-palette-color-1, #20b9d7);
	--hd-toc-text: var(--theme-text-color, #61758a);
	--hd-toc-soft: #f4f7f9;
	--hd-toc-border: #dce5eb;

	position: relative;
	margin: clamp(42px, 6vw, 70px) 0;
	padding: clamp(25px, 4vw, 38px) clamp(23px, 4vw, 38px);
	border-left: 3px solid var(--hd-toc-cyan);
	border-radius: 0 6px 6px 0;
	background: var(--hd-toc-soft);
}

.hd-toc__header {
	margin-bottom: 20px;
}

.hd-toc__kicker {
	margin: 0 0 7px !important;
	color: var(--hd-toc-cyan) !important;
	font-size: 0.73rem !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.hd-toc__title {
	margin: 0 !important;
	color: var(--hd-toc-navy) !important;
	font-size: clamp(1.3rem, 2vw, 1.55rem) !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
}

.hd-toc__list {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	counter-reset: hd-toc;
}

.hd-toc__item {
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
	border-top: 1px solid var(--hd-toc-border);
	list-style: none !important;
	counter-increment: hd-toc;
}

.hd-toc__item::before {
	display: none !important;
	content: none !important;
}

.hd-toc__link {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 13px 2px;
	color: var(--hd-toc-navy) !important;
	font-size: 0.97rem;
	font-weight: 600;
	line-height: 1.45;
	text-decoration: none !important;
}

.hd-toc__link::before {
	color: var(--hd-toc-cyan);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	content: counter(hd-toc, decimal-leading-zero);
}

.hd-toc__arrow {
	color: var(--hd-toc-cyan);
	font-size: 1rem;
	font-weight: 400;
	transition: transform 180ms ease;
}

.hd-toc__link:hover,
.hd-toc__link:focus-visible {
	color: var(--hd-toc-cyan) !important;
}

.hd-toc__link:hover .hd-toc__arrow,
.hd-toc__link:focus-visible .hd-toc__arrow {
	transform: translateX(4px);
}

/* H3 optionnels : légèrement en retrait, sans casser la numérotation. */
.hd-toc__item--level-3 .hd-toc__link {
	padding-left: 22px;
	font-size: 0.92rem;
	font-weight: 500;
}

/* Les ancres restent visibles sous un éventuel header sticky. */
.single-post .entry-content h2[id],
.single-post .entry-content h3[id],
.single-post .hd-blog-single-content h2[id],
.single-post .hd-blog-single-content h3[id] {
	scroll-margin-top: 120px;
}

@media (max-width: 600px) {
	.hd-toc {
		margin-block: 38px 48px;
		padding: 22px 18px;
	}

	.hd-toc__header {
		margin-bottom: 15px;
	}

	.hd-toc__link {
		grid-template-columns: 31px minmax(0, 1fr) auto;
		gap: 9px;
		padding-block: 12px;
		font-size: 0.94rem;
	}

	.hd-toc__item--level-3 .hd-toc__link {
		padding-left: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hd-toc__arrow {
		transition: none;
	}
}