/* =============================================================================
   ttk-error.css — pages d'erreur publiques (400, 404, 500, générique)
   -----------------------------------------------------------------------------
   Pages à style unique (charte graphique) : tout le transverse vient de
   `ttk-foundation.css` (état vide, typo, boutons). Ce fichier ne porte QUE ce
   qui est propre à ces pages : la coque centrée pleine hauteur, la mascotte qui
   remplace la tuile d'icône de `.ttk-empty`, et la montée en échelle du titre /
   du texte (un état vide dans une carte est discret ; ici c'est le seul contenu
   de la page).
   Préfixe : `ttk-error-`.
   ============================================================================= */

/* =============================================================================
   1. COQUE DE PAGE
   ============================================================================= */

/* L'en-tête public est fixe : `main.ttk-site-main` porte un padding-top de 80px
   (= --ttk-site-header-height, chrome public ttk-site.css). Valeur miroir. */
.ttk-error-page {
    --ttk-error-header-offset: 80px;
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--ttk-error-header-offset));
    padding: var(--ttk-space-8) 0;
}

.ttk-error-shell {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

/* =============================================================================
   2. MASCOTTE
   ============================================================================= */

/* Remplace la tuile `.ttk-empty-icon` : même rôle (le repère visuel du bloc),
   même rythme vertical. */
.ttk-error-mascot {
    max-height: 200px;
    max-width: 100%;
    height: auto;
    margin-bottom: var(--ttk-space-5);
}

/* =============================================================================
   3. ÉCHELLE DU BLOC D'ÉTAT
   ============================================================================= */

/* Le sur-titre est collé au titre : `.ttk-label` est à `margin: 0` en fondation. */
.ttk-error-page .ttk-label {
    margin-bottom: var(--ttk-space-2);
}

.ttk-error-page .ttk-empty-title {
    font-size: var(--ttk-text-xl);
    font-weight: var(--ttk-weight-extrabold);
    letter-spacing: -0.02em;
    line-height: var(--ttk-leading-tight);
    color: var(--ttk-text);
    margin-bottom: var(--ttk-space-3);
}

.ttk-error-page .ttk-empty-text {
    font-size: var(--ttk-text-md);
    color: var(--ttk-text-secondary);
    max-width: 480px;
    margin-bottom: var(--ttk-space-6);
}

/* =============================================================================
   4. RÉFÉRENCE DE L'INCIDENT
   ============================================================================= */

/* Propre à `Error` (handler d'exception du framework) : la seule page d'erreur à
   disposer d'un identifiant de trace à communiquer au support. Posée sous
   l'action, d'où la marge haute — `.ttk-empty` n'a pas de `gap` et ses enfants
   portent leur propre marge. */
.ttk-error-ref {
    margin: var(--ttk-space-6) 0 0;
    font-size: var(--ttk-text-xs);
    color: var(--ttk-text-muted);
}

.ttk-error-ref code {
    font-family: var(--ttk-font-mono);
    color: var(--ttk-text-secondary);
    word-break: break-all;
}

/* =============================================================================
   5. RANGÉE D'ACTIONS
   ============================================================================= */

/* Les autres pages d'erreur n'ont qu'une action (l'action seule de `.ttk-empty`
   se suffit) ; la page générique en propose deux (retour + signalement), d'où
   cette rangée centrée. En écran étroit elle repasse en colonne pleine largeur.
   `.ttk-empty` centre ses enfants : c'est `align-self` qui rend la rangée
   large, pas une largeur posée sur les boutons. */
.ttk-error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ttk-space-3);
}

@media (max-width: 768px) {
    .ttk-error-mascot { max-height: 140px; }

    .ttk-error-actions {
        flex-direction: column;
        align-self: stretch;
    }
}