/* ==========================================================================
   ESE — Page 404 : « 4 0 4 » avec l’emblème en anneau, recherche, pistes.
   ========================================================================== */

.lost { position: relative; isolation: isolate; overflow: hidden; padding: 64px 0 88px; border-bottom: 1px solid var(--ese-bordure); }
.lost::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='2' cy='2' r='1.3' fill='%231F6FB2'/%3E%3C/svg%3E");
	opacity: .12;
}
.lost__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; align-items: center; }

/* « 4 0 4 » : le zéro est l’emblème */
.lost__art { display: flex; align-items: center; justify-content: center; gap: clamp(4px, 1vw, 12px); }
.lost__digit {
	font-size: clamp(120px, 15vw, 220px);
	font-weight: 700;
	line-height: .8;
	letter-spacing: -.06em;
	color: var(--ese-texte);
	animation: ese-digit-in 1s var(--ease-out) both;
}
.lost__digit:last-child { animation-delay: .18s; }
@keyframes ese-digit-in { from { opacity: 0; transform: translateY(30px); } }
.lost__zero { position: relative; width: clamp(150px, 17vw, 250px); aspect-ratio: 1; flex-shrink: 0; }
.lost__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: ese-spin 50s linear infinite; }
.lost__ring text { font-family: var(--ese-font); font-size: 10.5px; font-weight: 600; letter-spacing: .94px; fill: var(--ese-bleu-pro); }
.lost__disc {
	position: absolute;
	inset: 16%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--ese-bordure);
	box-shadow: 0 24px 60px rgba(38, 41, 46, .12);
}
.lost__emblem { position: static; z-index: auto; translate: none; width: 40%; }
.lost__emblem .emblem-bg__drop { opacity: 1; animation-name: ese-emblem-solid; }
.lost__emblem .emblem-bg__cut { fill: #fff; }
.lost__emblem .emblem-bg__cut-line { stroke: #fff; }
.lost__emblem .emblem-bg__stroke { opacity: 1; stroke-width: 9; }
@keyframes ese-spin { to { transform: rotate(360deg); } }
@keyframes ese-emblem-solid { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }

.lost__main .pro-hero__title { color: var(--ese-texte); font-size: clamp(32px, 4.2vw, 56px); line-height: 1.05; letter-spacing: -.025em; margin-top: 16px; }
.lost__lead { font-size: 17.5px; line-height: 1.65; color: var(--ese-texte-2); margin-top: 18px; max-width: 520px; }

.lost-search {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 28px;
	max-width: 560px;
	padding: 6px 6px 6px 18px;
	background: #fff;
	border: 1.5px solid var(--ese-bordure-2);
	border-radius: 40px;
	box-shadow: 0 12px 30px rgba(38, 41, 46, .06);
	transition: border-color var(--dur-sm), box-shadow var(--dur-sm);
}
.lost-search:focus-within { border-color: var(--ese-bleu-pro); box-shadow: 0 0 0 4px rgba(31, 111, 178, .12); }
.lost-search__icon { color: var(--ese-texte-3); display: flex; }
.lost-search input { flex: 1; min-width: 0; height: 44px; border: 0; background: none; font: inherit; font-size: 15.5px; color: var(--ese-texte); outline: none; }
.lost-search input::placeholder { color: var(--ese-texte-4); }
.lost-search .btn { border-radius: 30px; min-height: 44px; }
.lost__home { display: inline-block; margin-top: 18px; }

.lost-ways { padding-top: 80px; }
.lost-ways__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.lost-latest { padding-top: 80px; padding-bottom: 96px; }

@media (max-width: 1023px) {
	.lost__grid { grid-template-columns: 1fr; gap: 32px; }
	.lost__art { justify-content: flex-start; }
}
@media (max-width: 767px) {
	.lost { padding: 40px 0 56px; }
	.lost__digit { font-size: 96px; }
	.lost__zero { width: 118px; }
	.lost-ways__grid { grid-template-columns: 1fr; }
	.lost-ways, .lost-latest { padding-top: 56px; }
	.lost-search .btn { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.lost__ring, .lost__digit { animation: none; }
}

/* ==========================================================================
   404 sur photo (route qui file vers l’horizon) : grand en-tête sombre.
   ========================================================================== */
.lost--photo {
	display: grid;
	align-items: center;
	min-height: min(78svh, 760px);
	padding: 72px 0 120px;
	background: var(--ese-sombre-creatif);
	color: #fff;
	border-bottom: 0;
}
.lost--photo::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='2' cy='2' r='1.3' fill='%23fff'/%3E%3C/svg%3E");
	opacity: .07;
}
.lost--photo .zone-bg { opacity: .22; background-position: center 60%; }
.lost__waves { position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: -1; opacity: .55; pointer-events: none; }
.lost--photo .lost__digit { color: #fff; text-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.lost--photo .lost__ring text { fill: var(--ese-azur); }
.lost--photo .lost__disc { border-color: rgba(255, 255, 255, .2); box-shadow: 0 0 0 10px rgba(89, 183, 232, .12), 0 30px 70px rgba(0, 0, 0, .45); }
.lost--photo .eyebrow { color: var(--ese-azur); }
.lost--photo .lost__main .pro-hero__title { color: #fff; }
.lost--photo .lost__lead { color: var(--ese-gris-dark-text); }
.lost--photo .lost-search { border-color: transparent; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.lost--photo .lost-search:focus-within { box-shadow: 0 0 0 4px rgba(89, 183, 232, .35), 0 20px 50px rgba(0, 0, 0, .3); }
.lost--photo .lost__home { color: var(--ese-azur); }
.lost--photo .lost__home:hover { color: #fff; }

@media (max-width: 860px) {
	.lost--photo { min-height: 0; padding: 48px 0 96px; }
}