{# Layout partagé des pages d'erreur (404/403/500 + fallback générique).
   Étend base (header + nav, sûr en anonyme). Styles inline -> pas de recompile
   assets. Les pages filles ne remplissent que la copy (eyebrow/titre/texte).
   Bouton retour façon app mobile (controller back-button : history.back si
   navigation in-app, sinon repli accueil). #}
{% extends 'base.html.twig' %}

{% block title %}{% block error_doc_title %}Erreur{% endblock %} · LivreComment{% endblock %}

{% block body_class %}page-error{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .error-page {
            max-width: 30rem;
            margin: 0 auto;
            padding: var(--space-7) var(--space-4) var(--space-6);
            text-align: center;
        }
        .error-page__eyebrow {
            font-family: var(--font-mono);
            font-size: 0.78rem;
            letter-spacing: 0.04em;
            color: var(--muted);
            margin: 0 0 var(--space-2);
        }
        .error-page__title {
            font-size: 1.6rem;
            font-weight: 600;
            letter-spacing: -0.02em;
            color: var(--ink);
            margin: 0 0 var(--space-2);
        }
        .error-page__text {
            font-size: 0.95rem;
            line-height: 1.5;
            color: var(--muted);
            margin: 0 auto var(--space-5);
            max-width: 24rem;
        }
        .error-page__actions {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-3);
        }
        .error-page__back {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-height: 48px;
            padding: 0 22px;
            border-radius: 999px;
            background: var(--violet);
            color: #fff;
            font-weight: 500;
            text-decoration: none;
        }
        .error-page__back:active { opacity: 0.9; }
        .error-page__back svg { flex-shrink: 0; }
        .error-page__home {
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            color: var(--muted);
            text-decoration: none;
            font-size: 0.9rem;
        }
        .error-page__home:hover { color: var(--ink); }
    </style>
{% endblock %}

{% block body %}
    <section class="error-page">
        <p class="error-page__eyebrow">{% block error_eyebrow %}Erreur{% if status_code is defined %} {{ status_code }}{% endif %}{% endblock %}</p>
        <h1 class="error-page__title">{% block error_heading %}Une erreur est survenue{% endblock %}</h1>
        <p class="error-page__text">{% block error_text %}Quelque chose n'a pas fonctionné de notre côté. Reviens en arrière, ou repars de l'accueil.{% endblock %}</p>

        <div class="error-page__actions">
            <a href="{{ path('app_home') }}"
               class="error-page__back"
               data-controller="back-button"
               data-action="back-button#trigger">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18" aria-hidden="true">
                    <polyline points="15 18 9 12 15 6"/>
                </svg>
                Retour
            </a>
            <a href="{{ path('app_home') }}" class="error-page__home">Aller à l'accueil</a>
        </div>
    </section>
{% endblock %}