{#
    Page d'erreur serveur (5xx) — rendue par WebErrorHandler.

    Variables :
      - status : code HTTP (500, 502, 503, …)
      - family : toujours "server" pour ce template → errors.server.*
      - detail : présent uniquement si APP_DEBUG=true
                 (class, message, file, line)

    Autonome (voir errors/4xx.twig) : aucune dépendance aux globals posés
    par les middlewares web. Couleur d'accent distincte (rouge) pour
    signaler une panne côté serveur plutôt qu'une erreur de requête.
#}
<!doctype html>
<html lang="fr-FR">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex, follow">
    <title>{{ status }} — {{ trans('errors.page.server.heading') }}</title>
    <style>
        * { box-sizing: border-box; }
        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            color: #1f2937;
            background: #f9fafb;
            line-height: 1.5;
        }
        .error-box { max-width: 480px; padding: 32px 24px; text-align: center; }
        .error-status { font-size: 64px; font-weight: 700; color: #dc2626; margin: 0; }
        .error-heading { font-size: 22px; margin: 8px 0 12px; }
        .error-message { color: #6b7280; margin: 0 0 24px; }
        .error-home {
            display: inline-block;
            background: #dc2626;
            color: #fff;
            padding: 10px 20px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 600;
        }
        .error-detail {
            margin-top: 32px;
            text-align: left;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 16px;
            font-size: 13px;
            color: #374151;
            overflow-x: auto;
        }
        .error-detail pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
    </style>
</head>
<body>
    <main class="error-box">
        <p class="error-status">{{ status }}</p>
        <h1 class="error-heading">{{ trans('errors.page.server.heading') }}</h1>
        <p class="error-message">{{ trans('errors.page.server.message') }}</p>
        <a class="error-home" href="{{ app_url ?: '/' }}">{{ trans('errors.page.backHome') }}</a>

        {% if detail is defined %}
            <div class="error-detail">
                <pre>{{ detail.class }}: {{ detail.message }}
{{ detail.file }}:{{ detail.line }}</pre>
            </div>
        {% endif %}
    </main>
</body>
</html>
