/* ==========================================================
   ERROR.CSS
   Scoped to .error-page (404, 403, 429) and .server-error (500)
   Dépend de : base.css → layout.css → dashboard.css
   ========================================================== */


/* ==========================================================
   SHARED — .error-page layout
   ========================================================== */

.error-page .hero-left {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.error-page .hero-eyebrow {
  justify-content: center;
}

.error-page .hero-description {
  max-width: 52ch;
  margin: 0 auto;
}

.error-page .hero-cta {
  justify-content: center;
  margin-top: 1.5rem;
}

.error-page .hero-proof-wrapper {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.error-page .hero-proof {
  justify-content: center;
}

.error-page .hero-cta-single {
  display: flex !important;
  justify-content: center;
  margin-top: 1.5rem;
}

.error-page .hero-cta-single .ui-btn {
  width: auto;
  min-width: 200px;
}


/* ==========================================================
   WARNING (429)
   ========================================================== */

.error-page .hero--warning .hero-title               { color: var(--warning); }
.error-page .hero--warning .hero-pill                 { color: var(--warning); background: color-mix(in srgb, var(--warning) 15%, transparent); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.error-page .hero--warning .hero-pill.subtle          { color: var(--warning); }
.error-page .hero--warning .hero-pill-dot             { background: var(--warning); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning) 25%, transparent); }
.error-page .hero--warning .hero-proof                { border-color: color-mix(in srgb, var(--warning) 20%, transparent); }
.error-page .hero--warning .hero-proof-dot            { background: var(--warning); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning) 20%, transparent); }


/* ==========================================================
   DANGER (500)
   ========================================================== */

.error-page .hero--danger .hero-title                 { color: var(--danger); }
.error-page .hero--danger .hero-pill                  { color: var(--danger); background: color-mix(in srgb, var(--danger) 15%, transparent); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.error-page .hero--danger .hero-pill.subtle           { color: var(--danger); }
.error-page .hero--danger .hero-pill-dot              { background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 25%, transparent); }
.error-page .hero--danger .hero-proof                 { border-color: color-mix(in srgb, var(--danger) 20%, transparent); }
.error-page .hero--danger .hero-proof-dot             { background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 20%, transparent); }


/* ==========================================================
   500 PAGE — GRAIN BACKGROUND
   ========================================================== */

.se-grain-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: se-grain-fade-in 1.2s var(--ease-out) forwards;
}

@keyframes se-grain-fade-in {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .se-grain-canvas { display: none; }
}


/* ==========================================================
   500 PAGE — LAYER STACKING
   Toutes les sections passent au-dessus du grain SVG
   ========================================================== */

.server-error .se-layer {
  position: relative;
  z-index: 1;
}


/* ==========================================================
   500 PAGE — PILL & BADGE DANGER
   Évite les inline styles répétés sur db-pill et db-live-badge
   ========================================================== */

.server-error .se-pill-danger {
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 28%, transparent);
  color: var(--danger);
}

.server-error .se-live-badge-danger {
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 28%, transparent);
  color: var(--danger);
}

.server-error .se-section-danger {
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 22%, transparent);
}


/* ==========================================================
   500 PAGE — TRIPLE RING PULSE
   ========================================================== */

.server-error .se-ring-wrap {
  position: relative;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.server-error .se-ring-dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--danger);
}

.server-error .se-ring-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--danger);
  opacity: 0;
  animation: se-ring 2s ease-out infinite;
}

.server-error .se-ring-pulse:nth-child(2) { animation-delay: 0s; }
.server-error .se-ring-pulse:nth-child(3) { animation-delay: .55s; }
.server-error .se-ring-pulse:nth-child(4) { animation-delay: 1.1s; }

@keyframes se-ring {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(4.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .server-error .se-ring-pulse { animation: none; }
}


/* ==========================================================
   500 PAGE — ERROR ID BLOCK
   ========================================================== */

.server-error .se-error-id-strip {
  border-color: color-mix(in srgb, var(--danger) 18%, transparent);
}

.server-error .se-error-row {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: .35rem;
}

.server-error .se-error-pre {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: .78rem;
  line-height: 1.7;
  color: var(--text);
  letter-spacing: .02em;
  white-space: pre;
  overflow-x: auto;
  user-select: all;
  background: transparent;
  border: none;
  padding: 0;
}

.server-error .se-copy-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  flex-shrink: 0;
  align-self: flex-start;
}

.server-error .se-copied-hint {
  font-size: .72rem;
  font-weight: 700;
  color: var(--accent);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
  white-space: nowrap;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 560px) {
  .error-page .hero-cta         { grid-template-columns: 1fr; }
  .error-page .hero-cta-single .ui-btn { width: 100%; }
  .server-error .se-error-row                 { flex-direction: column; gap: .5rem; }
  .server-error .se-error-pre                 { font-size: .72rem; }
  .server-error .se-copy-wrap                 { flex-direction: row; align-self: flex-end; gap: .5rem; }
}