Fix light mode nav invisible, logo § calligraphié, typo ronde fine

- Navigation : btn-ghost, active-class, footer, nav mobile → CSS vars adaptatifs
- Overrides light mode renforcés avec !important (scoped styles compatibles)
- btn-primary garde text-white en light mode (fond coloré)
- Logo : symbole § calligraphié SVG inline remplace lucide-book-open
- Logo text : font-display weight 300 (ronde fine) + text-gradient
- Logo SVG aussi exporté en /public/images/logo-section.svg
- Header/footer : backgrounds et bordures via CSS vars

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

app/components/layout/TheFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer class="footer-wrap border-t border-white/8 bg-surface-600">
+  <footer class="footer-wrap border-t border-[hsl(var(--color-text)/0.1)] bg-[hsl(var(--color-surface))]">
     <!-- Shadok pattern -->
     <svg class="footer-shadok-pattern" viewBox="0 0 400 80" fill="none" aria-hidden="true">
       <g transform="translate(20,10)">
@@ -42,7 +42,7 @@
     <div class="container-content px-4 py-8 relative z-1">
       <div class="flex flex-col items-center gap-4 md:flex-row md:justify-between">
         <!-- Credits -->
-        <p class="text-sm text-white/40">
+        <p class="text-sm text-[hsl(var(--color-text)/0.4)]">
           {{ site?.footer.credits }}
         </p>
 
@@ -52,7 +52,7 @@
             v-for="link in site?.footer.links"
             :key="link.to"
             :to="link.to"
-            class="text-sm text-white/40 transition-colors hover:text-white/70"
+            class="text-sm text-[hsl(var(--color-text)/0.4)] transition-colors hover:text-[hsl(var(--color-text)/0.7)]"
           >
             {{ link.label }}
           </NuxtLink>