.erreur-hors-session{
  margin: 0;
  background: var(--gray-canvas);
  color: var(--text-primary);
  font: 500 var(--type-body-size)/var(--type-body-leading) var(--font-sans);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}
[data-theme="dark"] .erreur-hors-session,
html.dark .erreur-hors-session{ background: var(--surface); }


.erreur-page{ min-height: 100vh; display: flex; flex-direction: column; }


.erreur-scene{
  position: relative;
  box-sizing: border-box;
  overflow: clip;
  flex: 1;
  min-height: min(100vh, 42rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-8) var(--space-8) var(--space-12);
}
.erreur-ghost{
  position: absolute; right: -4%; top: -18%;
  font: 900 clamp(14rem, 52vw, 34rem)/.82 var(--font-sans);
  letter-spacing: -.03em; white-space: nowrap;
  pointer-events: none; user-select: none;
}
.erreur-kicker{
  position: relative; margin: 0;
  font: 400 var(--type-ref-size)/var(--type-ref-leading) var(--font-mono);
  letter-spacing: var(--type-ref-tracking); text-transform: uppercase;
}
.erreur-code{
  position: relative;
  font: 900 clamp(7rem, 26vw, 16rem)/.8 var(--font-sans);
  letter-spacing: -.03em;
  margin: var(--space-4) 0 var(--space-6) calc(var(--space-8) * -1 - var(--space-2));
}
.erreur-quoi{
  position: relative; margin: 0; max-width: 26ch;
  font: 800 var(--type-h2-size)/var(--type-h2-leading) var(--font-sans);
  letter-spacing: var(--type-h2-tracking);
}
.erreur-geste{
  position: relative; margin: var(--space-6) 0 0;
  font: 400 var(--type-cotation-size)/var(--type-cotation-leading) var(--font-mono);
  letter-spacing: var(--type-cotation-tracking); text-transform: uppercase;
}
.erreur-geste a{ color: inherit; text-underline-offset: 3px; }


.erreur-scene--404{ background: var(--tension); color: var(--white); }
.erreur-scene--404 .erreur-ghost{ color: color-mix(in srgb, var(--white) 13%, transparent); }
.erreur-scene--404 .erreur-kicker,
.erreur-scene--404 .erreur-geste{ color: var(--on-tension); }
.erreur-scene--404 .erreur-geste a,
.erreur-scene--404 .erreur-geste b{ color: var(--on-tension); font-weight: 400; }


.erreur-scene--403{ background: var(--accent); color: var(--white); }
.erreur-scene--403 .erreur-ghost{ color: color-mix(in srgb, var(--white) 13%, transparent); }
.erreur-scene--403 .erreur-kicker,
.erreur-scene--403 .erreur-geste{ color: var(--on-accent); }
.erreur-scene--403 .erreur-geste a,
.erreur-scene--403 .erreur-geste b{ color: var(--on-accent); font-weight: 400; }


.erreur-scene--500{ background: var(--gray-925); color: var(--white); }
.erreur-scene--500 .erreur-ghost{ color: color-mix(in srgb, var(--white) 7%, transparent); }
.erreur-scene--500 .erreur-kicker{ color: var(--status-critical-dark); }
.erreur-scene--500 .erreur-geste{ color: color-mix(in srgb, var(--white) 55%, transparent); }
.erreur-scene--500 .erreur-geste a,
.erreur-scene--500 .erreur-geste b{ color: var(--white); font-weight: 400; }


.erreur-scene--maintenance{ background: var(--gray-canvas); color: var(--text-primary); }
[data-theme="dark"] .erreur-scene--maintenance,
html.dark .erreur-scene--maintenance{ background: var(--surface); }
.erreur-scene--maintenance .erreur-ghost{ color: color-mix(in srgb, var(--text-primary) 6%, transparent); }
.erreur-scene--maintenance .erreur-kicker,
.erreur-scene--maintenance .erreur-geste{ color: var(--text-secondary); }
.erreur-scene--maintenance .erreur-code{ color: var(--accent); }
.erreur-scene--maintenance .erreur-geste a,
.erreur-scene--maintenance .erreur-geste b{ color: var(--text-primary); font-weight: 400; }


.erreur-scene--hors-ligne{ background: var(--gray-canvas); color: var(--text-primary); }
[data-theme="dark"] .erreur-scene--hors-ligne,
html.dark .erreur-scene--hors-ligne{ background: var(--surface); }
.erreur-scene--hors-ligne .erreur-ghost{ color: color-mix(in srgb, var(--text-primary) 6%, transparent); }
.erreur-scene--hors-ligne .erreur-kicker,
.erreur-scene--hors-ligne .erreur-geste{ color: var(--text-secondary); }
.erreur-scene--hors-ligne .erreur-code{ color: var(--text-primary); }
.erreur-scene--hors-ligne .erreur-geste a,
.erreur-scene--hors-ligne .erreur-geste b{ color: var(--text-primary); font-weight: 400; }


.erreur-pied{
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  font: 400 var(--type-ref-size)/1 var(--font-mono);
  letter-spacing: var(--type-ref-tracking); text-transform: uppercase;
  color: var(--text-secondary);
}
.erreur-sig{
  font: 800 var(--type-body-size)/1 var(--font-sans);
  letter-spacing: -.02em; text-transform: none;
  color: var(--text-primary); text-decoration: none;
}
.erreur-sig i{
  display: inline-block; width: .42em; height: .42em;
  background: var(--accent); margin-left: .08em; vertical-align: .02em;
}


@media (max-width: 640px){
  .erreur-scene{ padding: var(--space-6) var(--space-4) var(--space-8); }
  .erreur-code{ margin-left: calc(var(--space-4) * -1 - var(--space-1)); }
}