/*
 * Présentation & chiffres — Kahel · The archive.
 */

.kahel-home-archive {
	padding-top: var(--wp--custom--home--section-padding-y);
	padding-bottom: var(--wp--custom--home--section-padding-y);
}

/* Le texte et les actions se lisent sous le titre, dans la même colonne. */
.kahel-home-archive .kahel-home-archive-head {
	display: flex;
	flex-direction: column;
}

.kahel-home-archive .kahel-home-archive-title {
	margin: 0;
}

.kahel-home-archive .kahel-home-archive-aside {
	max-width: 62ch;
	margin-top: 28px;
}

.kahel-home-archive .kahel-home-archive-copy {
	margin: 0;
}

.kahel-home-archive .kahel-home-stats {
	display: grid;
	grid-template-columns: repeat(var(--kahel-colonnes, 3), minmax(0, 1fr));
	gap: var(--wp--custom--home--stats-gap);
	margin-top: var(--wp--custom--home--stats-margin-top);
}

/* Le filet de Kahel, redessiné en pseudo-élément pour pouvoir le tracer. */
.kahel-home-archive .kahel-home-stat {
	position: relative;
	padding-left: 28px;
}

.kahel-home-archive .kahel-home-stat::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	border-radius: 3px;
	background: var(--wp--preset--color--orange);
	transform-origin: top;
	transition: transform 1s var(--wp--custom--motion--ease-out-expo) calc(var(--bc-p-delai, 0ms) + 120ms);
}

.bc-anim-prete .kahel-home-archive.bc-anim:not(.is-vu) .kahel-home-stat::before,
.bc-anim-prete .kahel-home-archive.bc-anim .kahel-home-stat.kahel-attend::before {
	transform: scaleY(0);
}

.kahel-home-archive .kahel-home-stat-value {
	margin: 0;
	color: var(--wp--preset--color--orange);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.07em;
	font-variant-numeric: tabular-nums;
}

.kahel-home-archive .kahel-home-stat-suffix {
	margin-left: 0.04em;
}

/* Un suffixe en toutes lettres (« ans », « km ») se détache du nombre. */
.kahel-home-archive .kahel-home-stat-suffix.is-mot {
	margin-left: 0.2em;
}

.kahel-home-archive .kahel-home-stat-label {
	display: block;
	margin: 16px 0 0;
	font-weight: 800;
}

/* Sur mobile, deux chiffres par rangée ; un seul sur les très petits écrans. */
@media (max-width: 700px) {
	.kahel-home-archive .kahel-home-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 340px) {
	.kahel-home-archive .kahel-home-stats {
		grid-template-columns: 1fr;
	}
}