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

{% block title %}Accès Refusé - Luxim Immobilier
{% endblock %}

{% block body %}
	<div class="flex min-h-[70vh] items-center justify-center bg-slate-50 p-4">
		<div
			class="text-center px-4" data-aos="zoom-in">
			{# Icône de sécurité / Cadenas #}
			<div class="mb-6 inline-flex h-24 w-24 items-center justify-center rounded-full bg-red-50 text-red-500 shadow-sm border border-red-100">
				<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">
					<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
					<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
				</svg>
			</div>

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

			<h2 class="mb-2 text-2xl font-bold text-slate-800 text-uppercase">Accès restreint</h2>

			<p class="mb-8 max-w-md mx-auto text-slate-500">
				Désolé, vous n'avez pas les autorisations nécessaires pour accéder à cette section de la plateforme
				<strong>Luxim</strong>. 
										                Veuillez contacter votre administrateur si vous pensez qu'il s'agit d'une erreur.
			</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-slate-900 px-8 py-4 font-heading font-bold text-white transition-all hover:bg-slate-800 hover:scale-105 active:scale-95 shadow-lg shadow-slate-200">
					<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"></path>
						<polyline points="9 22 9 12 15 12 15 22"></polyline>
					</svg>
					Retour à l'accueil
				</a>

				<button onclick="history.back()" class="font-semibold text-slate-600 hover:text-primary transition-colors flex items-center gap-2">
					<i class="fas fa-arrow-left fa-sm"></i>
					Page précédente
				</button>
			</div>
		</div>
	</div>
{% endblock %}