/* =========================================================
   Pages d'erreur (403 / 404 / 500 / 503)
   Gabarit autonome, centré, qui doit se rendre même quand
   l'app est en défaut (le CSS est appliqué via <link>, pas
   via le JS). Voir POC : design-poc/pages-erreur.html.
   ========================================================= */

.error-page { min-height: 100%; }

/* Shell : neutralise le <main> global (padding navbar + flux colonne). */
.error-page main.err-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5.5rem 1.25rem 2rem !important;
    text-align: center;
    position: relative;
    overflow: hidden;
    /* accent sémantique, surchargé par [data-tone] ci-dessous */
    --accent: var(--gold);
    --accent-soft: var(--gold-soft);
}

/* Ton sémantique par type d'erreur (neutral / gold = doré par défaut) */
.error-page .err-shell[data-tone="warning"] { --accent: var(--warning); --accent-soft: var(--warning-soft); }
.error-page .err-shell[data-tone="danger"]  { --accent: var(--danger);  --accent-soft: var(--danger-soft); }

/* Halo d'ambiance très discret, teinté par l'accent */
.error-page .err-shell::before {
    content: "";
    position: absolute;
    top: -15%;
    left: 50%;
    transform: translateX(-50%);
    width: min(760px, 120%);
    height: 520px;
    pointer-events: none;
    background: radial-gradient(closest-side, var(--accent-soft), transparent 72%);
    opacity: .75;
}

/* Marque */
.error-page .err-brand {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; justify-content: center;
    padding: 1.4rem 1rem; z-index: 2;
}
.error-page .err-brand .mark {
    display: inline-flex; align-items: center; gap: .55rem;
    font-weight: 700; letter-spacing: .02em; color: var(--text);
}
.error-page .err-brand .mark .dot {
    width: 26px; height: 26px; flex: 0 0 auto;
    border-radius: 8px; display: grid; place-items: center;
    background: var(--gold-soft); border: 1px solid var(--border-strong); color: var(--gold-strong);
}
.error-page .err-brand .mark .dot svg { width: 15px; height: 15px; }

.error-page .err-card { position: relative; z-index: 2; width: 100%; max-width: 520px; }

/* Filigrane du code, en fond, très effacé */
.error-page .err-ghost {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -58%); z-index: -1;
    font-weight: 700; font-size: clamp(9rem, 32vw, 16rem); line-height: .8; letter-spacing: -.04em;
    color: var(--text); opacity: .035; user-select: none; pointer-events: none; white-space: nowrap;
}

/* Badge icône */
.error-page .err-badge {
    width: 76px; height: 76px; margin: 0 auto 1.35rem;
    border-radius: 50%; display: grid; place-items: center;
    background: var(--accent-soft); border: 1px solid var(--border-strong); color: var(--accent);
}
.error-page .err-badge svg { width: 34px; height: 34px; }

.error-page .err-eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
    color: var(--accent); margin: 0 0 .7rem;
}
.error-page .err-eyebrow .num { font-variant-numeric: tabular-nums; }

.error-page .err-card h1 { font-size: 1.75rem; font-weight: 600; line-height: 1.2; margin: 0 0 .7rem; color: var(--text); }
.error-page .err-msg { font-size: .95rem; color: var(--text-muted); max-width: 44ch; margin: 0 auto 1.2rem; }

/* Actions */
.error-page .err-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* Aide complémentaire (lien discret sous les actions) */
.error-page .err-help { margin: 1.4rem 0 0; font-size: .82rem; color: var(--text-faint); }
.error-page .err-help a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.error-page .err-help a:hover { color: var(--gold-strong); }

.error-page .err-foot {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
    text-align: center; margin: 0; padding: .9rem 1rem; font-size: .74rem; color: var(--text-faint);
}

@media (max-width: 480px) {
    .error-page .err-card h1 { font-size: 1.45rem; }
    .error-page .err-actions .ui-btn { flex: 1 1 100%; }
}