adjust hero cover

fix: make press nav anchor work with fixed footer
- Move id="presse" from footer to empty div at end of main - Add scroll-margin-top: 100vh to force max scroll and reveal footer Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-24 10:02:05 +01:00 · 2026-02-23 19:23:35 +01:00 · 2026-02-23 19:17:04 +01:00 · 2026-02-23 19:05:31 +01:00 · 2026-02-23 18:19:28 +01:00 · 2026-02-23 17:29:30 +01:00
22 changed files with 863 additions and 55 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+.claude/
--- a/assets/css/src/_footer.scss
+++ b/assets/css/src/_footer.scss
@ -1,5 +1,10 @@
+#presse {
+  scroll-margin-top: 0vh;
+}
+
 body > footer {
-  width: 100%;
+  width: 100vw;
+  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
@ -42,9 +47,14 @@ body > footer {
  }

  .legal {
+    font-size: 0.625rem;
+    text-transform: uppercase;
+    letter-spacing: 0.15rem;
+    text-align: center;
    width: 50rem;
    margin-top: 5rem;
    padding: 2.5rem 0 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
+    font-weight: 400;
  }
 }
--- a/assets/css/src/_generic-classes.scss
+++ b/assets/css/src/_generic-classes.scss
@ -40,6 +40,7 @@
  text-transform: uppercase;
  width: max-content;
  padding: 1rem 4rem;
+  font-weight: 500;

  &.outlined {
    outline: 1px solid #fff;
@ -59,7 +60,7 @@
  font-size: var(--font-size-s);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
 }

@mixin section-title-centered {
@ -104,7 +105,7 @@
@mixin label-base {
  font-size: 0.625rem;
  text-transform: uppercase;
-  font-weight: 400;
+  font-weight: 500;
  opacity: 0.8;
 }

--- a/assets/css/src/_header.scss
+++ b/assets/css/src/_header.scss
@ -1,13 +1,19 @@
 body {
  > header {
+    box-sizing: border-box;
    position: sticky;
    z-index: 999;
    top: 0;
    left: 0;
-    width: 100%;
+    width: 100vw;
    padding: 1.5rem var(--padding-body);
    box-sizing: border-box;

+    .nav-logo,
+    .burger {
+      display: none;
+    }
+
    ul {
      display: flex;
      justify-content: space-between;
--- a/assets/css/src/_mobile.scss
+++ b/assets/css/src/_mobile.scss
@ -0,0 +1,358 @@
+// Body scroll lock when nav is open
+body.no-scroll {
+  overflow: hidden;
+}
+
+@media (max-width: 930px) {
+  // ---- HEADER ----
+  body > header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 3.5rem;
+    margin: 0;
+    border-radius: 0;
+    box-sizing: border-box;
+    padding: 1rem var(--padding-body);
+    z-index: 9999;
+
+    nav {
+      display: flex;
+      align-items: center;
+      position: relative;
+      z-index: 2;
+
+      .nav-logo {
+        display: block;
+        font-size: 1rem;
+        z-index: 2;
+      }
+
+      .burger {
+        margin-left: auto;
+        width: 7.125rem;
+        height: 1.25rem;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        z-index: 2;
+
+        span {
+          display: block;
+          width: 100%;
+          height: 1px;
+          background-color: #fff;
+          transition: transform 0.3s ease, opacity 0.3s ease;
+          transform-origin: center;
+        }
+      }
+
+      // Full-screen overlay
+      ul {
+        position: fixed;
+        display: block;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100dvh;
+        background-color: var(--color-blue);
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 6rem var(--padding-body) 2rem;
+        box-sizing: border-box;
+        z-index: 1;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.3s ease-in-out;
+
+        li {
+          width: 100%;
+
+          a {
+            display: block;
+            padding: 0.5rem 0;
+            font-size: 2.5rem;
+            font-weight: 400;
+          }
+        }
+
+        li:first-child {
+          width: 100%;
+          font-size: 2.5rem;
+
+          a {
+            font-family: var(--font-narrow);
+            text-transform: uppercase;
+          }
+        }
+
+        li:not(:first-child) {
+          font-family: var(--font-narrow);
+          font-size: 2rem;
+          text-transform: uppercase;
+          font-weight: 700;
+        }
+      }
+    }
+
+    // ---- OPEN STATE ----
+    &.nav-open nav {
+      ul {
+        opacity: 1;
+        pointer-events: all;
+      }
+
+      .burger span:nth-child(2) {
+        opacity: 0;
+      }
+
+      .burger span:first-child {
+        transform: translateY(0.55rem) rotate(10deg);
+      }
+
+      .burger span:last-child {
+        transform: translateY(-0.55rem) rotate(-10deg);
+      }
+    }
+  }
+
+  // Compensate fixed header
+  main {
+    padding-top: 3.5rem;
+  }
+
+  section {
+    scroll-margin-top: calc(4.8125rem + 1rem);
+  }
+
+  // ---- HERO ----
+  section#hero {
+    height: auto;
+    min-height: 100vh;
+    text-align: center;
+    align-items: center;
+    padding: 4rem var(--padding-body) 3rem;
+    background-position: 74% -44vh;
+    background-size: 96vh;
+
+    .title {
+      font-size: 4rem;
+    }
+
+    .subtitle {
+      margin-bottom: 2rem;
+    }
+
+    #preorder-button {
+      position: static;
+    }
+  }
+
+  // ---- QUOTES ----
+  section#quote-full,
+  section#quote {
+    padding: 4rem var(--padding-body);
+
+    blockquote {
+      font-size: 1.5rem;
+    }
+  }
+
+  // ---- THE BOOK ----
+  section#the-book {
+    padding: 4rem var(--padding-body);
+
+    .summary-wrapper {
+      grid-template-columns: 1fr;
+      gap: 2rem;
+
+      .title-wrapper .title {
+        font-size: 2.5rem;
+      }
+    }
+
+    .data-wrapper {
+      flex-wrap: wrap;
+      gap: 1.5rem;
+      justify-content: center;
+
+      .data {
+        width: 40%;
+      }
+    }
+
+    .claim-wrapper {
+      grid-template-columns: 1fr;
+      gap: 2rem;
+
+      img {
+        border-radius: var(--radius-section);
+      }
+
+      .text .big {
+        font-size: 1.75rem;
+      }
+    }
+  }
+
+  // ---- EXCERPTS ----
+  section#excerpts {
+    padding: 4rem var(--padding-body);
+
+    header .title {
+      font-size: 2.5rem;
+    }
+
+    .swiper-slide .item {
+      width: 100%;
+      max-width: 20rem;
+      text-align: center;
+    }
+  }
+
+  // ---- HANDLES ----
+  section#handles {
+    margin: 3rem var(--padding-body);
+    padding: 0;
+
+    header {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 1rem;
+
+      .title-wrapper .title {
+        font-size: 2.5rem;
+      }
+
+      .subtitle {
+        margin-right: 0;
+      }
+    }
+
+    .path {
+      width: 100%;
+      margin-top: 3rem;
+
+      .step {
+        width: 100%;
+      }
+
+      .step:nth-child(even) {
+        margin-left: 0;
+      }
+    }
+  }
+
+  // ---- SYSTEM ----
+  section#system {
+    flex-direction: column;
+    margin: 3rem var(--padding-body);
+    padding: 0;
+    gap: 3rem;
+
+    .text {
+      max-width: 100%;
+      height: auto;
+
+      .title {
+        font-size: 2.5rem;
+      }
+
+      .bottom {
+        margin-top: 2rem;
+      }
+    }
+
+    figure {
+      width: 100%;
+      margin: 0;
+      height: auto;
+    }
+  }
+
+  // ---- EXCERPT (single) ----
+  section#excerpt {
+    padding: 4rem var(--padding-body);
+
+    .wrapper {
+      width: 100%;
+
+      .chapter-title {
+        font-size: 2rem;
+      }
+    }
+  }
+
+  // ---- AUTHOR ----
+  section#author {
+    flex-direction: column;
+    padding: 4rem var(--padding-body);
+    align-items: center;
+
+    img {
+      width: 100%;
+      height: auto;
+      margin-right: 0;
+      margin-bottom: 3rem;
+    }
+
+    .text {
+      width: 100%;
+
+      .author-name {
+        font-size: 2.5rem;
+        margin-bottom: 2rem;
+      }
+    }
+  }
+
+  // ---- BUY ----
+  section#buy {
+    flex-direction: column;
+    padding: 4rem var(--padding-body);
+    align-items: center;
+    gap: 3rem;
+
+    .text {
+      width: 100%;
+      margin-left: 0;
+
+      .title {
+        font-size: 2.5rem;
+      }
+
+      .buy-links {
+        margin-top: 2.5rem;
+      }
+    }
+
+    img {
+      width: 100%;
+      height: auto;
+    }
+  }
+
+  // ---- FOOTER ----
+  body > footer {
+    padding: 3rem var(--padding-body);
+
+    header .title {
+      font-size: 2.5rem;
+    }
+
+    .contact {
+      width: 100%;
+      flex-direction: column;
+      gap: 2rem;
+      margin-top: 3rem;
+    }
+
+    .legal {
+      width: 100%;
+      margin-top: 3rem;
+    }
+  }
+}
--- a/assets/css/src/_reset.scss
+++ b/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);
+}
--- a/assets/css/src/_section_1-hero.scss
+++ b/assets/css/src/_section_1-hero.scss
@ -22,6 +22,7 @@ section#hero {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
+    line-height: 93%;
  }

  .subtitle {
--- a/assets/css/src/_section_10-buy.scss
+++ b/assets/css/src/_section_10-buy.scss
@ -26,10 +26,14 @@ section#buy {

    .buy-links {
      margin-top: 5rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1rem;
      li {
-        margin-bottom: 1rem;
        a {
-          display: inline-block;
+          width: 14rem;
+          display: block;
        }
      }
    }
@ -37,6 +41,8 @@ section#buy {
    .info {
      @include label-base;
      letter-spacing: 2.4px;
+      font-weight: 400;
+      margin-top: 1rem;
    }
  }

--- a/assets/css/src/_section_2-quote.scss
+++ b/assets/css/src/_section_2-quote.scss
@ -7,11 +7,14 @@ section#quote {

  blockquote {
    display: block;
-    width: min(100%, 40rem);
+    width: min(100%, 44rem);
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 1.25rem;
  }
+  cite {
+    font-weight: 500;
+  }
 }

 section#quote {
--- a/assets/css/src/_section_3-the_book.scss
+++ b/assets/css/src/_section_3-the_book.scss
@ -18,6 +18,7 @@ section#the-book {
    .text {
      font-weight: normal;
      font-size: var(--font-size-m);
+      font-weight: 500;
      @include text-paragraphs-spaced;
    }
  }
@ -35,6 +36,9 @@ section#the-book {
      @include label-base;
      margin-bottom: 0.5rem;
    }
+    .value {
+      font-weight: 500;
+    }
  }

  .claim-wrapper {
@ -52,6 +56,12 @@ section#the-book {
      .big {
        font-size: 2.5rem;
        margin-bottom: 1.25rem;
+        font-weight: 500;
+      }
+
+      .small {
+        font-weight: 500;
+        font-size: var(--font-size-m);
      }
    }
  }
--- a/assets/css/src/_section_4-excerpts.scss
+++ b/assets/css/src/_section_4-excerpts.scss
@ -12,7 +12,6 @@ section#excerpts {
    margin-bottom: 3rem;

    .label {
-      font-weight: 400;
      font-size: var(--font-size-s);
      text-transform: uppercase;
    }
@ -55,11 +54,13 @@ section#excerpts {

      .label {
        @include label-spaced;
+        font-weight: 400;
      }

      .text {
        font-size: var(--font-size-m);
        line-height: 140%;
+        font-weight: 500;
      }
    }
  }
--- a/assets/css/src/_section_5-handles.scss
+++ b/assets/css/src/_section_5-handles.scss
@ -1,5 +1,5 @@
 section#handles {
-  margin: 5rem var(--padding-body);
+  padding: 10rem 15vw;
  display: flex;
  flex-direction: column;
  align-items: center;
@ -37,11 +37,13 @@ section#handles {
      color: var(--color-blue);
      font-size: var(--font-size-s);

-      font-weight: 500;
-
      h4 {
        text-transform: uppercase;
        margin-bottom: 0.7rem;
+        font-weight: 500;
+      }
+      p {
+        font-weight: 400;
      }
    }
    .step:hover {
--- a/assets/css/src/_section_7-system.scss
+++ b/assets/css/src/_section_7-system.scss
@ -1,7 +1,7 @@
 section#system {
  display: flex;
  justify-content: space-between;
-  margin: 5rem var(--padding-body);
+  padding: 10rem 0 10rem min(15vw, 100%);

  .text {
    display: flex;
@ -31,6 +31,7 @@ section#system {
        li {
          list-style: disc;
          list-style-position: inside;
+          font-weight: 500;
        }
      }
      ul:not(:last-child) {
@ -40,10 +41,10 @@ section#system {
  }

  figure {
-    width: 55%;
-    height: 46vw;
+    width: 70vw;
+    height: 40vw;
    img {
-      object-fit: cover;
+      object-fit: contain;
      width: 100%;
      height: 100%;
    }
--- a/assets/css/src/_section_8-excerpt.scss
+++ b/assets/css/src/_section_8-excerpt.scss
@ -18,6 +18,7 @@ section#excerpt {
      margin: 3rem 0;
      font-size: var(--font-size-m);
      @include text-paragraphs-spaced;
+      font-weight: 500;

      p.reference {
        font-size: 0.75rem;
--- a/assets/css/style.css
+++ b/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;
@ -95,6 +103,7 @@ body {
  width: -moz-max-content;
  width: max-content;
  padding: 1rem 4rem;
+  font-weight: 500;
 }
 .blue-button.outlined {
  outline: 1px solid #fff;
@ -110,7 +119,7 @@ body {
  font-size: var(--font-size-s);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
 }
 .section-title.--centered {
  width: 100%;
@ -140,7 +149,7 @@ body {
 .label {
  font-size: 0.625rem;
  text-transform: uppercase;
-  font-weight: 400;
+  font-weight: 500;
  opacity: 0.8;
 }
 .label.--dimmed {
@ -164,14 +173,19 @@ body {
 }

 body > header {
+  box-sizing: border-box;
  position: sticky;
  z-index: 999;
  top: 0;
  left: 0;
-  width: 100%;
+  width: 100vw;
  padding: 1.5rem var(--padding-body);
  box-sizing: border-box;
 }
+body > header .nav-logo,
+body > header .burger {
+  display: none;
+}
 body > header ul {
  display: flex;
  justify-content: space-between;
@ -211,6 +225,7 @@ section#hero .title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
+  line-height: 93%;
 }
 section#hero .subtitle {
  font-weight: 400;
@ -230,11 +245,15 @@ section#quote {
 section#quote-full blockquote,
 section#quote blockquote {
  display: block;
-  width: min(100%, 40rem);
+  width: min(100%, 44rem);
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 1.25rem;
 }
+section#quote-full cite,
+section#quote cite {
+  font-weight: 500;
+}

 section#quote {
  margin: 0 var(--padding-body);
@ -265,6 +284,7 @@ section#the-book .summary-wrapper .title-wrapper .title {
 section#the-book .summary-wrapper .text {
  font-weight: normal;
  font-size: var(--font-size-m);
+  font-weight: 500;
 }
 section#the-book .summary-wrapper .text p:not(:last-child) {
  margin-bottom: 1.75rem;
@ -281,10 +301,13 @@ section#the-book .data-wrapper {
 section#the-book .data-wrapper .label {
  font-size: 0.625rem;
  text-transform: uppercase;
-  font-weight: 400;
+  font-weight: 500;
  opacity: 0.8;
  margin-bottom: 0.5rem;
 }
+section#the-book .data-wrapper .value {
+  font-weight: 500;
+}
 section#the-book .claim-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
@ -301,6 +324,11 @@ section#the-book .claim-wrapper .text {
 section#the-book .claim-wrapper .text .big {
  font-size: 2.5rem;
  margin-bottom: 1.25rem;
+  font-weight: 500;
+}
+section#the-book .claim-wrapper .text .small {
+  font-weight: 500;
+  font-size: var(--font-size-m);
 }

 section#excerpts {
@ -317,7 +345,6 @@ section#excerpts header {
  margin-bottom: 3rem;
 }
 section#excerpts header .label {
-  font-weight: 400;
  font-size: var(--font-size-s);
  text-transform: uppercase;
 }
@ -358,13 +385,15 @@ section#excerpts .swiper-slide .item {
 section#excerpts .swiper-slide .item .label {
  font-size: 0.625rem;
  text-transform: uppercase;
-  font-weight: 400;
+  font-weight: 500;
  opacity: 0.8;
  margin-bottom: 0.7rem;
+  font-weight: 400;
 }
 section#excerpts .swiper-slide .item .text {
  font-size: var(--font-size-m);
  line-height: 140%;
+  font-weight: 500;
 }
 section#excerpts .swiper-button-prev,
 section#excerpts .swiper-button-next {
@ -443,7 +472,7 @@ section#excerpts .swiper-pagination-bullet-active {
 }

 section#handles {
-  margin: 5rem var(--padding-body);
+  padding: 10rem 15vw;
  display: flex;
  flex-direction: column;
  align-items: center;
@ -458,7 +487,7 @@ section#handles header .title-wrapper .index {
  font-size: var(--font-size-s);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
  font-weight: 500;
 }
 section#handles header .title-wrapper .title {
@ -485,11 +514,14 @@ section#handles .path .step {
  border: 1px solid var(--color-blue);
  color: var(--color-blue);
  font-size: var(--font-size-s);
-  font-weight: 500;
 }
 section#handles .path .step h4 {
  text-transform: uppercase;
  margin-bottom: 0.7rem;
+  font-weight: 500;
+}
+section#handles .path .step p {
+  font-weight: 400;
 }
 section#handles .path .step:hover {
  background-color: var(--color-blue);
@ -505,7 +537,7 @@ section#handles .path .step:not(:last-child) {
 section#system {
  display: flex;
  justify-content: space-between;
-  margin: 5rem var(--padding-body);
+  padding: 10rem 0 10rem min(15vw, 100%);
 }
 section#system .text {
  display: flex;
@ -518,7 +550,7 @@ section#system .text .top .section-title {
  font-size: var(--font-size-s);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
 }
 section#system .text .top .title {
  font-family: "owners-xnarrow", sans-serif;
@ -535,17 +567,18 @@ section#system .text .top .info {
 section#system .text .bottom ul li {
  list-style: disc;
  list-style-position: inside;
+  font-weight: 500;
 }
 section#system .text .bottom ul:not(:last-child) {
  margin-bottom: 3rem;
 }
 section#system figure {
-  width: 55%;
-  height: 46vw;
+  width: 70vw;
+  height: 40vw;
 }
 section#system figure img {
-  -o-object-fit: cover;
-     object-fit: cover;
+  -o-object-fit: contain;
+     object-fit: contain;
  width: 100%;
  height: 100%;
 }
@ -562,7 +595,7 @@ section#excerpt .wrapper .section-title {
  font-size: var(--font-size-s);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
  width: 100%;
  text-align: center;
 }
@ -581,6 +614,9 @@ section#excerpt .wrapper .content {
 section#excerpt .wrapper .content p:not(:last-child) {
  margin-bottom: 1.75rem;
 }
+section#excerpt .wrapper .content {
+  font-weight: 500;
+}
 section#excerpt .wrapper .content p.reference {
  font-size: 0.75rem;
 }
@ -613,7 +649,7 @@ section#author .text .section-title {
  font-size: var(--font-size-s);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
 }
 section#author .text .author-name {
  font-family: "owners-xnarrow", sans-serif;
@ -646,7 +682,7 @@ section#buy .text .section-title {
  font-size: var(--font-size-s);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
 }
 section#buy .text .title {
  font-family: "owners-xnarrow", sans-serif;
@ -665,19 +701,23 @@ section#buy .text p:not(:last-child) {
 }
 section#buy .text .buy-links {
  margin-top: 5rem;
-}
-section#buy .text .buy-links li {
-  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
 }
 section#buy .text .buy-links li a {
-  display: inline-block;
+  width: 14rem;
+  display: block;
 }
 section#buy .text .info {
  font-size: 0.625rem;
  text-transform: uppercase;
-  font-weight: 400;
+  font-weight: 500;
  opacity: 0.8;
  letter-spacing: 2.4px;
+  font-weight: 400;
+  margin-top: 1rem;
 }
 section#buy img {
  width: 45%;
@ -686,8 +726,13 @@ section#buy img {
     object-fit: cover;
 }

+#presse {
+  scroll-margin-top: 0vh;
+}
+
 body > footer {
-  width: 100%;
+  width: 100vw;
+  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
@ -704,7 +749,7 @@ body > footer header .section-title {
  font-size: var(--font-size-s);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
-  font-weight: 400;
+  font-weight: 500;
  width: 100%;
  text-align: center;
 }
@ -733,8 +778,295 @@ body > footer .contact .item:not(:last-child) {
  margin-bottom: 2.5rem;
 }
 body > footer .legal {
+  font-size: 0.625rem;
+  text-transform: uppercase;
+  letter-spacing: 0.15rem;
+  text-align: center;
  width: 50rem;
  margin-top: 5rem;
  padding: 2.5rem 0 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  font-weight: 400;
+}
+
+body.no-scroll {
+  overflow: hidden;
+}
+
+@media (max-width: 930px) {
+  body > header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 3.5rem;
+    margin: 0;
+    border-radius: 0;
+    box-sizing: border-box;
+    padding: 1rem var(--padding-body);
+    z-index: 9999;
+  }
+  body > header nav {
+    display: flex;
+    align-items: center;
+    position: relative;
+    z-index: 2;
+  }
+  body > header nav .nav-logo {
+    display: block;
+    font-size: 1rem;
+    z-index: 2;
+  }
+  body > header nav .burger {
+    margin-left: auto;
+    width: 7.125rem;
+    height: 1.25rem;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    z-index: 2;
+  }
+  body > header nav .burger span {
+    display: block;
+    width: 100%;
+    height: 1px;
+    background-color: #fff;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+    transform-origin: center;
+  }
+  body > header nav ul {
+    position: fixed;
+    display: block;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100dvh;
+    background-color: var(--color-blue);
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 6rem var(--padding-body) 2rem;
+    box-sizing: border-box;
+    z-index: 1;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease-in-out;
+  }
+  body > header nav ul li {
+    width: 100%;
+  }
+  body > header nav ul li a {
+    display: block;
+    padding: 0.5rem 0;
+    font-size: 2.5rem;
+    font-weight: 400;
+  }
+  body > header nav ul li:first-child {
+    width: 100%;
+    font-size: 2.5rem;
+  }
+  body > header nav ul li:first-child a {
+    font-family: var(--font-narrow);
+    text-transform: uppercase;
+  }
+  body > header nav ul li:not(:first-child) {
+    font-family: var(--font-narrow);
+    font-size: 2rem;
+    text-transform: uppercase;
+    font-weight: 700;
+  }
+  body > header.nav-open nav ul {
+    opacity: 1;
+    pointer-events: all;
+  }
+  body > header.nav-open nav .burger span:nth-child(2) {
+    opacity: 0;
+  }
+  body > header.nav-open nav .burger span:first-child {
+    transform: translateY(0.55rem) rotate(10deg);
+  }
+  body > header.nav-open nav .burger span:last-child {
+    transform: translateY(-0.55rem) rotate(-10deg);
+  }
+  main {
+    padding-top: 3.5rem;
+  }
+  section {
+    scroll-margin-top: 5.8125rem;
+  }
+  section#hero {
+    height: auto;
+    min-height: 100vh;
+    text-align: center;
+    align-items: center;
+    padding: 4rem var(--padding-body) 3rem;
+    background-position: 74% -44vh;
+    background-size: 96vh;
+  }
+  section#hero .title {
+    font-size: 4rem;
+  }
+  section#hero .subtitle {
+    margin-bottom: 2rem;
+  }
+  section#hero #preorder-button {
+    position: static;
+  }
+  section#quote-full,
+  section#quote {
+    padding: 4rem var(--padding-body);
+  }
+  section#quote-full blockquote,
+  section#quote blockquote {
+    font-size: 1.5rem;
+  }
+  section#the-book {
+    padding: 4rem var(--padding-body);
+  }
+  section#the-book .summary-wrapper {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+  section#the-book .summary-wrapper .title-wrapper .title {
+    font-size: 2.5rem;
+  }
+  section#the-book .data-wrapper {
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    justify-content: center;
+  }
+  section#the-book .data-wrapper .data {
+    width: 40%;
+  }
+  section#the-book .claim-wrapper {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+  section#the-book .claim-wrapper img {
+    border-radius: var(--radius-section);
+  }
+  section#the-book .claim-wrapper .text .big {
+    font-size: 1.75rem;
+  }
+  section#excerpts {
+    padding: 4rem var(--padding-body);
+  }
+  section#excerpts header .title {
+    font-size: 2.5rem;
+  }
+  section#excerpts .swiper-slide .item {
+    width: 100%;
+    max-width: 20rem;
+    text-align: center;
+  }
+  section#handles {
+    margin: 3rem var(--padding-body);
+    padding: 0;
+  }
+  section#handles header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+  section#handles header .title-wrapper .title {
+    font-size: 2.5rem;
+  }
+  section#handles header .subtitle {
+    margin-right: 0;
+  }
+  section#handles .path {
+    width: 100%;
+    margin-top: 3rem;
+  }
+  section#handles .path .step {
+    width: 100%;
+  }
+  section#handles .path .step:nth-child(even) {
+    margin-left: 0;
+  }
+  section#system {
+    flex-direction: column;
+    margin: 3rem var(--padding-body);
+    padding: 0;
+    gap: 3rem;
+  }
+  section#system .text {
+    max-width: 100%;
+    height: auto;
+  }
+  section#system .text .title {
+    font-size: 2.5rem;
+  }
+  section#system .text .bottom {
+    margin-top: 2rem;
+  }
+  section#system figure {
+    width: 100%;
+    margin: 0;
+    height: auto;
+  }
+  section#excerpt {
+    padding: 4rem var(--padding-body);
+  }
+  section#excerpt .wrapper {
+    width: 100%;
+  }
+  section#excerpt .wrapper .chapter-title {
+    font-size: 2rem;
+  }
+  section#author {
+    flex-direction: column;
+    padding: 4rem var(--padding-body);
+    align-items: center;
+  }
+  section#author img {
+    width: 100%;
+    height: auto;
+    margin-right: 0;
+    margin-bottom: 3rem;
+  }
+  section#author .text {
+    width: 100%;
+  }
+  section#author .text .author-name {
+    font-size: 2.5rem;
+    margin-bottom: 2rem;
+  }
+  section#buy {
+    flex-direction: column;
+    padding: 4rem var(--padding-body);
+    align-items: center;
+    gap: 3rem;
+  }
+  section#buy .text {
+    width: 100%;
+    margin-left: 0;
+  }
+  section#buy .text .title {
+    font-size: 2.5rem;
+  }
+  section#buy .text .buy-links {
+    margin-top: 2.5rem;
+  }
+  section#buy img {
+    width: 100%;
+    height: auto;
+  }
+  body > footer {
+    padding: 3rem var(--padding-body);
+  }
+  body > footer header .title {
+    font-size: 2.5rem;
+  }
+  body > footer .contact {
+    width: 100%;
+    flex-direction: column;
+    gap: 2rem;
+    margin-top: 3rem;
+  }
+  body > footer .legal {
+    width: 100%;
+    margin-top: 3rem;
+  }
 }/*# sourceMappingURL=style.css.map */
--- a/assets/css/style.css.map
+++ b/assets/css/style.css.map
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@ -13,3 +13,4 @@
@import 'src/section_9-author.scss';
@import 'src/section_10-buy.scss';
@import 'src/footer.scss';
+@import 'src/mobile.scss';
--- a/assets/images/frederic-denjoy.jpeg
+++ b/assets/images/frederic-denjoy.jpeg
--- a/assets/images/frederic-denjoy.jpg
+++ b/assets/images/frederic-denjoy.jpg
--- a/assets/images/schema.png
+++ b/assets/images/schema.png
--- a/assets/js/script.js
+++ b/assets/js/script.js
@ -1,4 +1,23 @@
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', function () {
+  // ---- MOBILE NAV ----
+  const header = document.querySelector('body > header');
+  const burger = header.querySelector('.burger');
+  const navLinks = header.querySelectorAll('nav ul a');
+
+  burger.addEventListener('click', function () {
+    header.classList.toggle('nav-open');
+    document.body.classList.toggle('no-scroll');
+  });
+
+  navLinks.forEach(function (link) {
+    link.addEventListener('click', function () {
+      if (!header.classList.contains('nav-open')) return;
+      header.classList.remove('nav-open');
+      document.body.classList.remove('no-scroll');
+    });
+  });
+
+
  const excerptSwiper = new Swiper('.excerpts-swiper', {
    // Slides visibles et groupement
    slidesPerView: 3,
--- a/index.html
+++ b/index.html
@ -3,34 +3,80 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
+
+    <!-- SEO -->
+    <title>Le Courage du Réel — Frédéric Denjoy</title>
+    <meta
+      name="description"
+      content="Le Courage du Réel propose une ontologie du passage. Le réel n'est pas ce qui est, mais ce qui se traverse. Un livre de Frédéric Denjoy, aux Éditions Reconnaissance."
+    />
+    <meta name="author" content="Frédéric Denjoy" />
+    <link rel="canonical" href="https://lecouragedureel.com/" />
+
+    <!-- Open Graph -->
+    <meta property="og:type" content="book" />
+    <meta property="og:title" content="Le Courage du Réel — Frédéric Denjoy" />
+    <meta
+      property="og:description"
+      content="Le réel n'est pas ce qui est, mais ce qui se traverse. Une ontologie du passage. Ni développement personnel, ni traité académique."
+    />
+    <meta property="og:url" content="https://lecouragedureel.com/" />
+    <meta
+      property="og:image"
+      content="https://lecouragedureel.com/assets/images/le-courage-du-reel-cover.jpg"
+    />
+    <meta property="og:locale" content="fr_FR" />
+    <meta property="og:site_name" content="Le Courage du Réel" />
+    <meta property="book:author" content="Frédéric Denjoy" />
+    <meta property="book:isbn" content="978-2-487595-32-3" />
+    <meta property="book:release_date" content="2026" />
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Le Courage du Réel — Frédéric Denjoy" />
+    <meta
+      name="twitter:description"
+      content="Le réel n'est pas ce qui est, mais ce qui se traverse. Une ontologie du passage."
+    />
+    <meta
+      name="twitter:image"
+      content="https://lecouragedureel.com/assets/images/le-courage-du-reel-cover.jpg"
+    />
+
+    <!-- Styles -->
    <link rel="stylesheet" href="/assets/css/style.css" />
    <link rel="stylesheet" href="https://use.typekit.net/tnd1ymt.css" />
  </head>
  <body>
    <header class="blue-container">
      <nav>
+        <span class="nav-logo">Le courage du Réel</span>
+        <button class="burger" aria-label="Menu">
+          <span></span>
+          <span></span>
+          <span></span>
+        </button>
        <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>
@ -88,7 +134,7 @@
            <p>
              Le mal n'est pas moral : il est structurel. La vérité, l'amour,
              l'intelligence, le pouvoir ne sont pas ce que tu crois — et toi
-              non plus. De Platon à Lacan, ce livre met à nu ce qui ne
+              non plus. De Platon à Derrida, ce livre met à nu ce qui ne
              fonctionne plus. Voici venu le temps de construire.
            </p>
          </div>
@ -364,7 +410,7 @@

      <section id="author">
        <img
-          src="/assets/images/frederic-denjoy.jpg"
+          src="/assets/images/frederic-denjoy.jpeg"
          alt="Portrait de l'auteur Frédéric Denjoy"
        />
        <div class="text">
@ -409,7 +455,7 @@
                href="https://www.amazon.fr/COURAGE-DU-R%C3%89EL-Denjoy-Frederic/dp/B0GGYQN2FR"
                target="_blank"
                class="blue-button"
-                >Acheter - FNAC</a
+                >Acheter - Amazon</a
              >
            </li>
            <li>
@ -417,7 +463,7 @@
                href="https://editions-reconnaissance.fr/livre/le-courage-du-reel/"
                target="_blank"
                class="blue-button"
-                >Acheter - FNAC</a
+                >Précommander le livre</a
              >
            </li>
          </ul>
@ -428,6 +474,7 @@
          alt="Couverture du livre Le courage du réel"
        />
      </section>
+      <div id="presse"></div>
    </main>
    <footer class="blue-container">
      <header>
Author	SHA1	Message	Date
isUnknown	0fde6a64b8	adjust hero cover	2026-02-24 10:02:05 +01:00
isUnknown	f77c0cf47e	fix: make press nav anchor work with fixed footer - Move id="presse" from footer to empty div at end of main - Add scroll-margin-top: 100vh to force max scroll and reveal footer Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-23 19:23:35 +01:00
isUnknown	e2b3661686	chore: add .gitignore with .claude/ excluded Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-23 19:17:04 +01:00
isUnknown	4ad7073687	fix: rework mobile nav as fixed overlay, add 3-line burger - Nav menu is now a fixed fullscreen overlay (opacity fade) - Header stays at 3.5rem height, no height animation - Burger has 3 lines, middle fades out on open - Body scroll locked with overflow: hidden when menu open - Various mobile layout fixes (handles, system, footer padding) - Header full-width with no border-radius on mobile Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-23 19:05:31 +01:00
isUnknown	f7f3d0f0b5	feat: add mobile burger menu, SEO meta tags, and various fixes - Add burger menu with open/close animation and scroll lock - Add nav-logo element for mobile header - Hide nav links on mobile, reveal in fullscreen overlay - Add title, meta description, Open Graph and Twitter Card tags - Add canonical URL - Various SCSS adjustments (hero line-height, excerpt font-weight) - Fix asset paths Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-23 18:19:28 +01:00
isUnknown	f62ba6fbd7	feat: add mobile responsive styles (breakpoint 930px) Add _mobile.scss with responsive overrides for all sections: - Header nav wraps, hero auto-height, grids to single column - Handles path full-width, system/author/buy stacked vertically - Footer contact and legal full-width - Typography scaled down for mobile viewports Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-23 17:29:30 +01:00
isUnknown	53183a2445	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>	2026-02-23 17:07:54 +01:00