From 974067d98675b896031dcda74668cbb83023ce2d Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Wed, 18 Mar 2026 18:48:50 +0100
Subject: [PATCH] =?UTF-8?q?Refactor:=20WhitePaper=20=E2=80=94=20redesign?=
 =?UTF-8?q?=20layout=20+=20suppression=20pr=C3=A9fixes=20wp-?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Nouveau layout desktop : flex row avec catch-area (label + titre) et form-area (formulaire)
- Mobile : height 100vh non-scrollable, overlay formulaire déclenché au clic
- Tablet : grid 2 colonnes
- Suppression des préfixes wp- sur toutes les classes (CSS scopé Svelte)
- white-paper.json.php : intro via ->inline() pour texte brut

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 site/templates/white-paper.json.php |   2 +-
 src/views/WhitePaper.svelte         | 310 ++++++++++++++++++----------
 2 files changed, 203 insertions(+), 109 deletions(-)

diff --git a/site/templates/white-paper.json.php b/site/templates/white-paper.json.php
index 852ae95..11ea537 100644
--- a/site/templates/white-paper.json.php
+++ b/site/templates/white-paper.json.php
@@ -2,7 +2,7 @@
 
 $specificData = [
     'published'  => $page->published()->toDate('d/m/Y'),
-    'intro'      => $page->intro()->value(),
+    'intro'      => $page->intro()->inline()->value(),
     'cover'      => $page->cover()->toFile()?->url(),
     'fileUrl'    => $page->downloadFile()->toFile()?->url(),
 ];
diff --git a/src/views/WhitePaper.svelte b/src/views/WhitePaper.svelte
index 7a56fd1..32b9c25 100644
--- a/src/views/WhitePaper.svelte
+++ b/src/views/WhitePaper.svelte
@@ -12,6 +12,7 @@
   let consent    = $state(false)
   let submitting = $state(false)
   let status     = $state(null) // null | 'success' | 'error'
+  let showForm   = $state(false)
 
   async function handleSubmit(e) {
     e.preventDefault()
@@ -41,45 +42,57 @@
 </script>
 
 <div class="white-paper">
-  <!-- Left column -->
-  <div class="wp-left">
-    <div class="wp-content">
-      <p class="wp-label">{t('white_paper_label')}</p>
-      <h1 class="wp-title">{data.title}</h1>
+  <div class="catch-area">
+    <!-- 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="wp-description">{data.intro}</p>
+        <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>
-    {#if data.cover}
-      <img src={data.cover} alt={data.title} class="wp-cover" />
-    {/if}
   </div>
 
-  <!-- Right column: download form -->
-  <div class="wp-right">
-    <div class="wp-form-card">
-      <p class="wp-form-intro">{t('wp_form_intro')}</p>
-      <form class="wp-form" onsubmit={handleSubmit}>
-        <div class="wp-form-row">
-          <input class="wp-input" type="text" placeholder={t('wp_firstname')} bind:value={firstName} required />
-          <input class="wp-input" type="text" placeholder={t('wp_lastname')} bind:value={lastName} required />
-        </div>
-        <input class="wp-input wp-input--full" type="text" placeholder={t('wp_company')} bind:value={company} required />
-        <input class="wp-input wp-input--full" type="text" placeholder={t('wp_role')} bind:value={role} required />
-        <input class="wp-input wp-input--full" type="email" placeholder={t('wp_email')} bind:value={email} required />
+  <!-- Cover image -->
+  {#if data.cover}
+    <img src={data.cover} alt={data.title} class="cover" />
+  {/if}
 
-        <label class="wp-consent">
+  <!-- Form area: right column on desktop, full-screen overlay on mobile -->
+  <div class="form-area" class:is-visible={showForm}>
+    <button class="form-close" onclick={() => showForm = false} aria-label="Fermer">✕</button>
+    <div class="form-card">
+      <p class="form-intro">{t('wp_form_intro')}</p>
+      <form class="form" onsubmit={handleSubmit}>
+        <div class="form-row">
+          <input class="input" type="text" placeholder={t('wp_firstname')} bind:value={firstName} required />
+          <input class="input" type="text" placeholder={t('wp_lastname')} bind:value={lastName} required />
+        </div>
+        <input class="input" type="text" placeholder={t('wp_company')} bind:value={company} required />
+        <input class="input" type="text" placeholder={t('wp_role')} bind:value={role} required />
+        <input class="input" type="email" placeholder={t('wp_email')} bind:value={email} required />
+
+        <label class="consent">
           <input type="checkbox" bind:checked={consent} required />
           <span>{t('wp_consent')}</span>
         </label>
 
         {#if status === 'success'}
-          <p class="wp-status wp-status--success">{t('wp_success')}</p>
+          <p class="status status--success">{t('wp_success')}</p>
         {:else if status === 'error'}
-          <p class="wp-status wp-status--error">{t('wp_error')}</p>
+          <p class="status status--error">{t('wp_error')}</p>
         {/if}
 
-        <button type="submit" class="wp-submit button" disabled={submitting || !consent}>
+        <button type="submit" class="submit button" disabled={submitting || !consent}>
           <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"/>
@@ -93,82 +106,89 @@
 
 <style>
   .white-paper {
-    height: 100vh;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    overflow: hidden;
-    padding-top: 8vh;
-  }
-
-  /* --- Left --- */
-  .wp-left {
-    position: relative;
+    color: var(--color-text);
+    padding: 8rem 5rem;
     display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    padding: 4rem 3rem 0 8vw;
-    overflow: hidden;
+    column-gap: 5rem;
   }
 
-  .wp-content {
-    position: relative;
-    z-index: 1;
+  .catch-area {
+    width: min(100%, 45vw);
   }
 
-  .wp-label {
+  .label {
+    margin-bottom: 1rem;
+    align-self: end;
     font-family: "Terminal", sans-serif;
     font-size: var(--font-size-paragraph);
     color: var(--color-primary);
     text-transform: uppercase;
-    margin-bottom: 1.5rem;
+    z-index: 1;
   }
 
-  .wp-title {
-    font-family: "Terminal", sans-serif;
-    font-size: clamp(2rem, 4vw, 3.5rem);
-    font-weight: 700;
+  /* ── Title + description + mobile trigger ── */
+  .text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1.5rem;
+    z-index: 1;
+  }
+
+  .title {
+    font-family: "Danzza bold", sans-serif;
+    font-size: var(--font-size-title-main);
+    font-weight: 400;
     text-transform: uppercase;
     line-height: 1.1;
-    margin-bottom: 2rem;
-    max-width: 600px;
   }
 
-  .wp-description {
+  .description {
     font-family: "Danzza", sans-serif;
     font-size: var(--font-size-paragraph);
-    line-height: 1.6;
     opacity: 0.8;
     max-width: 480px;
   }
 
-  .wp-cover {
-    position: absolute;
-    bottom: -5%;
-    left: 3rem;
-    width: 55%;
-    max-width: 380px;
+  /* Mobile trigger: hidden on desktop */
+  .trigger {
+    display: none;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .cover {
+    align-self: start;
+    width: 100%;
     height: auto;
     object-fit: contain;
     pointer-events: none;
+    z-index: 0;
   }
 
-  /* --- Right --- */
-  .wp-right {
+  /* ── Form area: desktop — right column ── */
+  .form-area {
+    margin-top: 2rem;
+    width: min(100%, 30vw);
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: center;
-    padding: 2rem 6vw 2rem 2rem;
+    z-index: 2;
   }
 
-  .wp-form-card {
+  /* Close button: hidden on desktop */
+  .form-close {
+    display: none;
+  }
+
+  .form-card {
     background: #0b0b18;
     border-radius: 4px;
     padding: 2.5rem;
     width: 100%;
-    max-width: 500px;
   }
 
-  .wp-form-intro {
+  .form-intro {
     font-family: "Danzza", sans-serif;
     font-size: var(--font-size-paragraph);
     line-height: 1.5;
@@ -176,19 +196,19 @@
     margin-bottom: 2rem;
   }
 
-  .wp-form {
+  .form {
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
   }
 
-  .wp-form-row {
+  .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 0.75rem;
   }
 
-  .wp-input {
+  .input {
     background: rgba(255, 255, 255, 0.08);
     border: 1px solid rgba(255, 255, 255, 0.25);
     color: #fff;
@@ -199,16 +219,16 @@
     transition: border-color 0.2s;
   }
 
-  .wp-input:focus {
+  .input:focus {
     outline: none;
     border-color: var(--color-primary);
   }
 
-  .wp-input::placeholder {
+  .input::placeholder {
     color: rgba(255, 255, 255, 0.5);
   }
 
-  .wp-consent {
+  .consent {
     display: flex;
     align-items: flex-start;
     gap: 0.75rem;
@@ -216,7 +236,7 @@
     margin-top: 0.5rem;
   }
 
-  .wp-consent input[type="checkbox"] {
+  .consent input[type="checkbox"] {
     flex-shrink: 0;
     width: 18px;
     height: 18px;
@@ -225,94 +245,168 @@
     cursor: pointer;
   }
 
-  .wp-consent span {
+  .consent span {
     font-family: "Danzza", sans-serif;
     font-size: var(--font-size-paragraph-small);
     color: rgba(255, 255, 255, 0.75);
     line-height: 1.4;
   }
 
-  .wp-submit {
+  .submit {
     margin-top: 1rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    align-self: flex-start;
+    width: 100%;
+    justify-content: center;
   }
 
-  .wp-submit:disabled {
+  .submit:disabled {
     opacity: 0.5;
     cursor: default;
   }
 
-  .wp-status {
+  .status {
     padding: 0.5rem 0.75rem;
     font-family: "Danzza", sans-serif;
     font-size: var(--font-size-paragraph-small);
     border-radius: 2px;
   }
 
-  .wp-status--success {
+  .status--success {
     background: rgba(4, 254, 160, 0.15);
     color: var(--color-primary);
   }
 
-  .wp-status--error {
+  .status--error {
     background: rgba(255, 107, 107, 0.15);
     color: #ff6b6b;
   }
 
-  /* --- Mobile --- */
+  /* ── Mobile ── */
   @media (max-width: 700px) {
     .white-paper {
-      grid-template-columns: 1fr;
-      grid-template-rows: auto 1fr;
-      height: auto;
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      overflow: hidden;
+      padding: 6vh 1.25rem 0;
+      position: relative;
+    }
+
+    .label {
+      font-size: var(--font-size-paragraph-small);
+      text-align: center;
+      margin-bottom: 1rem;
+    }
+
+    .text {
+      flex: 1;
+      align-items: center;
+      text-align: center;
+      gap: 1rem;
+      overflow: hidden;
+    }
+
+    .title {
+      font-size: clamp(2rem, 10vw, 3.5rem);
+    }
+
+    .description {
+      max-width: 100%;
+      font-size: var(--font-size-paragraph-small);
+    }
+
+    .trigger {
+      display: flex;
+      width: 100%;
+      justify-content: center;
+      margin-top: auto;
+    }
+
+    .cover {
+      position: absolute;
+      bottom: -10%;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 75%;
+      max-width: 300px;
+      z-index: 0;
+      pointer-events: none;
+    }
+
+    /* Form overlay */
+    .form-area {
+      display: none;
+      position: fixed;
+      inset: 0;
+      z-index: 100;
+      background: #0b0b18;
+      flex-direction: column;
+      padding: 1.5rem 1.25rem;
       overflow-y: auto;
-      padding-top: 6vh;
     }
 
-    .wp-left {
-      padding: 2rem 1.25rem 0;
-      min-height: 300px;
+    .form-area.is-visible {
+      display: flex;
     }
 
-    .wp-cover {
-      position: static;
-      width: 60%;
-      margin: 2rem auto 0;
+    .form-close {
       display: block;
+      align-self: flex-end;
+      background: none;
+      border: none;
+      color: #fff;
+      font-size: 1.25rem;
+      cursor: pointer;
+      padding: 0.25rem 0.5rem;
+      margin-bottom: 1rem;
     }
 
-    .wp-right {
-      padding: 2rem 1.25rem;
+    .form-card {
+      background: none;
+      padding: 0;
+      flex: 1;
     }
 
-    .wp-form-card {
-      padding: 1.5rem;
-    }
-
-    .wp-form-row {
-      grid-template-columns: 1fr;
+    .submit {
+      margin-top: auto;
     }
   }
 
-  /* --- Tablet --- */
+  /* ── Tablet ── */
   @media (min-width: 701px) and (max-width: 912px) {
     .white-paper {
-      grid-template-columns: 1fr;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
       grid-template-rows: auto 1fr;
-      height: auto;
-      overflow-y: auto;
+      height: 100vh;
+      padding: 6vh 2rem 2rem;
+      gap: 1rem 2rem;
     }
 
-    .wp-left {
-      padding: 3rem 2rem 0;
-      min-height: 250px;
+    .label {
+      grid-column: 1;
+      grid-row: 1;
     }
 
-    .wp-right {
-      padding: 2rem;
+    .text {
+      grid-column: 1;
+      grid-row: 2;
+    }
+
+    .cover {
+      display: none;
+    }
+
+    .form-area {
+      grid-column: 2;
+      grid-row: 1 / span 2;
+      align-items: flex-start;
+    }
+
+    .trigger {
+      display: none;
     }
   }
 </style>