redesign home with edito

assets/css/src/article.css

@@ -1,3 +1,4 @@
 article .content {
+  scroll-margin-block-start: calc(var(--unit--vertical) * 6);
   margin-top: calc(var(--unit--vertical) * 2);
 }

assets/css/src/header.css

@@ -49,14 +49,6 @@ body[data-template="home"] {
   display: flex;
   flex-direction: column;
 }
-.page-cover .edito {
-  max-height: 43svh;
-  overflow: auto;
-  margin-top: var(--unit--vertical);
-  box-sizing: border-box;
-  border-top: 1px solid #fff;
-  border-bottom: 1px solid #fff;
-}
 
 .page-cover .text-wrapper {
   height: 100%;

site/blueprints/site.yml

@@ -4,6 +4,9 @@ tabs:
   contentTab:
     label: Contenu
     fields:
+      subtitle:
+        label: Sous-titre
+        type: text
       edito:
         label: Éditorial
         type: writer

site/templates/home.php

@@ -1,25 +1,24 @@
 <?php snippet('header') ?>
 
 <main x-data="{ isEditoOpen: false }">
-  <?php snippet('cover', slots: true) ?>
+  <article>
+    <?php snippet('cover', slots: true) ?>
     <?php slot('title') ?>
-    <div class="title-center">
-      <button @click="isEditoOpen = !isEditoOpen">
-        <h2>
-          critique des arts<br>
-          et des techniques<br>
-        </h2>
-        <button 
-          class="main-edito-btn | toggle-btn left"
-          :class="isEditoOpen ? 'open' : 'close'"
-        >édito</button>
-      </button>
-    </div>
-    <div x-show="isEditoOpen" class="edito">
+    <a 
+      href="#main-edito" 
+      class="no-line" 
+      @click="isEditoOpen = true"
+    >
+    <h2 class="main-title <?= setTitleFontSizeClass($site->subtitle()) ?>"><?= $site->subtitle() ?></h2>
+      <p 
+        class="main-edito-btn | toggle-btn left"
+      >édito</p>
+    </button>
+    <?php endslot() ?>
+    <?php endsnippet() ?>
+    <div x-show="isEditoOpen" id="main-edito" class="content">
       <?= $site->edito() ?>
     </div>
-    <?php endslot() ?>
-  <?php endsnippet() ?>
-  <?php snippet('nav') ?>
+  </article>
 </main>
 <?php snippet('footer') ?>