header : nav mobile en accordéon + bloc characters dédié

- La nav passe en display:grid / grid-template-rows: 0fr avec
  transition, pour un dépliage animé jusqu'à 1fr sur .open (au
  lieu de la hauteur fixe du header).
- .characters-mobile reprend le SVG des personnages hors nav,
  affiché uniquement sous 1000px pendant que li.characters
  (nav desktop) est masqué à cette largeur.

assets/css/src/_header.scss

@@ -46,6 +46,16 @@
       }
     }
   }
+
+  .characters-mobile {
+    display: none;
+    justify-content: center;
+
+    svg {
+      width: var(--char-size);
+      height: auto;
+    }
+  }
   .top {
     display: flex;
     justify-content: flex-end;

assets/css/src/_responsive.scss

@@ -17,19 +17,28 @@
   .main-header {
     transition: height 0.3s var(--curve);
     nav {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows 0.4s ease-in-out;
+
+      > * {
+        overflow: hidden;
+      }
+
       ul {
-        justify-content: center;
-        li {
-          &.characters {
-            margin: 0;
-          }
-          &:not(.characters) {
-            display: none;
-          }
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        li.characters {
+          display: none;
         }
       }
     }
 
+    .characters-mobile {
+      display: flex;
+    }
+
     button.toggle-mobile-nav {
       font-family: var(--font-sans-serif);
       font-weight: bold;
@@ -41,7 +50,9 @@
     }
 
     &.open {
-      height: 100vh;
+      nav {
+        grid-template-rows: 1fr;
+      }
     }
   }
 }

assets/css/style.css

@@ -290,6 +290,14 @@ main {
   width: var(--char-size);
   height: auto;
 }
+.main-header .characters-mobile {
+  display: none;
+  justify-content: center;
+}
+.main-header .characters-mobile svg {
+  width: var(--char-size);
+  height: auto;
+}
 .main-header .top {
   display: flex;
   justify-content: flex-end;
@@ -854,15 +862,25 @@ main {
   .main-header {
     transition: height 0.3s var(--curve);
   }
+  .main-header nav {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.4s ease-in-out;
+  }
+  .main-header nav > * {
+    overflow: hidden;
+  }
   .main-header nav ul {
-    justify-content: center;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
   }
   .main-header nav ul li.characters {
-    margin: 0;
-  }
-  .main-header nav ul li:not(.characters) {
     display: none;
   }
+  .main-header .characters-mobile {
+    display: flex;
+  }
   .main-header button.toggle-mobile-nav {
     font-family: var(--font-sans-serif);
     font-weight: bold;
@@ -872,8 +890,8 @@ main {
     top: 1rem;
     right: 1rem;
   }
-  .main-header.open {
-    height: 100vh;
+  .main-header.open nav {
+    grid-template-rows: 1fr;
   }
 }
 @media screen and (max-width: 800px) {

site/snippets/header.php

@@ -6,6 +6,11 @@
         Hecq
       </h1>
     </a>
+    <div class="characters-mobile" style="--char-size: <?= $page->intendedTemplate() == 'event' ? '110' : '191' ?>px">
+      <a href="<?= $site->url() ?>">
+        <?= svg('assets/images/characters/characters-no-outfit.svg') ?>
+      </a>
+    </div>
     <nav>
       <ul>
         <li>