404 Houston

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="noindex" />
    <title>404 · Page introuvable</title>
    <style>
      body { margin: 0; background: #000; }
      .n4-houston {
        --accent: #9fc3ff;
        --k: 1;
        position: fixed;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        container-type: size;
        display: grid;
        place-items: center;
        background: #000;
        color: #f5f5f7;
        font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif;
        -webkit-font-smoothing: antialiased;
        text-align: center;
        line-height: 1.4;
      }
      
      .n4-houston *,.n4-houston *::before,.n4-houston *::after {
        box-sizing: border-box;
      }
      
      .n4-houston .n4-copy {
        position: relative;
        z-index: 5;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.6cqmin;
        width: 100%;
        max-width: 680px;
        padding: 0 6cqw;
      }
      
      .n4-houston .n4-title {
        margin: 0;
        font-size: clamp(17px,4.2cqmin,36px);
        font-weight: 600;
        letter-spacing: -.02em;
        line-height: 1.15;
        text-wrap: balance;
      }
      
      .n4-houston .n4-sub {
        margin: 0;
        max-width: 34em;
        font-size: clamp(13px,2.4cqmin,18px);
        color: #a1a1a6;
        text-wrap: balance;
      }
      
      .n4-houston .n4-tag {
        font: 600 clamp(10px,1.9cqmin,13px)/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--accent);
      }
      
      .n4-houston .n4-cta {
        margin-top: 1.8cqmin;
        display: inline-flex;
        align-items: center;
        gap: .5em;
        padding: .85em 1.5em;
        border-radius: 999px;
        background: #f5f5f7;
        color: #000;
        font-size: clamp(13px,2.2cqmin,16px);
        font-weight: 600;
        text-decoration: none;
        transition: transform .3s cubic-bezier(.25,.1,.25,1),box-shadow .3s cubic-bezier(.25,.1,.25,1);
      }
      
      .n4-houston .n4-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 32px -10px var(--accent);
      }
      
      .n4-houston .n4-cta:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }
      
      .n4-houston .n4-stars,.n4-houston .n4-stars2 {
        position: absolute;
        inset: -4%;
        pointer-events: none;
      }
      
      .n4-houston .n4-stars {
        background-image: radial-gradient(1px 1px at 8% 12%,#fff 60%,transparent),radial-gradient(1px 1px at 22% 68%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 35% 24%,#fff 60%,transparent),radial-gradient(1px 1px at 48% 82%,#fff 60%,transparent),radial-gradient(1px 1px at 57% 9%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 66% 44%,#fff 60%,transparent),radial-gradient(1px 1px at 74% 72%,#fff 60%,transparent),radial-gradient(1px 1px at 86% 18%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 93% 58%,#fff 60%,transparent),radial-gradient(1px 1px at 14% 42%,#fff 60%,transparent),radial-gradient(1px 1px at 40% 55%,#fff 60%,transparent),radial-gradient(1px 1px at 81% 90%,#fff 60%,transparent),radial-gradient(1px 1px at 4% 88%,#fff 60%,transparent),radial-gradient(1px 1px at 62% 30%,#fff 60%,transparent);
        opacity: .75;
        animation: n4-houston-tw calc(5s / var(--k)) ease-in-out infinite alternate;
      }
      
      .n4-houston .n4-stars2 {
        background-image: radial-gradient(2px 2px at 18% 30%,rgba(255,255,255,.9) 50%,transparent),radial-gradient(1.5px 1.5px at 72% 20%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 30% 85%,rgba(255,255,255,.7) 50%,transparent),radial-gradient(1.5px 1.5px at 88% 70%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 52% 60%,rgba(255,255,255,.6) 50%,transparent),radial-gradient(1.5px 1.5px at 6% 55%,rgba(255,255,255,.8) 50%,transparent);
        opacity: .55;
        animation: n4-houston-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
      }
      
      .n4-houston [data-depth] {
        transition: transform .9s cubic-bezier(.2,.7,.2,1);
      }
      
      @keyframes n4-houston-tw {
        from {
          opacity: .3;
        }
      }
      
      @keyframes n4-houston-spin {
        to {
          transform: rotate(1turn);
        }
      }
      
      @keyframes n4-houston-fade {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
      }
      
      @media (prefers-reduced-motion:reduce) {
        .n4-houston *,.n4-houston *::before,.n4-houston *::after {
          animation: none!important;
          transition: none!important;
        }
      }
      
      .n4-houston {
        background: radial-gradient(80% 60% at 50% 40%,#0a1020,#000 72%);
      }
      
      .n4-houston .n4-num {
        margin: 0 0 1cqmin;
        display: flex;
        align-items: center;
        font-size: clamp(84px,28cqmin,280px);
        font-weight: 700;
        letter-spacing: -.05em;
        line-height: .9;
      }
      
      .n4-houston .n4-num b {
        color: #f5f5f7;
        text-shadow: 0 0 .2em color-mix(in srgb,var(--accent) 30%,transparent);
      }
      
      .n4-houston .n4-o {
        position: relative;
        isolation: isolate;
        display: grid;
        place-items: center;
        width: .78em;
        height: .78em;
        margin: 0 .06em;
      }
      
      .n4-houston .n4-moon {
        position: relative;
        z-index: 1;
        width: .72em;
        height: .72em;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 34%,rgba(0,0,0,.28) 0 .045em,transparent .05em),radial-gradient(circle at 64% 30%,rgba(0,0,0,.22) 0 .03em,transparent .035em),radial-gradient(circle at 55% 64%,rgba(0,0,0,.25) 0 .07em,transparent .075em),radial-gradient(circle at 26% 70%,rgba(0,0,0,.18) 0 .028em,transparent .033em),radial-gradient(circle at 78% 55%,rgba(0,0,0,.2) 0 .022em,transparent .027em),radial-gradient(ellipse 40% 30% at 40% 45%,rgba(0,0,0,.12),transparent 70%),radial-gradient(circle at 35% 30%,#f2f2f4,#c7c7cc 45%,#8e8e93 75%,#5a5a5f);
        box-shadow: inset -.1em -.06em .14em rgba(0,0,0,.65),0 0 .35em rgba(255,255,255,.12);
      }
      
      .n4-houston .n4-orbit {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 1.5em;
        height: 1.5em;
        margin: -.75em 0 0 -.75em;
        transform: rotate(-16deg) scaleY(.32);
        pointer-events: none;
        z-index: 0;
        animation: n4-houston-z calc(9s / var(--k)) linear infinite;
      }
      
      .n4-houston .n4-orbit::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: .008em solid rgba(255,255,255,.2);
      }
      
      .n4-houston .n4-sat {
        position: absolute;
        inset: 0;
        animation: n4-houston-spin calc(9s / var(--k)) linear infinite;
      }
      
      .n4-houston .n4-sat::after {
        content: "";
        position: absolute;
        left: 50%;
        top: -.035em;
        width: .07em;
        height: .07em;
        margin-left: -.035em;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 .06em .02em #fff,0 0 .22em color-mix(in srgb,var(--accent) 90%,#fff);
      }
      
      .n4-houston .n4-copy>* {
        animation: n4-houston-fade calc(1s / var(--k)) cubic-bezier(.2,.7,.2,1) both;
      }
      
      .n4-houston .n4-copy>:nth-child(2) {
        animation-delay: calc(.15s / var(--k));
      }
      
      .n4-houston .n4-copy>:nth-child(3) {
        animation-delay: calc(.3s / var(--k));
      }
      
      .n4-houston .n4-copy>:nth-child(4) {
        animation-delay: calc(.45s / var(--k));
      }
      
      @keyframes n4-houston-z {
        0%,24.9% {
          z-index: 0;
        }
        25%,74.9% {
          z-index: 3;
        }
        75%,100% {
          z-index: 0;
        }
      }
    </style>
  </head>
  <body>
    <main class="n4-houston">
      <div class="n4-stars" data-depth="10" aria-hidden="true"></div>
      <div class="n4-stars2" data-depth="26" aria-hidden="true"></div>
      <div class="n4-copy">
        <p class="n4-num" aria-hidden="true">
          <b>4</b>
          <span class="n4-o" data-depth="-14"><span class="n4-moon"></span><span class="n4-orbit"><span class="n4-sat"></span></span></span>
          <b>4</b>
        </p>
        <h1 class="n4-title">Houston, on a un problème.</h1>
        <p class="n4-sub">Cette page est sortie de son orbite. On vous ramène à la base avant de manquer d’oxygène.</p>
        <a class="n4-cta" href="/">Retour à la base</a>
      </div>
    </main>
    <script>
      document.querySelectorAll(".n4-houston").forEach((el) => {
        const layers = el.querySelectorAll("[data-depth]");
        const move = (e) => {
          const r = el.getBoundingClientRect();
          const x = (e.clientX - r.left) / r.width - 0.5;
          const y = (e.clientY - r.top) / r.height - 0.5;
          layers.forEach((l) => {
            const d = Number(l.dataset.depth);
            l.style.transform = `translate3d(${-x * d}px, ${-y * d}px, 0)`;
          });
        };
        el.addEventListener("pointermove", move);
      });
    </script>
  </body>
</html>