Fix main header display when menu is not expanded and toggle button active style

src/assets/css/src/2.blocks.button.css

@@ -35,7 +35,6 @@
 }
 
 .btn.active,
-.btn:active,
 .btn[aria-pressed="true"],
 input[type="checkbox"]:checked + .btn--primary {
   --btn-background: var(--color-primary-100);

src/components/Menu.vue

@@ -28,7 +28,8 @@
   </button>
   <div v-if="isExpanded" id="menu" class="flex | rounded-xl">
     <header class="w-full | flex">
-      <p>Nom du service</p>
+      <!-- TODO: à dynamiser en récupérant le $site->title() -->
+      <p>Design to Light</p>
     </header>
     <nav class="w-full | flow">
       <ul class="flex">
@@ -138,7 +139,7 @@ function isCurrent(navItem) {
 }
 </script>
 
-<style scoped>
+<style>
 button[aria-controls="menu"] {
   position: fixed;
   z-index: 10;
@@ -161,6 +162,9 @@ button[aria-controls="menu"][aria-expanded="false"] {
   padding: 1.125rem;
   transform: rotate(180deg);
 }
+button[aria-controls="menu"][aria-expanded="false"] + main > header {
+  margin-left: 4rem;
+}
 
 /* Menu */