ajustement home filters

assets/css/src/_generic.scss

@@ -9,8 +9,9 @@
 }
 
 .bottom-tab--invert {
-  background-color: #000;
+  background-color: var(--color-beige);
-  color: #fff;
+  color: #000;
+  border: var(--border);
 }
 
 .bottom-tab:not(.bottom-tab--invert) {

assets/css/src/_header.scss

@@ -102,32 +102,6 @@ display: none;
     }
   }
 
-  .filters {
-    position: absolute;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    gap: 0.7rem;
-    bottom: calc(-2.5rem);
-
-    button {
-      transform: translateY(0rem);
-      transition: background-color 0.2s var(--curve),
-        transform 0.3s var(--curve);
-
-      &:hover {
-        transform: translateY(0.5rem) !important;
-      }
-
-      &.active {
-        transform: translateY(0rem);
-        background-color: #000;
-        color: #fff;
-        outline: 2px solid var(--color-beige);
-      }
-    }
-  }
-
   .header-menu {
     not * {
       font-weight: 600;

assets/css/src/pages/_agenda.scss

@@ -15,7 +15,6 @@
         button {
           font-family: var(--font-sans);
           font-size: var(--font-size-L);
-          font-weight: 600;
 
           &.active {
             text-decoration: underline;
@@ -45,7 +44,8 @@
         font-weight: 500;
 
         button {
-          font-size: 2rem;
+          font-size: inherit;
+          font-family: var(--font-serif);
         }
       }
 

assets/css/src/pages/_events.scss

@@ -1,8 +1,32 @@
 [data-template="events"] {
+  .filters {
+    position: relative;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    gap: 0.7rem;
+    bottom: calc(-2.5rem);
+
+    button {
+      transform: translateY(0rem);
+      transition: background-color 0.2s var(--curve),
+        transform 0.3s var(--curve);
+        padding: 0.5rem 0.9rem;
+        border-radius: var(--border-radius);
+
+      &.active {
+        transform: translateY(0rem);
+        background-color: #000;
+        color: #fff;
+        outline: 2px solid var(--color-beige);
+      }
+    }
+  }
+
   main {
     .events-grid {
 	box-sizing: border-box;
-	padding: 0 2rem;
+	padding: 2rem;
 	padding-top: 9rem;
 	width: 100%;
 	display: grid;
@@ -10,6 +34,7 @@
 	align-items: flex-end;
 	gap: 2rem;
 
+  
 
       .event-card {
         h2 {

site/snippets/header.php

@@ -28,11 +28,5 @@
       </nav>
     </div>
 
-    <?php if ($page->intendedTemplate() == 'events'): ?>
-      <div class="filters">
-        <button class="filter bottom-tab bottom-tab--invert" data-target="inside-company" title="filtrer">compagnie</button>
-        <button class="filter bottom-tab bottom-tab--invert" data-target="outside-company" title="filtrer">hors compagnie</button>
-      </div>
-    <?php endif ?>
   </header>
   <main>

site/templates/events.php

@@ -1,6 +1,11 @@
 <?php snippet('head') ?>
 <?php snippet('header') ?>
 
+      <div class="filters">
+        <button class="filter bottom-tab bottom-tab--invert" data-target="inside-company" title="filtrer">compagnie</button>
+        <button class="filter bottom-tab bottom-tab--invert" data-target="outside-company" title="filtrer">hors compagnie</button>
+      </div>
+
 <ul class="events-grid">
   <?php foreach ($page->children() as $event): ?>
       <li class="event-card" data-company="<?= $event->isFromCompany() ?>">