/* 10-hero. Figma Hero/Home 31:284 (desktop 1440 / mobile 375). */
.kd-home .kd-home-hero {
	position: relative;
	overflow: clip; /* shapes slide in from the edge and drift on scroll: keep them inside the hero */
	background: var(--kdh-white);
	padding-block: 72px 56px;
	text-align: center;
}
.kd-home .kd-home-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kdh-s-24);
	position: relative;
	z-index: 1;
}
.kd-home .kd-home-hero__title { max-width: 1120px; }
.kd-home .kd-home-hero__sub { max-width: 720px; }
.kd-home .kd-home-hero__ctas { justify-content: center; }

.kd-home .kd-home-hero__shapes { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
/* phone: asterisk bottom-left, quarter top-right (Figma 31:278 / 31:282) */
.kd-home .kd-home-hero__asterisk { width: 44px; height: 44px; left: 16px; bottom: 24px; }
.kd-home .kd-home-hero__quarter { width: 32px; height: 40px; right: 24px; top: 8px; }
.kd-home .kd-home-hero__halfpill,
.kd-home .kd-home-hero__dots,
.kd-home .kd-home-hero__disc { display: none; }

@media (min-width: 768px) {
	.kd-home .kd-home-hero { padding-block: 100px 80px; }
	.kd-home .kd-home-hero__asterisk { width: 64px; height: 64px; left: 4%; top: 48px; bottom: auto; }
	.kd-home .kd-home-hero__quarter { width: 63px; height: 78px; right: 3%; top: 40px; }
}
@media (min-width: 1024px) {
	.kd-home .kd-home-hero { padding-block: 140px 120px; }
	.kd-home .kd-home-hero__inner { padding-inline: 100px; width: min(var(--kdh-max), 100% - 2 * var(--kdh-gutter)); }
	.kd-home .kd-home-hero__halfpill,
	.kd-home .kd-home-hero__dots,
	.kd-home .kd-home-hero__disc { display: block; }
	.kd-home .kd-home-hero__asterisk { width: 90px; height: 90px; left: 110px; top: 80px; }
	.kd-home .kd-home-hero__quarter { width: 88px; height: 110px; right: 42px; top: 70px; }
	.kd-home .kd-home-hero__halfpill { width: 76px; height: 80px; right: 14px; bottom: 60px; }
	.kd-home .kd-home-hero__dots { width: 178px; height: 82px; left: 80px; bottom: 88px; }
	.kd-home .kd-home-hero__disc { width: 40px; height: 40px; right: 30px; top: 300px; }
}
@media (min-width: 1200px) {
	.kd-home .kd-home-hero__inner { padding-inline: 0; }
}

/* FR phone: "transformatrice?" is wider than the 343px content box at 44px */
@media (max-width: 479.98px) {
	html:lang(fr) .kd-home .kd-home-hero__title { font-size: min(var(--kdh-fs-display), 10.4vw); }
}

/* ---------- Motion (Alain, 2026-10-19): shapes pop in on load, then drift on scroll ----------
   Entrance animates the <img>, parallax moves the positioned <span>, so the two never fight.
   --kdh-hero-scroll is set by 10-hero.js (px scrolled); without JS the shapes just sit still. */
.kd-home .kd-home-hero__shape {
	transform: translate3d(0, calc(var(--kdh-hero-scroll, 0) * var(--kdh-drift, 0) * 1px), 0);
	will-change: transform;
}
.kd-home .kd-home-hero__asterisk { --kdh-drift: .18; }
.kd-home .kd-home-hero__quarter { --kdh-drift: .32; }
.kd-home .kd-home-hero__halfpill { --kdh-drift: .12; }
.kd-home .kd-home-hero__dots { --kdh-drift: .22; }
.kd-home .kd-home-hero__disc { --kdh-drift: .42; }
.kd-home .kd-home-hero__asterisk img { rotate: calc(var(--kdh-hero-scroll, 0) * .12deg); }

@keyframes kdh-pop-spin { from { opacity: 0; transform: scale(0) rotate(-180deg); } to { opacity: 1; transform: none; } }
@keyframes kdh-slide-in { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes kdh-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes kdh-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
	.kd-home .kd-home-hero__shape img { animation: .9s cubic-bezier(.34, 1.56, .64, 1) both; }
	.kd-home .kd-home-hero__asterisk img { animation-name: kdh-pop-spin; animation-delay: .1s; }
	.kd-home .kd-home-hero__quarter img { animation-name: kdh-slide-in; animation-delay: .25s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
	.kd-home .kd-home-hero__dots img { animation-name: kdh-rise; animation-delay: .35s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
	.kd-home .kd-home-hero__halfpill img { animation-name: kdh-slide-in; animation-delay: .45s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
	.kd-home .kd-home-hero__disc img { animation-name: kdh-pop; animation-delay: .55s; }
}
@media (prefers-reduced-motion: reduce) {
	.kd-home .kd-home-hero__shape { transform: none; will-change: auto; }
	.kd-home .kd-home-hero__asterisk img { rotate: none; }
}