404.html

<!DOCTYPE html>
<!--
 @file 404.html
 @author Aurélien Capron
 @description Afficher une page de secours pour les URL introuvables et orienter vers l’accueil et les projets.
 @created 2026-09-26
 @documented 2026-11-09
 @updated 2026-11-09
-->
<html lang="fr" data-theme="light">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex">
<meta name="theme-color" content="#f6f7f9">
<meta name="color-scheme" content="light">
<title>Page introuvable — Aurélien CAPRON</title>
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="192x192" href="/assets/icon-192.png">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">

<!-- Application du thème avant le premier affichage. -->
<script>
  try {
    let t = null;
    try { t = localStorage.getItem('theme'); } catch (e) {}
    const dark = t === 'dark' || (t !== 'light' && matchMedia('(prefers-color-scheme: dark)').matches);
    if (dark) {
      document.documentElement.setAttribute('data-theme', 'dark');
      document.querySelector('meta[name="theme-color"]')?.setAttribute('content', '#0c0e11');
      document.querySelector('meta[name="color-scheme"]')?.setAttribute('content', 'dark');
    }
  } catch (e) {}
</script>

<style>
  /* Polices locales : chemins absolus pour les URL de secours imbriquées. */
  @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-400.woff2') format('woff2'); }
  @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/inter-600.woff2') format('woff2'); }
  @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2'); }
  @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/jetbrains-mono-600.woff2') format('woff2'); }
  @font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/barlow-semi-condensed-700.woff2') format('woff2'); }
  @font-face {
    font-family: 'Inter Fallback'; src: local('Arial');
    size-adjust: 107.4%; ascent-override: 90.2%; descent-override: 22.5%; line-gap-override: 0%;
  }

  /* Palette et variables de présentation des thèmes. */
  :root {
    color-scheme: dark;
    --bg: #0c0e11; --surface: rgba(22,27,34,.85); --border: rgba(255,255,255,.11); --chip-bg: rgba(255,255,255,.06);
    --text: #cbd5e1; --text-strong: #ffffff; --text-soft: #e2e8f0; --text-muted: #94a3b8; --text-faint: #7c8ba1;
    --accent-soft: #e0915c; --accent-rgb: 224 145 92; --on-accent: #0c0e11;
    --card-shadow: 0 10px 30px -10px rgba(0,0,0,.45);
    --ease-out: cubic-bezier(.22, 1, .36, 1);
  }
  :root[data-theme="light"] {
    color-scheme: light;
    --bg: #f6f7f9; --surface: rgba(255,255,255,.94); --border: rgba(15,23,42,.09); --chip-bg: rgba(15,23,42,.05);
    --text: #334155; --text-strong: #0f172a; --text-soft: #1e293b; --text-muted: #475569; --text-faint: #5b6a7f;
    --accent-soft: #b4531a; --accent-rgb: 180 83 26; --on-accent: #ffffff;
    --card-shadow: 0 8px 24px -4px rgba(15,23,42,.05), 0 2px 6px -1px rgba(15,23,42,.03);
  }

  * { box-sizing: border-box; }
  html { height: 100%; }
  body {
    margin: 0; min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column;
    background: var(--bg); color: var(--text);
    font-family: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    /* Décor de fond. */
    background-image: radial-gradient(ellipse 60% 45% at 50% 0%, rgb(var(--accent-rgb) / .10), transparent 70%);
    background-repeat: no-repeat;
  }
  ::selection { background: rgb(var(--accent-rgb) / .28); color: var(--text-strong); }
  :focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }

  header { padding: 1.25rem 1.5rem; }
  .brand {
    display: inline-flex; align-items: center; gap: .625rem;
    color: var(--text-strong); text-decoration: none; font-weight: 600; font-size: .9rem;
  }
  .brand .mark {
    display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .5rem;
    background: var(--surface); border: 1px solid var(--border);
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; font-size: .8rem; color: var(--accent-soft);
  }

  main {
    flex: 1; display: grid; place-items: center; padding: 1.5rem 1.5rem 4rem; text-align: center;
  }
  .wrap { width: 100%; max-width: 34rem; }

  .eyebrow {
    margin: 0; font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-soft);
  }
  h1 {
    margin: .5rem 0 0; color: var(--text-strong);
    font-family: 'Barlow Semi Condensed', 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-weight: 700; letter-spacing: -.02em; line-height: 1;
    font-size: clamp(2.75rem, 1.5rem + 6vw, 4.5rem);
    text-wrap: balance;
  }
  .lead { margin: 1rem auto 0; max-width: 30rem; line-height: 1.65; color: var(--text-muted); text-wrap: pretty; }

  /* Présentation du chemin introuvable sous forme de terminal. */
  .term {
    margin: 2rem auto 0; max-width: 30rem; text-align: left;
    background: var(--surface); border: 1px solid var(--border); border-radius: .75rem;
    box-shadow: var(--card-shadow); padding: 1rem 1.25rem;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; font-size: .8rem; line-height: 1.7;
    overflow-wrap: anywhere;
  }
  .term .prompt { color: var(--accent-soft); }
  .term .cmd { color: var(--text-soft); }
  .term .err { color: var(--text-muted); }
  .term .cursor {
    display: inline-block; width: .55em; height: 1em; vertical-align: -.15em;
    background: var(--accent-soft); margin-left: .15rem; animation: blink 1.1s steps(1) infinite;
  }
  @keyframes blink { 50% { opacity: 0; } }

  .actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
  .btn {
    display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.25rem;
    border-radius: .375rem; font-weight: 600; font-size: .875rem; text-decoration: none;
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s, color .2s;
  }
  .btn-primary { background: rgb(var(--accent-rgb)); color: var(--on-accent); box-shadow: 0 6px 18px -6px rgb(var(--accent-rgb) / .55); }
  .btn-ghost { border: 1px solid var(--border); color: var(--text-soft); background: var(--surface); }
  .btn-ghost:hover { border-color: rgb(var(--accent-rgb) / .5); color: var(--accent-soft); }
  .btn:active { scale: .97; }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -6px rgb(var(--accent-rgb) / .6); }
  }
  @media (prefers-reduced-motion: reduce) { .term .cursor { animation: none; } }
</style>
</head>

<body>
  <!-- Navigation principale. -->
  <header>
    <a class="brand" href="/" aria-label="Aurélien Capron — accueil" data-i18n-aria="brand.aria">
      <span class="mark" aria-hidden="true">AC</span><span>Aurélien Capron</span>
    </a>
  </header>

  <!-- Contenu principal. -->
  <main>
    <div class="wrap">
      <p class="eyebrow" data-i18n="eyebrow">Erreur 404</p>
      <h1 data-i18n="title">Page introuvable</h1>
      <p class="lead" data-i18n="lead">Ce lien n'existe pas ou a été déplacé. Retourne à l'accueil pour retrouver mes projets, mon parcours et mes coordonnées.</p>

      <div class="term" aria-hidden="true">
        <div><span class="prompt">&gt;_</span> <span class="cmd">cd <span id="path">/</span></span></div>
        <div class="err" id="err">bash: cd: aucun fichier ou dossier de ce type</div>
        <div><span class="prompt">&gt;_</span> <span class="cursor"></span></div>
      </div>

      <div class="actions">
        <a class="btn btn-primary" href="/"><span aria-hidden="true">←</span><span data-i18n="home">Retour à l'accueil</span></a>
        <a class="btn btn-ghost" href="/#projets" data-i18n="projects">Voir mes projets</a>
      </div>
    </div>
  </main>

  <script>
  /** Résolution du chemin demandé et adaptation des textes à la langue du visiteur. */
  (() => {
    const $$ = (s) => [...document.querySelectorAll(s)];

    /* Le chemin reste du texte ; sa longueur est limitée pour préserver la mise en page. */
    let p = '/';
    try { p = decodeURIComponent(location.pathname); } catch (e) { p = location.pathname; }
    if (p.length > 48) p = p.slice(0, 47) + '…';
    document.getElementById('path').textContent = p;

    /* Choix de langue : préférence mémorisée, puis langue du navigateur. */
    const FR = {};
    $$('[data-i18n]').forEach(el => { FR[el.dataset.i18n] = el.textContent; });
    FR['brand.aria'] = 'Aurélien Capron — accueil';
    FR['err'] = document.getElementById('err').textContent;
    FR['meta.title'] = document.title;

    const EN = {
      'eyebrow': 'Error 404',
      'title': 'Page not found',
      'lead': 'This link doesn\'t exist or has been moved. Head back to the homepage to find my projects, background and contact details.',
      'home': 'Back to homepage',
      'projects': 'See my projects',
      'brand.aria': 'Aurélien Capron — home',
      'err': 'bash: cd: No such file or directory',
      'meta.title': 'Page not found — Aurélien CAPRON'
    };

    let saved = null;
    try { saved = localStorage.getItem('lang'); } catch (e) {}
    const browser = (navigator.language || '').toLowerCase().startsWith('fr') ? 'fr' : 'en';
    const lang = (saved === 'fr' || saved === 'en') ? saved : browser;

    if (lang === 'en') {
      document.documentElement.lang = 'en';
      $$('[data-i18n]').forEach(el => { if (EN[el.dataset.i18n]) el.textContent = EN[el.dataset.i18n]; });
      document.querySelector('.brand').setAttribute('aria-label', EN['brand.aria']);
      document.getElementById('err').textContent = EN['err'];
      document.title = EN['meta.title'];
    }
  })();
  </script>
</body>
</html>