404 Phare

<!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-lighthouse {
        --accent: #ffd56b;
        --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-lighthouse *,.n4-lighthouse *::before,.n4-lighthouse *::after {
        box-sizing: border-box;
      }
      
      .n4-lighthouse .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-lighthouse .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-lighthouse .n4-sub {
        margin: 0;
        max-width: 34em;
        font-size: clamp(13px,2.4cqmin,18px);
        color: #a1a1a6;
        text-wrap: balance;
      }
      
      .n4-lighthouse .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-lighthouse .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-lighthouse .n4-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 32px -10px var(--accent);
      }
      
      .n4-lighthouse .n4-cta:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }
      
      .n4-lighthouse .n4-stars,.n4-lighthouse .n4-stars2 {
        position: absolute;
        inset: -4%;
        pointer-events: none;
      }
      
      .n4-lighthouse .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-lighthouse-tw calc(5s / var(--k)) ease-in-out infinite alternate;
      }
      
      .n4-lighthouse .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-lighthouse-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
      }
      
      .n4-lighthouse [data-depth] {
        transition: transform .9s cubic-bezier(.2,.7,.2,1);
      }
      
      @keyframes n4-lighthouse-tw {
        from {
          opacity: .3;
        }
      }
      
      @keyframes n4-lighthouse-spin {
        to {
          transform: rotate(1turn);
        }
      }
      
      @keyframes n4-lighthouse-fade {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
      }
      
      @media (prefers-reduced-motion:reduce) {
        .n4-lighthouse *,.n4-lighthouse *::before,.n4-lighthouse *::after {
          animation: none!important;
          transition: none!important;
        }
      }
      
      .n4-lighthouse {
        background: linear-gradient(#071720,#0f2f3d 46%,#16404f 56%,#06161d 56.2%,#020a0e);
        color: #eaf4f7;
      }
      
      .n4-lighthouse .n4-sky {
        position: absolute;
        inset: 0;
        overflow: hidden;
      }
      
      .n4-lighthouse .n4-big {
        position: absolute;
        left: 0;
        right: 0;
        top: 6%;
        margin: 0;
        display: grid;
        justify-content: center;
        font: 800 28cqmin/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
        letter-spacing: -.06em;
      }
      
      .n4-lighthouse .n4-big span {
        grid-area: 1/1;
      }
      
      .n4-lighthouse .n4-dim {
        color: transparent;
        -webkit-text-stroke: 1px rgba(234,244,247,.16);
      }
      
      .n4-lighthouse .n4-lit {
        color: #fff3c9;
        text-shadow: 0 0 3cqmin rgba(255,213,107,.6);
        -webkit-mask: radial-gradient(circle 15cqmin at var(--mx,50%) var(--my,50%),#000 25%,transparent);
        mask: radial-gradient(circle 15cqmin at var(--mx,50%) var(--my,50%),#000 25%,transparent);
      }
      
      .n4-lighthouse .n4-fog {
        position: absolute;
        left: -30%;
        right: -30%;
        top: 16%;
        height: 40%;
        background: radial-gradient(35% 45% at 30% 50%,rgba(160,195,205,.18),transparent 70%),radial-gradient(30% 40% at 72% 40%,rgba(160,195,205,.13),transparent 70%);
        filter: blur(2cqmin);
        animation: n4-lighthouse-drift calc(26s / var(--k)) ease-in-out infinite alternate;
      }
      
      .n4-lighthouse .n4-f2 {
        top: 34%;
        opacity: .8;
        animation-duration: calc(34s / var(--k));
        animation-direction: alternate-reverse;
      }
      
      .n4-lighthouse .n4-beam {
        position: absolute;
        left: var(--lx,82%);
        top: var(--ly,30%);
        width: 160cqmax;
        height: 34cqmin;
        margin-top: -17cqmin;
        transform-origin: 0 50%;
        rotate: var(--a,200deg);
        clip-path: polygon(0 48.5%,100% 0,100% 100%,0 51.5%);
        background: linear-gradient(90deg,rgba(255,230,160,.5),rgba(255,230,160,.12) 45%,transparent 80%);
        mix-blend-mode: screen;
        pointer-events: none;
      }
      
      .n4-lighthouse .n4-rock {
        position: absolute;
        right: 3%;
        bottom: 43%;
        width: 28cqmin;
        height: 6cqmin;
        border-radius: 50% 50% 0 0/100% 100% 0 0;
        background: #08171d;
      }
      
      .n4-lighthouse .n4-tower {
        position: absolute;
        right: 11%;
        bottom: 44%;
        width: 6.5cqmin;
        height: 26cqmin;
      }
      
      .n4-lighthouse .n4-body {
        position: absolute;
        inset: 0;
        clip-path: polygon(24% 0,76% 0,100% 100%,0 100%);
        background: linear-gradient(90deg,rgba(0,0,0,.4),transparent 45%,rgba(0,0,0,.3)),repeating-linear-gradient(#e9e4da 0 4.4cqmin,#b3261e 4.4cqmin 8.8cqmin);
      }
      
      .n4-lighthouse .n4-gal {
        position: absolute;
        left: -6%;
        right: -6%;
        top: -.8cqmin;
        height: 1cqmin;
        border-radius: .3cqmin;
        background: #1d2428;
      }
      
      .n4-lighthouse .n4-lamp {
        position: absolute;
        left: 16%;
        right: 16%;
        bottom: calc(100% + .4cqmin);
        height: 4cqmin;
        border-radius: .4cqmin;
        background: radial-gradient(circle,#fff8d6 0 30%,#ffd56b 55%,rgba(255,213,107,.35));
        box-shadow: 0 0 4cqmin 1cqmin rgba(255,213,107,.5);
      }
      
      .n4-lighthouse .n4-lamp::before {
        content: "";
        position: absolute;
        left: -22%;
        right: -22%;
        bottom: 100%;
        height: 2.6cqmin;
        clip-path: polygon(50% 0,100% 100%,0 100%);
        background: #1d2428;
      }
      
      .n4-lighthouse .n4-sea {
        position: absolute;
        left: 0;
        bottom: 41.5%;
        width: 200%;
        height: 5cqmin;
        animation: n4-lighthouse-waves calc(10s / var(--k)) linear infinite;
      }
      
      .n4-lighthouse .n4-sea path {
        fill: #06161d;
      }
      
      .n4-lighthouse .n4-copy {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 5cqh;
        margin: 0 auto;
      }
      
      .n4-lighthouse .n4-tag {
        color: var(--accent);
      }
      
      .n4-lighthouse .n4-title {
        font-size: clamp(20px,4.8cqmin,40px);
        font-weight: 700;
        letter-spacing: -.025em;
      }
      
      .n4-lighthouse .n4-sub {
        color: #9fb6bf;
      }
      
      .n4-lighthouse .n4-cta {
        background: var(--accent);
        color: #1b1503;
      }
      
      @keyframes n4-lighthouse-drift {
        to {
          transform: translateX(12%);
        }
      }
      
      @keyframes n4-lighthouse-waves {
        to {
          transform: translateX(-50%);
        }
      }
    </style>
  </head>
  <body>
    <main class="n4-lighthouse">
      <div class="n4-sky" aria-hidden="true">
        <p class="n4-big" translate="no"><span class="n4-dim">404</span><span class="n4-lit">404</span></p>
        <i class="n4-fog"></i><i class="n4-fog n4-f2"></i>
        <i class="n4-beam"></i>
        <i class="n4-rock"></i>
        <div class="n4-tower"><i class="n4-body"></i><i class="n4-gal"></i><i class="n4-lamp"></i></div>
        <svg class="n4-sea" viewBox="0 0 800 40" preserveAspectRatio="none"><path d="M0 20Q50 6 100 20T200 20T300 20T400 20T500 20T600 20T700 20T800 20V40H0Z"/></svg>
      </div>
      <div class="n4-copy">
        <span class="n4-tag">Cap 404</span>
        <h1 class="n4-title">Cette page n'est jamais arrivée au port.</h1>
        <p class="n4-sub">Le phare la cherche dans le brouillard, mais elle n'apparaît pas sur la carte marine. Retourne à l'entrée du port et choisis un autre cap.</p>
        <a class="n4-cta" href="/">Retour au port</a>
      </div>
    </main>
    <script>
      document.querySelectorAll(".n4-lighthouse").forEach((el) => {
        const sky = el.querySelector(".n4-sky");
        const lamp = el.querySelector(".n4-lamp");
        const lit = el.querySelector(".n4-lit");
        const rm = matchMedia("(prefers-reduced-motion: reduce)").matches;
        const k = parseFloat(getComputedStyle(el).getPropertyValue("--k")) || 1;
        let px = 0, py = 0, until = 0, raf = 0, sx = -1, sy = 0;
        const t0 = performance.now();
        const frame = (t) => {
          const r = el.getBoundingClientRect(), l = lamp.getBoundingClientRect(), b = lit.getBoundingClientRect();
          const s = r.width / el.offsetWidth || 1;
          const lx = (l.left + l.width / 2 - r.left) / s, ly = (l.top + l.height / 2 - r.top) / s;
          const bx = (b.left - r.left) / s, by = (b.top - r.top) / s, bw = b.width / s, bh = b.height / s;
          let tx = px, ty = py;
          if (t > until) { tx = bx + bw * (0.5 + 0.6 * Math.sin(((t - t0) / 1000) * 0.7 * k)); ty = by + bh * 0.55; }
          if (sx < 0 || rm) { sx = tx; sy = ty; }
          sx += (tx - sx) * 0.08;
          sy += (ty - sy) * 0.08;
          sky.style.setProperty("--lx", lx.toFixed(1) + "px");
          sky.style.setProperty("--ly", ly.toFixed(1) + "px");
          sky.style.setProperty("--a", ((Math.atan2(sy - ly, sx - lx) * 180) / Math.PI).toFixed(2) + "deg");
          lit.style.setProperty("--mx", (sx - bx).toFixed(1) + "px");
          lit.style.setProperty("--my", (sy - by).toFixed(1) + "px");
          if (!rm) raf = requestAnimationFrame(frame);
        };
        const move = (e) => {
          const r = el.getBoundingClientRect();
          const s = r.width / el.offsetWidth || 1;
          px = (e.clientX - r.left) / s;
          py = (e.clientY - r.top) / s;
          until = performance.now() + 2500;
          if (rm) frame(performance.now());
        };
        el.addEventListener("pointermove", move);
        raf = requestAnimationFrame(frame);
      });
    </script>
  </body>
</html>