/* Page 404 — plein écran, edge-to-edge (comme le hero) */

body.lf-404-body .site-content {
	width: 100%;
	max-width: none;
	padding: 0;
	display: block;
}

body.lf-404-body .site-main {
	width: 100%;
}

body.lf-404-body .widget-area {
	display: none;
}

.lf-404-page {
	width: 100%;
	margin: 0;
	padding: 0;
	background: var(--lf-navy-dark, #171b51);
}

.lf-404 {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	min-height: calc(100dvh - 5.5rem);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(2.5rem, 6vw, 4.5rem) 0;
	color: var(--lf-white, #fff);
	background:
		linear-gradient(
			155deg,
			var(--lf-navy, #262762) 0%,
			var(--lf-navy-dark, #171b51) 42%,
			color-mix(in srgb, var(--lf-orange, #9b4c34) 42%, var(--lf-navy-dark, #171b51)) 100%
		);
}

.lf-404__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.lf-404__grid {
	position: absolute;
	inset: 0;
	opacity: 0.07;
	background-image:
		linear-gradient(color-mix(in srgb, #fff 55%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, #fff 55%, transparent) 1px, transparent 1px);
	background-size: 4rem 4rem;
	mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
}

.lf-404__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(0.5px);
}

.lf-404__glow--a {
	width: min(55vw, 34rem);
	height: min(55vw, 34rem);
	top: -18%;
	right: -12%;
	background: radial-gradient(circle, rgba(11, 187, 239, 0.35) 0%, transparent 68%);
	animation: lf-404-float 10s ease-in-out infinite;
}

.lf-404__glow--b {
	width: min(48vw, 28rem);
	height: min(48vw, 28rem);
	bottom: -22%;
	left: -14%;
	background: radial-gradient(circle, rgba(155, 76, 52, 0.45) 0%, transparent 68%);
	animation: lf-404-float 12s ease-in-out infinite reverse;
}

.lf-404__glow--c {
	width: min(32vw, 18rem);
	height: min(32vw, 18rem);
	top: 55%;
	left: 55%;
	background: radial-gradient(circle, rgba(221, 167, 165, 0.28) 0%, transparent 70%);
	animation: lf-404-float 14s ease-in-out infinite;
}

.lf-404__content {
	position: relative;
	z-index: 1;
	width: min(100% - 2rem, 42rem);
	margin-inline: auto;
	text-align: center;
}

.lf-404__logo {
	display: block;
	width: min(42vw, 11rem);
	height: auto;
	margin: 0 auto 1.25rem;
	filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.28));
	animation: lf-404-in 0.65s ease both;
}

.lf-404__code {
	margin: 0 0 0.15rem;
	font-family: var(--lf-font-display, "Open Sauce One", system-ui, sans-serif);
	font-size: clamp(6rem, 22vw, 10.5rem);
	font-weight: 700;
	line-height: 0.85;
	letter-spacing: -0.07em;
	color: color-mix(in srgb, var(--lf-white, #fff) 14%, transparent);
	animation: lf-404-in 0.65s ease 0.05s both;
}

.lf-404__eyebrow {
	margin: -0.35rem 0 0.75rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lf-sand, #fbe4b9);
	animation: lf-404-in 0.65s ease 0.1s both;
}

.lf-404__title {
	margin: 0 0 0.9rem;
	font-family: var(--lf-font-display, "Open Sauce One", system-ui, sans-serif);
	font-size: clamp(1.75rem, 4.5vw, 2.65rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.03em;
	color: var(--lf-white, #fff);
	text-wrap: balance;
	animation: lf-404-in 0.65s ease 0.16s both;
}

.lf-404__lead {
	margin: 0 auto 1.85rem;
	max-width: 34rem;
	font-size: clamp(1rem, 2.2vw, 1.125rem);
	line-height: 1.55;
	color: color-mix(in srgb, var(--lf-white, #fff) 84%, transparent);
	text-wrap: pretty;
	animation: lf-404-in 0.65s ease 0.22s both;
}

.lf-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.85rem;
	margin-bottom: 2rem;
	animation: lf-404-in 0.65s ease 0.28s both;
}

.lf-404__btn-secondary {
	color: var(--lf-white, #fff) !important;
	border-color: color-mix(in srgb, var(--lf-white, #fff) 72%, transparent);
	background: transparent;
}

.lf-404__btn-secondary:hover,
.lf-404__btn-secondary:focus-visible {
	background: var(--lf-white, #fff);
	color: var(--lf-navy, #262762) !important;
	border-color: var(--lf-white, #fff);
}

.lf-404__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.65rem 0.85rem;
	font-size: 0.9375rem;
	animation: lf-404-in 0.65s ease 0.34s both;
}

.lf-404__links a {
	color: color-mix(in srgb, var(--lf-white, #fff) 78%, transparent);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--lf-white, #fff) 28%, transparent);
	padding-bottom: 0.1rem;
	transition: color 160ms ease, border-color 160ms ease;
}

.lf-404__links a:hover,
.lf-404__links a:focus-visible {
	color: var(--lf-white, #fff);
	border-bottom-color: var(--lf-sand, #fbe4b9);
}

.lf-404__sep {
	display: inline-block;
	width: 0.28rem;
	height: 0.28rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--lf-white, #fff) 35%, transparent);
}

@keyframes lf-404-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes lf-404-float {
	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}
	50% {
		transform: translate3d(0, -1.1rem, 0) scale(1.05);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lf-404__logo,
	.lf-404__code,
	.lf-404__eyebrow,
	.lf-404__title,
	.lf-404__lead,
	.lf-404__actions,
	.lf-404__links,
	.lf-404__glow {
		animation: none;
	}
}