feat: navigation entre documents via les liens Markdown

Intercepte les clics sur les liens dans le contenu rendu : les liens
internes (.md) chargent le document dans l'app, les liens HTTP s'ouvrent
dans le navigateur système. Restructure aussi la sidebar avec un footer
fixe pour les boutons Personnaliser/Accueil.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/style.css

@@ -8,7 +8,16 @@ body {
   color: #222;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
-  overflow-x: hidden;
+  overflow: hidden;
+}
+
+#app-content {
+  position: fixed;
+  top: 36px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow-y: auto;
 }
 
 /* ── Titlebar ── */
@@ -78,8 +87,7 @@ body {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 100vh;
-  padding-top: 36px;
+  height: 100%;
   background: #1a1b2e;
 }
 
@@ -206,6 +214,23 @@ body {
   z-index: 99;
   overflow: hidden;
 }
+
+.sidebar__scroll {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.sidebar__footer {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 4px 0 8px;
+  border-top: 1px solid rgba(255,255,255,0.06);
+}
+
 .sidebar__title-block {
   margin: 32px 24px 8px;
   flex-shrink: 0;
@@ -233,7 +258,7 @@ body {
 .sidebar__menu {
   list-style: none;
   margin: 0;
-  padding: 8px 0 48px 0;
+  padding: 8px 0;
   flex: 1;
   overflow-y: auto;
 }
@@ -379,12 +404,12 @@ body {
 /* ── Content ── */
 .content {
   margin-left: 264px;
-  padding-top: 84px;
+  padding-top: 48px;
   padding-right: 72px;
   padding-bottom: 96px;
   padding-left: 72px;
   max-width: 1080px;
-  min-height: 100vh;
+  min-height: 100%;
   background: #fff;
 }
 
@@ -459,11 +484,8 @@ body {
 
 /* ── Customize CSS button ── */
 .btn-customize-css {
-  position: fixed;
-  bottom: 60px;
-  left: 12px;
-  width: 240px;
-  z-index: 100;
+  width: calc(100% - 24px);
+  margin: 4px 12px 0;
   background: transparent;
   color: rgba(255,255,255,0.7);
   border: 1px solid rgba(255,255,255,0.15);
@@ -626,11 +648,7 @@ body {
 
 /* ── Back button ── */
 .btn-back {
-  position: fixed;
-  bottom: 24px;
-  left: 0;
-  width: 264px;
-  z-index: 98;
+  width: 100%;
   background: transparent;
   color: rgba(255,255,255,0.45);
   border: none;
@@ -641,7 +659,6 @@ body {
   cursor: pointer;
   text-align: left;
   transition: color 0.2s;
-  z-index: 100;
 }
 .btn-back:hover { color: #ff5577; }
 
@@ -651,7 +668,7 @@ body {
     left: -300px;
     transition: left 0.2s cubic-bezier(0.09, 0.46, 0.45, 0.94);
   }
-  .content { margin-left: 0; padding: 68px 24px 64px; }
+  .content { margin-left: 0; padding: 32px 24px 64px; }
 }
 @media screen and (max-width: 540px) {
   .content { padding: 68px 16px 48px; }