/* La page d’erreur : « 404 » en chiffres mono dans un viseur aux coins rouges, posé sur une
   trame de points et la grille du hero, puis la phrase, l’invitation à la démo et trois pages
   pour repartir. Le viseur se referme sur les chiffres à l’arrivée, sauf en mouvement réduit. */
.not-found {
  --not-found-code-size: clamp(88px, 2.5rem + 12vw, 216px);
  --not-found-corner: clamp(14px, 1.5vw, 22px);
  --not-found-padding-top: clamp(40px, 5.5vw, 88px);
  /* Le centre des chiffres, depuis le haut de la section : la trame s’y concentre. */
  --not-found-code-center: calc(
    var(--not-found-padding-top) + var(--not-found-code-size) / 2 + 18px
  );
  position: relative;
  isolation: isolate;
  padding: var(--not-found-padding-top) var(--page-gutter)
    clamp(72px, 8vw, 128px);
  overflow: clip;
}

/* Décor : la trame de points, dense derrière les chiffres ; la grille, aux bords seulement. */
.not-found-backdrop {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}
.not-found-backdrop::before,
.not-found-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
}
.not-found-backdrop::before {
  background: radial-gradient(
      circle,
      var(--color-graphite) 0.9px,
      transparent 1.3px
    )
    50% 0 / 9px 9px;
  opacity: 0.2;
  mask-image: radial-gradient(
    ellipse 540px 340px at 50% var(--not-found-code-center),
    #000 20%,
    transparent 100%
  );
}
.not-found-backdrop::after {
  background:
    linear-gradient(to right, currentColor 0.7px, transparent 0.7px) 50% 0 /
      145px 146px,
    linear-gradient(currentColor 0.7px, transparent 0.7px) 50% 0 / 145px 146px;
  color: var(--color-muted);
  opacity: 0.16;
  mask-image:
    linear-gradient(to right, #000, transparent 30%, transparent 70%, #000),
    linear-gradient(#000 55%, transparent);
  mask-composite: intersect;
}

.not-found-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1080px;
  margin-inline: auto;
  text-align: center;
}

/* Le viseur : quatre coins rouges autour des chiffres. */
.not-found-code {
  position: relative;
  padding: clamp(8px, 1.2vw, 18px) clamp(20px, 3vw, 46px);
  color: var(--color-graphite);
  font: 400 var(--not-found-code-size) / 1 var(--font-mono);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
/* L’approche finale du dernier chiffre ne décentre pas le bloc. */
.not-found-digits {
  display: block;
  margin-inline-end: -0.04em;
}
.not-found-corner {
  position: absolute;
  width: var(--not-found-corner);
  aspect-ratio: 1;
  border: 0 solid var(--color-accent);
}
.not-found-corner--top-start {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
}
.not-found-corner--top-end {
  top: 0;
  right: 0;
  border-width: 2px 2px 0 0;
}
.not-found-corner--bottom-start {
  bottom: 0;
  left: 0;
  border-width: 0 0 2px 2px;
}
.not-found-corner--bottom-end {
  right: 0;
  bottom: 0;
  border-width: 0 2px 2px 0;
}

.not-found h1 {
  max-width: 15em;
  margin-top: clamp(26px, 3vw, 44px);
  font-size: clamp(30px, 1rem + 2.8vw, 60px);
  font-weight: 680;
  line-height: 1.06;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.not-found-period {
  color: var(--color-accent);
}
.not-found-lead {
  max-width: 31em;
  margin-top: clamp(14px, 1.6vw, 22px);
  color: color-mix(in srgb, var(--color-graphite) 74%, transparent);
  font-size: clamp(17px, 0.85rem + 0.4vw, 20px);
  line-height: 1.45;
  letter-spacing: -0.3px;
  text-wrap: balance;
}
.not-found-demo {
  min-height: 56px;
  margin-top: clamp(24px, 2.6vw, 34px);
  padding: 13px 26px;
  box-shadow:
    0 12px 28px var(--color-accent-shadow),
    inset 0 1px 3px rgb(100% 100% 100% / 18%);
}

/* Trois pages pour repartir : un index numéroté, chaque page avec sa ligne du registre. */
.not-found-nav {
  width: min(100%, 960px);
  margin-top: clamp(48px, 6vw, 84px);
  text-align: left;
}
.not-found-nav ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--color-line);
}
.not-found-nav li + li {
  border-inline-start: 1px solid var(--color-line);
}
/* TextLink (global.css) en grille : numéro, nom et flèche, puis la ligne sous le nom. Le
   soulignement de survol ne touche que le nom. */
.not-found-nav .not-found-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-content: start;
  align-items: center;
  column-gap: 14px;
  row-gap: 8px;
  height: 100%;
  padding: 22px clamp(18px, 2vw, 26px) 26px;
  text-decoration: none;
  transition:
    color var(--motion-hover) var(--motion-ease-transition),
    background-color var(--motion-hover) var(--motion-ease-transition);
}
.not-found-link-number {
  grid-area: 1 / 1;
  color: var(--color-accent);
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.1em;
}
.not-found-link-name {
  grid-area: 1 / 2;
  font-size: 20px;
  font-weight: 560;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-decoration: underline 1px transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color var(--motion-hover)
    var(--motion-ease-transition);
}
.not-found-link .link-arrow {
  grid-area: 1 / 3;
  color: var(--color-accent);
}
.not-found-link-line {
  grid-area: 2 / 2 / 3 / 4;
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
@media (hover: hover) {
  .not-found-nav .not-found-link:hover {
    background: var(--color-surface);
  }
  .not-found-link:hover .not-found-link-name {
    text-decoration-color: currentColor;
  }
}
.not-found-link:focus-visible {
  outline-offset: -3px;
}

@media (width < 768px) {
  .not-found-nav ol {
    grid-template-columns: 1fr;
  }
  .not-found-nav li + li {
    border-inline-start: 0;
    border-block-start: 1px solid var(--color-line);
  }
  .not-found-nav .not-found-link {
    padding: 18px 4px 20px;
  }
}
@media (width < 640px) {
  .not-found-demo {
    align-self: stretch;
    min-height: 52px;
  }
  .not-found-link-name {
    font-size: 18px;
  }
}

/* Le viseur se referme sur les chiffres : chaque coin part d’un pas de mouvement plus loin
   (src/lib/motion/tokens.ts). */
@media (prefers-reduced-motion: no-preference) {
  .not-found-corner {
    --lock-step: var(--motion-distance-desktop);
    animation: not-found-lock var(--motion-group) var(--motion-ease-out) both;
  }
  .not-found-corner--top-start {
    --lock: calc(-1 * var(--lock-step)) calc(-1 * var(--lock-step));
  }
  .not-found-corner--top-end {
    --lock: var(--lock-step) calc(-1 * var(--lock-step));
  }
  .not-found-corner--bottom-start {
    --lock: calc(-1 * var(--lock-step)) var(--lock-step);
  }
  .not-found-corner--bottom-end {
    --lock: var(--lock-step) var(--lock-step);
  }
}
@keyframes not-found-lock {
  from {
    opacity: 0;
    translate: var(--lock);
  }
}