expertise : fix title custom marks implementation

site/templates/expertise.json.php

@@ -1,7 +1,7 @@
 <?php
 
 $specificData = [
-  'pageTitle'              => $page->writer()->value(),
+  'pageTitle'              => $page->writer()->inline()->value(),
   'backgroundVideo'        => $page->backgroundVideo()->toFile()?->url(),
   'backgroundVideoReverse' => $page->backgroundVideoReverse()->toFile()?->url(),
   'items'                  => $page->body()->toBlocks()->filter(fn($b) => $b->type() === 'text')->map(fn($block) => [

src/styles/form.css

@@ -0,0 +1,17 @@
+.input {
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 0.3rem;
+  color: #fff;
+  font-family: "Danzza", sans-serif;
+  font-size: var(--font-size-paragraph);
+  padding: 0.875rem 1rem;
+  width: 100%;
+  transition: border-color 0.2s;
+}
+
+@media screen and (max-width: 700px) {
+  .input {
+    padding: 0.6rem 1rem;
+  }
+}

src/styles/index.css

@@ -1,9 +1,10 @@
 /* Main styles entry point */
-@import './variables.css';
+@import "./variables.css";
-@import './reset.css';
+@import "./reset.css";
-@import './fonts.css';
+@import "./fonts.css";
-@import './layout.css';
+@import "./layout.css";
-@import './collection.css';
+@import "./collection.css";
-@import './buttons.css';
+@import "./buttons.css";
-@import './cursor.css';
+@import "./cursor.css";
-@import './utils.css';
+@import "./form.css";
+@import "./utils.css";

src/views/Expertise.svelte

@@ -258,7 +258,7 @@
   <div class="vertical-line-end"                 aria-hidden="true"></div>
 
   <!-- Title -->
-  <h2 class="expertise-title font-face-terminal">
+  <h2 class="expertise-title">
     {@html data?.pageTitle ?? ''}
   </h2>
 

src/views/WhitePaper.svelte

@@ -51,7 +51,7 @@
   }
 </script>
 
-<div class="white-paper">
+<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>
@@ -79,7 +79,6 @@
 
   <!-- 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>
     {#if status === 'success'}
       <div class="thank-you">
         <img src="/assets/img/smiley.svg" alt="" class="thank-you-smiley" aria-hidden="true" />
@@ -226,17 +225,6 @@
     gap: 0.75rem;
   }
 
-  .input {
-    background: rgba(255, 255, 255, 0.08);
-    border: 1px solid rgba(255, 255, 255, 0.25);
-    color: #fff;
-    font-family: "Danzza", sans-serif;
-    font-size: var(--font-size-paragraph);
-    padding: 0.875rem 1rem;
-    width: 100%;
-    transition: border-color 0.2s;
-  }
-
   .input:focus {
     outline: none;
     border-color: var(--color-primary);
@@ -341,15 +329,18 @@
   /* ── Mobile ── */
   @media (max-width: 700px) {
     .white-paper {
-      display: block;
-      height: 100vh;
-      overflow: hidden;
-      padding: 6rem 0;
       position: relative;
+      height: 100vh;
+      padding: 0;
+      
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
     }
 
     .catch-area {
       width: auto;
+      margin-bottom: 10rem;
     }
 
     .label {
@@ -392,20 +383,29 @@
       pointer-events: none;
     }
 
-    /* Form overlay */
+    /* Quand le formulaire est affiché : masque le contenu principal */
+    .show-form .catch-area,
+    .show-form .cover {
+      display: none;
+    }
+
+    /* Formulaire in-flow dans la slide (pas d'overlay fixe) */
     .form-area {
       display: none;
-      position: fixed;
-      inset: 0;
-      z-index: 100;
-      background: #0b0b18;
-      flex-direction: column;
-      padding: 1.5rem 1.25rem;
-      overflow-y: auto;
     }
 
     .form-area.is-visible {
+      margin: 0;
       display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: fit-content;
+      padding: 1.5rem;
+      overflow-y: auto;
+    }
+
+    .form-intro {
+      font-size: var(--font-size-paragraph-mobile);
     }
 
     .form-close {
@@ -413,21 +413,25 @@
       align-self: flex-end;
       background: none;
       border: none;
-      color: #fff;
+      color: rgba(255,255,255,0.5);
       font-size: 1.25rem;
       cursor: pointer;
-      padding: 0.25rem 0.5rem;
+      padding: 0.5rem;
-      margin-bottom: 1rem;
+      margin-bottom: 0.5rem;
     }
 
     .form-card {
-      background: none;
       padding: 0;
       flex: 1;
     }
 
+    .consent span {
+      font-size: var(--font-size-paragraph-small-mobile);
+    }
+
     .submit {
-      margin-top: auto;
+      margin-top: 1.5rem;
+      width: 100%;
     }
   }