/**
 * Page 404 — reprise de celle de la démo Captured : un immense « 404 » en filigrane
 * (562 px, noir à 3 %), le titre en 92 px, deux lignes d'explication et le retour à
 * l'accueil. Fond clair, lignes de grille et coins du template.
 */

.aml-404 {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	padding: clamp(150px, 15vw, 220px) clamp(16px, 2.5vw, 36px) clamp(80px, 9vw, 130px);
	/* Fond sombre : la barre de l'en-tête est blanche et en surimpression */
	background: var(--aml-ink);
	color: var(--aml-white);
	overflow: hidden;
	text-align: center;
}

/* Le grand nombre en filigrane, derrière le texte */
.aml-404__filigrane {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	margin: 0;
	transform: translate(-50%, -58%);
	font-size: clamp(200px, 39vw, 562px);
	font-weight: 600;
	letter-spacing: -0.06em;
	line-height: 1;
	color: rgba(255, 255, 255, 0.05);
	pointer-events: none;
	user-select: none;
}

.aml-404__lines {
	position: absolute;
	top: 0;
	bottom: 0;
	left: clamp(16px, 2.5vw, 36px);
	right: clamp(16px, 2.5vw, 36px);
	z-index: 0;
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
	background-size: 25% 100%;
	background-position: -1px 0;
	pointer-events: none;
}

.aml-404 .aml-corner { border-color: rgba(255, 255, 255, 0.9); }

.aml-404__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1920px;
}

.aml-404__h1 {
	margin: 0;
	font-size: clamp(40px, 6.4vw, 92px);
	font-weight: 500;
	letter-spacing: -0.07em;
	line-height: 0.96;
}

.aml-404__sous {
	margin: clamp(20px, 2.4vw, 34px) 0 0;
	font-size: clamp(24px, 2.6vw, 36px);
	font-weight: 500;
	letter-spacing: -0.05em;
}

.aml-404__texte {
	margin: 10px 0 0;
	font-size: clamp(17px, 1.45vw, 20px);
	font-weight: 500;
	letter-spacing: -0.04em;
	color: rgba(255, 255, 255, 0.6);
}

.aml-404__liens {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 48px;
	margin-top: clamp(36px, 4.5vw, 64px);
}

.aml-404__liens .aml-about__more { font-size: clamp(18px, 1.6vw, 22px); }

@media (max-width: 809px) {
	.aml-404__lines { background-size: 50% 100%; }
}

/* Le grain de film des autres bandeaux sombres */
.aml-404__grain {
	position: absolute;
	inset: -150%;
	z-index: 0;
	width: 400%;
	height: 400%;
	background-image: url('../img/grain.png');
	opacity: 0.06;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.aml-404__grain { animation: aml-grain 0.8s steps(1, end) infinite; }
}