{% extends 'base.html' %}
{% load static %}

{% block title %}Page introuvable{% endblock %}

{% block content %}
<section class="bg-dotgrid py-20">
    <div class="max-w-2xl mx-auto px-4 text-center">
        <div class="text-6xl mb-6 text-dot">· · ·</div>
        <h1 class="font-serif text-4xl font-bold mb-4">Oups, page introuvable</h1>
        <p class="text-xl text-gray-medium mb-8">
            Cette page n'existe pas ou a été déplacée. Pas de panique, ça arrive même aux plus organisés !
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="/" class="bg-accent text-white px-6 py-3 rounded font-medium hover:bg-ink transition-colors">
                Retour à l'accueil
            </a>
            <a href="/blog/" class="border border-ink px-6 py-3 rounded font-medium hover:bg-ink hover:text-white transition-colors">
                Voir le blog
            </a>
        </div>
    </div>
</section>
{% endblock %}