feat: add navigation anchors and smooth scroll

- Link all navigation items to their corresponding sections
- Add smooth scroll behavior on html element
- Add scroll-margin-top on sections to compensate for fixed header
- Add id="presse" to footer for press navigation link

Navigation mapping:
- Le Courage du Réel → #hero
- Extraits → #excerpts
- Les poignées → #handles
- Le système → #system
- L'auteur → #author
- Précommander → #buy
- Presse → #presse (footer)

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

assets/css/src/_reset.scss

@@ -1,3 +1,7 @@
+html {
+  scroll-behavior: smooth;
+}
+
 body,
 html,
 ul,
@@ -45,3 +49,7 @@ main {
   background-color: #fff;
   margin-bottom: 50rem;
 }
+
+section {
+  scroll-margin-top: calc(4.8125rem + 4rem);
+}

assets/css/style.css

@@ -1,3 +1,7 @@
+html {
+  scroll-behavior: smooth;
+}
+
 body,
 html,
 ul,
@@ -46,6 +50,10 @@ main {
   margin-bottom: 50rem;
 }
 
+section {
+  scroll-margin-top: 8.8125rem;
+}
+
 :root {
   --font-narrow: 'owners-xnarrow', sans-serif;
   --font-size-l: 4rem;

index.html

@@ -12,25 +12,25 @@
       <nav>
         <ul>
           <li>
-            <a href="#le-courage-du-reel">Le Courage du Réel</a>
+            <a href="#hero">Le Courage du Réel</a>
           </li>
           <li>
-            <a href="#">Extraits</a>
+            <a href="#excerpts">Extraits</a>
           </li>
           <li>
-            <a href="#">Les poignées</a>
+            <a href="#handles">Les poignées</a>
           </li>
           <li>
-            <a href="#">Le système</a>
+            <a href="#system">Le système</a>
           </li>
           <li>
-            <a href="#">L’auteur</a>
+            <a href="#author">L'auteur</a>
           </li>
           <li>
-            <a href="#">Précommander</a>
+            <a href="#buy">Précommander</a>
           </li>
           <li>
-            <a href="#">Presse</a>
+            <a href="#presse">Presse</a>
           </li>
         </ul>
       </nav>
@@ -429,7 +429,7 @@
         />
       </section>
     </main>
-    <footer class="blue-container">
+    <footer id="presse" class="blue-container">
       <header>
         <h2 class="section-title">Contact</h2>
         <h3 class="title">Presse et médias</h3>