<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {# SEO & Accessibilité #}
    <title>404 - Notre structure s'est dégonflée ! - Ludikevent</title>
    <meta name="description" content="Oups ! La page que vous cherchez semble avoir disparu. Pas de panique, on rallume la soufflerie pour vous ramener à l'accueil.">
    <meta name="robots" content="noindex, nofollow">

    {{ vite_asset('reserve.js') }}
    {% if app.environment != 'dev' %}
        {{ pwa(swAttributes={ 'nonce': csp_nonce('script') }) }}
    {% endif %}
</head>
<body class="bg-slate-50 min-h-screen flex items-center justify-center p-6 font-sans">

{# Repère principal (Main Landmark) #}
<main class="max-w-3xl w-full text-center" role="main">

    <header>
        {# Badge à haut contraste (amber-950 sur amber-100) #}
        <div class="inline-block bg-amber-100 text-amber-950 px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest mb-8">
            Erreur 404 💨
        </div>

        {# Titre impactant #}
        <h1 class="text-6xl md:text-8xl font-black text-slate-900 uppercase italic tracking-tighter leading-[0.85] mb-8">
            NOTRE STRUCTURE <br><span class="text-blue-600">S'EST DÉGONFLÉE !</span>
        </h1>
    </header>

    {# Section message sémantique #}
    <section class="bg-white p-8 md:p-12 rounded-[3rem] shadow-xl border border-slate-100 relative overflow-hidden" aria-label="Message d'erreur">
        <p class="text-xl text-slate-600 font-medium italic leading-relaxed relative z-10">
            La page que vous cherchez n'existe pas ou a été déplacée.
            <br><strong>Pas de panique, on rallume la soufflerie !</strong>
        </p>

        {# Décoration sans impact sur les lecteurs d'écran #}
        <div class="absolute -right-10 -bottom-10 w-40 h-40 bg-blue-50 rounded-full blur-3xl opacity-50" aria-hidden="true"></div>
    </section>

    {# Actions de navigation #}
    <nav class="mt-12 flex flex-col items-center gap-8" aria-label="Liens de secours">
        <a href="{{ path('reservation') }}" class="inline-flex items-center px-10 py-5 bg-blue-600 text-white rounded-2xl font-black uppercase italic tracking-tighter shadow-xl shadow-blue-200 hover:bg-blue-700 hover:-translate-y-1 transition-all">
            Retour à l'accueil
        </a>

        <div class="flex flex-col md:flex-row items-center justify-center gap-6">
            <div class="flex flex-col">
                <span class="text-[10px] font-black text-slate-700 uppercase tracking-widest mb-1">Un doute ?</span>
                <a href="{{ path('reservation_catalogue') }}" class="text-xl font-black text-slate-900 italic hover:text-blue-600 transition-colors">
                    Voir le catalogue
                </a>
            </div>

            <div class="hidden md:block w-[1px] h-8 bg-slate-200" aria-hidden="true"></div>

            <div class="flex flex-col">
                <span class="text-[10px] font-black text-slate-700 uppercase tracking-widest mb-1">Besoin d'aide</span>
                <a href="tel:0614172447" class="text-xl font-black text-slate-900 italic hover:text-blue-600 transition-colors">
                    06 14 17 24 47
                </a>
            </div>
        </div>
    </nav>

    {# Footer sémantique avec contraste corrigé (slate-600) #}
    <footer class="mt-16">
        <p class="text-[10px] font-black text-slate-600 uppercase tracking-[0.4em]">
            Ludikevent &copy; {{ "now"|date("Y") }} - Hauts-de-France
        </p>
    </footer>

</main>

</body>
</html>
