/**
 * Widget Hero Sunugafa — repris du template (.hero).
 */
.snf-hero {
	position: relative;
	min-height: 60vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 40px 8%;
	overflow: hidden;
}
.snf-hero .hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
/* Ken Burns très lent (désactivé si l'utilisateur préfère moins de mouvement). */
@media (prefers-reduced-motion: no-preference) {
	.snf-hero .hero-bg {
		animation: snf-kenburns 22s ease-out both;
	}
}
@keyframes snf-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.08); }
}
.snf-hero .hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: none;
}
.snf-hero .hero-dots {
	position: absolute;
	inset: 0;
	z-index: 2;
	background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 42px 42px;
	pointer-events: none;
}
.snf-hero .hero-inner {
	position: relative;
	z-index: 3;
	max-width: 880px;
}
.snf-hero .hero-label {
	color: var(--snf-green2, #00D9FF);
	justify-content: center;
	margin-bottom: 14px;
}
.snf-hero .hero-h1 {
	font-family: var(--fd, 'Josefin Sans', sans-serif);
	font-size: 70px;
	color: var(--snf-white, #fff);
	line-height: .95;
	letter-spacing: .03em;
	margin-bottom: 20px;
	animation: snf-fadeUp .8s both;
}
.snf-hero .hero-h1 .accent {
	color: var(--snf-green2, #00D9FF);
	display: block;
}
.snf-hero .hero-desc {
	font-size: .98rem;
	color: rgba(255, 255, 255, .82);
	max-width: 580px;
	margin: 0 auto 36px;
	line-height: 1.7;
	animation: snf-fadeUp .8s .12s both;
}
.snf-hero .hero-actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	animation: snf-fadeUp .8s .22s both;
}

/* Mobile : rythme resserré, titre borné, actions pleine largeur au pouce. */
@media (max-width: 767px) {
	.snf-hero {
		padding: 32px 6%;
		min-height: 52vh;
	}
	.snf-hero .hero-h1 {
		font-size: clamp(2.1rem, 9vw, 3rem);
	}
}
@media (max-width: 400px) {
	.snf-hero .hero-actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}
	.snf-hero .hero-actions .btn-fill,
	.snf-hero .hero-actions .btn-outline {
		text-align: center;
	}
}