From c476ed0761d6618e92ed9eb6fe20615f6c860a63 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Wed, 22 Apr 2026 15:39:37 +0200
Subject: [PATCH] white-paper : cover responsive positioning - refs #69

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/views/WhitePaper.svelte | 59 ++++++++++++++++++++++---------------
 1 file changed, 35 insertions(+), 24 deletions(-)

diff --git a/src/views/WhitePaper.svelte b/src/views/WhitePaper.svelte
index b02d939..7d430ad 100644
--- a/src/views/WhitePaper.svelte
+++ b/src/views/WhitePaper.svelte
@@ -53,30 +53,31 @@
 
 <div class="white-paper" class:show-form={showForm}>
   <div class="catch-area">
-    <!-- Label — separate so form can align with title -->
-    <p class="label">{t('white_paper_label')}</p>
+    <div class="catch-area__top">
+      <!-- Label — separate so form can align with title -->
+      <p class="label">{t('white_paper_label')}</p>
 
-    <!-- Title + description + mobile trigger -->
-    <div class="text">
-      <h1 class="title">{data.title}</h1>
-      {#if data.intro}
-        <p class="description">{data.intro}</p>
-      {/if}
-      <button class="trigger button" onclick={() => showForm = true}>
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-          <path d="M12 16L7 11H10V4H14V11H17L12 16Z" fill="currentColor"/>
-          <path d="M5 20H19V18H5V20Z" fill="currentColor"/>
-        </svg>
-        {t('wp_download')}
-      </button>
+      <!-- Title + description + mobile trigger -->
+      <div class="text">
+        <h1 class="title">{data.title}</h1>
+        {#if data.intro}
+          <p class="description">{data.intro}</p>
+        {/if}
+        <button class="trigger button" onclick={() => showForm = true}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path d="M12 16L7 11H10V4H14V11H17L12 16Z" fill="currentColor"/>
+            <path d="M5 20H19V18H5V20Z" fill="currentColor"/>
+          </svg>
+          {t('wp_download')}
+        </button>
+      </div>
     </div>
+    <!-- Cover image -->
+    {#if data.cover}
+      <img src={data.cover} alt={data.title} class="cover" />
+    {/if}
   </div>
 
-  <!-- Cover image -->
-  {#if data.cover}
-    <img src={data.cover} alt={data.title} class="cover" />
-  {/if}
-
   <!-- Form area: right column on desktop, full-screen overlay on mobile -->
   <div class="form-area" class:is-visible={showForm}>
     {#if status === 'success'}
@@ -124,11 +125,17 @@
   .white-paper {
     color: var(--color-text);
     padding: 8rem 5rem;
+    padding-bottom: 0;
     display: flex;
     justify-content: space-between;
+    height: 100vh;
+    overflow: hidden;
   }
 
   .catch-area {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
     width: 45vw;
   }
 
@@ -174,9 +181,10 @@
   }
 
   .cover {
-    position: absolute;
-    bottom: 0;
-    width: 90vh;
+    height: 23rem;
+    object-fit: cover;
+    object-position: top;
+    transform: scale(1.2);
     z-index: -1;
   }
 
@@ -185,6 +193,9 @@
     background: #000;
     margin-top: 2rem;
     width: 30vw;
+    height: 40rem;
+    max-height: 65vh;
+    overflow: auto;
     align-self: stretch;
     display: flex;
     align-items: flex-start;
@@ -277,7 +288,7 @@
 
   .submit:disabled {
     opacity: 0.5;
-    cursor: default;
+    cursor: none;
   }
 
   .status {