{#templates/bundles/TwigBundle/Exception/error403.html.twig #}
{% extends 'layouts/front_layout.html.twig' %}

{% block title %}Page non trouvée - Luxim Immobilier
{% endblock %}

{% block body %}
	<div class="flex min-h-[70vh] items-center justify-center bg-slate-50 " style="margin:30px 0">
		<div
			class="text-center px-4" data-aos="zoom-in">
			{# Un petit élément visuel pour le style #}
			<div class="mb-6 inline-flex h-24 w-24 items-center justify-center rounded-full bg-primary/10 text-primary">
				<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
					<circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/>
				</svg>
			</div>

			<h1 class="mb-4 font-heading text-6xl font-black text-slate-900 md:text-8xl">404</h1>

			<h2 class="mb-4 text-2xl font-bold text-slate-800">Oops ! Page introuvable</h2>

			<p class="mb-8 max-w-md mx-auto text-slate-500">
				Désolé, la page que vous recherchez semble avoir été déplacée ou n'existe plus dans notre catalogue immobilier.
			</p>

			<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
				<a href="{{ path('app_home') }}" class="inline-flex items-center gap-2 rounded-xl bg-primary px-8 py-4 font-heading font-bold text-white transition-all hover:bg-primary/90 hover:scale-105 active:scale-95">
					<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
					Retour à l'accueil
				</a>

				<a href="{{ path('app_contact') }}" class="font-semibold text-slate-600 hover:text-primary transition-colors">
					Nous contacter
				</a>
			</div>
		</div>
	</div>
{% endblock %}