.error-page {
  --accent: var(--bleu-light);
  --accent-strong: var(--bleu-dark);
  --bar: none;
  box-sizing: border-box;
  padding: clamp(32px, 6vw, 72px);
  background: var(--black-dark);
  color: var(--white-light);
  font-size: var(--text-l);
  line-height: 1.5;
}
.error-page *, .error-page *::before, .error-page *::after { box-sizing: border-box; }

/* 403 : accent rouge + vinyle barré */
.error-page--403 {
  --accent: var(--red-light);
  --accent-strong: var(--red-dark);
  --bar: linear-gradient(45deg, transparent 43%, var(--red-medium) 43% 57%, transparent 57%);
}

/* Le « 0 » est un vinyle dessiné en CSS (aucun élément vide dans le HTML) */
.error-page__code {
  display: flex; align-items: center; gap: .03em; margin: 0 0 .25em;
  font-size: clamp(96px, 20vw, 220px); font-weight: 800; line-height: .85;
  letter-spacing: -.04em;
}
.error-page__code span { display: inline-flex; align-items: center; gap: .03em; }
.error-page__code span:last-child::before {
  content: ""; flex: none; width: .7em; height: .7em; border-radius: 50%;
  background:
    var(--bar),
    radial-gradient(circle, var(--black-dark) 0 3%, transparent 3.5%),
    radial-gradient(circle, var(--accent) 0 17%, var(--black-dark) 17% 19%, transparent 19%),
    conic-gradient(from 20deg, rgba(255,255,255,.14), transparent 18% 50%, rgba(255,255,255,.14) 50% 68%, transparent 68%),
    repeating-radial-gradient(circle, var(--black-medium) 0 3px, var(--black-light) 3px 4px);
}
@keyframes error-page-spin { to { transform: rotate(360deg); } }
.error-page--404 .error-page__code span:last-child::before { animation: error-page-spin 6s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .error-page--404 .error-page__code span:last-child::before { animation: none; }
}

.error-page__lead { max-width: 52ch; margin: 0 0 32px; color: var(--white-dark); }
.error-page__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin: 0; }
.error-page a { color: inherit; }
.error-page a:focus-visible { outline: 3px solid var(--white-light); outline-offset: 4px; }
.error-page a.error-page__btn {
  display: inline-block; padding: 14px 28px; border-radius: 999px;
  background: var(--accent-strong); color: var(--white-light);
  font-weight: 800; text-decoration: none;
}
.error-page a.error-page__btn:hover { box-shadow: 0 0 0 4px var(--black-light); }
.error-page a.error-page__link { text-underline-offset: 5px; text-decoration-thickness: 2px; }
.error-page a.error-page__link:hover { color: var(--accent); }
.error-page {
  --accent: var(--bleu-light);
  --accent-strong: var(--bleu-dark);
  --bar: none;
  box-sizing: border-box;
  padding: clamp(32px, 6vw, 72px);
  background: var(--black-dark);
  color: var(--white-light);
  font-size: var(--text-l);
  line-height: 1.5;
}
.error-page *, .error-page *::before, .error-page *::after { box-sizing: border-box; }

/* 403 : accent rouge + vinyle barré */
.error-page--403 {
  --accent: var(--red-light);
  --accent-strong: var(--red-dark);
  --bar: linear-gradient(45deg, transparent 43%, var(--red-medium) 43% 57%, transparent 57%);
}

/* Le « 0 » est un vinyle dessiné en CSS (aucun élément vide dans le HTML) */
.error-page__code {
  display: flex; align-items: center; gap: .03em; margin: 0 0 .25em;
  font-size: clamp(96px, 20vw, 220px); font-weight: 800; line-height: .85;
  letter-spacing: -.04em;
}
.error-page__code span { display: inline-flex; align-items: center; gap: .03em; }
.error-page__code span:last-child::before {
  content: ""; flex: none; width: .7em; height: .7em; border-radius: 50%;
  background:
    var(--bar),
    radial-gradient(circle, var(--black-dark) 0 3%, transparent 3.5%),
    radial-gradient(circle, var(--accent) 0 17%, var(--black-dark) 17% 19%, transparent 19%),
    conic-gradient(from 20deg, rgba(255,255,255,.14), transparent 18% 50%, rgba(255,255,255,.14) 50% 68%, transparent 68%),
    repeating-radial-gradient(circle, var(--black-medium) 0 3px, var(--black-light) 3px 4px);
}
@keyframes error-page-spin { to { transform: rotate(360deg); } }
.error-page--404 .error-page__code span:last-child::before { animation: error-page-spin 6s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .error-page--404 .error-page__code span:last-child::before { animation: none; }
}

.error-page__lead { max-width: 52ch; margin: 0 0 32px; color: var(--white-dark); }
.error-page__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin: 0; }
.error-page a { color: inherit; }
.error-page a:focus-visible { outline: 3px solid var(--white-light); outline-offset: 4px; }
.error-page a.error-page__btn {
  display: inline-block; padding: 14px 28px; border-radius: 999px;
  background: var(--accent-strong); color: var(--white-light);
  font-weight: 800; text-decoration: none;
}
.error-page a.error-page__btn:hover { box-shadow: 0 0 0 4px var(--black-light); }
.error-page a.error-page__link { text-underline-offset: 5px; text-decoration-thickness: 2px; }
.error-page a.error-page__link:hover { color: var(--accent); }