Oups ! Cette page semble s'être perdue dans le cyberespace

Pas de panique ! Même les meilleures technologies ont parfois besoin d'un petit coup de pouce pour retrouver leur chemin. ```

{% extends 'base.html.twig' %}

{% block title %}{{ page.title }} - {{ site.title }}{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-primary-50 via-white to-accent-50 flex items-center justify-center px-4 py-16">
    <div class="max-w-4xl mx-auto text-center">

        &lt;!-- Illustration 404 -->
        <div class="mb-12 relative">
            <div class="error-illustration">
                &lt;!-- Numéro 404 stylisé -->
                <div class="text-404">
                    <span class="digit-4 first">4</span>
                    <span class="digit-0">
                        <div class="planet">
                            <div class="orbit">
                                <div class="satellite"></div>
                            </div>
                        </div>
                    </span>
                    <span class="digit-4 last">4</span>
                </div>

                &lt;!-- Éléments flottants -->
                <div class="floating-elements">
                    <div class="float-element code-bracket">&lt;/&gt;</div>
                    <div class="float-element wifi-icon">📶</div>
                    <div class="float-element rocket">🚀</div>
                    <div class="float-element gear">⚙️</div>
                </div>
            </div>
        </div>

        &lt;!-- Message principal -->
        <div class="mb-8 fade-in-content">
            <h1 class="text-4xl md:text-5xl font-bold text-primary-900 mb-4">
                {{ page.title }}
            </h1>
            <p class="text-xl text-primary-600 mb-6 max-w-2xl mx-auto leading-relaxed">
                {{ page.content|raw }}
            </p>
        </div>

        &lt;!-- Barre de recherche -->
        <div class="mb-12 max-w-md mx-auto">
            <div class="relative">
                <input 
                    type="text" 
                    id="search-404"
                    placeholder="Rechercher sur le site..."
                    class="w-full px-6 py-4 text-lg border-2 border-primary-200 rounded-full focus:border-accent-500 focus:outline-none transition-colors duration-300 bg-white shadow-lg"
                >
                <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-accent-500 text-white p-3 rounded-full hover:bg-accent-600 transition-colors duration-300">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </button>
            </div>
        </div>

        &lt;!-- Navigation rapide -->
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
            <a href="{{ base_url }}" class="nav-card group">
                <div class="nav-icon">🏠</div>
                <h3 class="font-semibold text-primary-900 mb-2">Accueil</h3>
                <p class="text-sm text-primary-600">Retour à la page d'accueil</p>
            </a>

            <a href="{{ base_url }}/services" class="nav-card group">
                <div class="nav-icon">💼</div>
                <h3 class="font-semibold text-primary-900 mb-2">Services</h3>
                <p class="text-sm text-primary-600">Découvrez nos solutions</p>
            </a>

            <a href="{{ base_url }}/portfolio" class="nav-card group">
                <div class="nav-icon">🎨</div>
                <h3 class="font-semibold text-primary-900 mb-2">Portfolio</h3>
                <p class="text-sm text-primary-600">Nos réalisations</p>
            </a>

            <a href="{{ base_url }}/contact" class="nav-card group">
                <div class="nav-icon">📞</div>
                <h3 class="font-semibold text-primary-900 mb-2">Contact</h3>
                <p class="text-sm text-primary-600">Parlons de votre projet</p>
            </a>
        </div>

        &lt;!-- Pages populaires -->
        <div class="mb-12">
            <h2 class="text-2xl font-bold text-primary-900 mb-6">Pages populaires</h2>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="{{ base_url }}/services/sites-vitrines" class="popular-link">
                    Sites Vitrines
                </a>
                <a href="{{ base_url }}/services/ecommerce" class="popular-link">
                    E-commerce
                </a>
                <a href="{{ base_url }}/services/seo" class="popular-link">
                    Référencement SEO
                </a>
                <a href="{{ base_url }}/blog" class="popular-link">
                    Blog
                </a>
            </div>
        </div>

        &lt;!-- CTA de contact -->
        <div class="bg-white rounded-2xl shadow-xl p-8 border border-primary-100">
            <h3 class="text-2xl font-bold text-primary-900 mb-4">
                Besoin d'aide ?
            </h3>
            <p class="text-primary-600 mb-6">
                Notre équipe est là pour vous accompagner dans votre projet digital
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="{{ base_url }}/contact" class="btn-primary">
                    Nous contacter
                </a>
                <a href="tel:+33123456789" class="btn-secondary">
                    📞 Appeler maintenant
                </a>
            </div>
        </div>

        &lt;!-- Message technique -->
        <div class="mt-12 text-sm text-primary-500">
            <p>Code d'erreur : 404 | Page non trouvée</p>
            <p class="mt-1">Si le problème persiste, n'hésitez pas à nous contacter</p>
        </div>
    </div>
</div>

&lt;!-- Scripts pour la recherche et animations -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Animation des éléments flottants
    const floatingElements = document.querySelectorAll('.float-element');
    floatingElements.forEach((element, index) => {
        element.style.animationDelay = `${index * 0.5}s`;
    });

    // Recherche simple
    const searchInput = document.getElementById('search-404');
    if (searchInput) {
        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                const query = this.value.trim();
                if (query) {
                    // Redirection vers une page de recherche ou Google site search
                    window.location.href = `{{ base_url }}/search?q=${encodeURIComponent(query)}`;
                }
            }
        });
    }

    // Animation d'apparition progressive
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate-fade-in');
            }
        });
    });

    document.querySelectorAll('.nav-card').forEach(card => {
        observer.observe(card);
    });
});
</script>
{% endblock %}