Fix button inconsistencies and macOS layout shifts

This commit fixes layout shifts experienced in macOS Safari when
hovering over top menu items. Instead of making text bold — which was
causing layout shifts — the hover effect now changes the text color.
This ensures a consistent UI across different browsers and platforms.

Additionally, this commit fixes the styling of the privacy button
located in the bottom right corner. Previously styled as an `<a>`
element, it is now correctly represented as a `<button>`.

Furthermore, the commit enhances HTML conformity and accessibility by
correctly using `<button>` and `<a>` tags instead of relying on click
interactions on `<span>` elements.

This commit introduces `FlatButton` Vue component and a new
`flat-button` mixin. These centralize button usage and link styles,
aligning the hover/touch reactions of buttons across the application,
thereby creating a more consistent user interface.

src/presentation/components/Shared/FlatButton.vue

@@ -0,0 +1,73 @@
+<template>
+  <!-- Use `button` instead of DIV as it is semantically correct and accessibility best-practice -->
+  <button
+    v-non-collapsing
+    type="button"
+    class="flat-button"
+    :class="{
+      disabled: disabled,
+    }"
+    @click="onClicked"
+  >
+    <AppIcon v-if="icon" :icon="icon" />
+    <span v-if="label">{{ label }}</span>
+  </button>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { NonCollapsing } from '@/presentation/components/Scripts/View/Cards/NonCollapsingDirective';
+import { IconName } from '@/presentation/components/Shared/Icon/IconName';
+import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
+
+export default defineComponent({
+  components: { AppIcon },
+  directives: { NonCollapsing },
+  props: {
+    label: {
+      type: String,
+      default: undefined,
+      required: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+    icon: {
+      type: String as PropType<IconName | undefined>,
+      default: undefined,
+      required: false,
+    },
+  },
+  emits: [
+    'click',
+  ],
+  setup(props, { emit }) {
+    function onClicked() {
+      if (props.disabled) {
+        return;
+      }
+      emit('click');
+    }
+    return { onClicked };
+  },
+});
+
+</script>
+
+<style lang="scss" scoped>
+@use "@/presentation/assets/styles/main" as *;
+
+.flat-button {
+  display: inline-flex;
+  gap: 0.5em;
+  font-family: $font-normal;
+  &.disabled {
+    @include flat-button($disabled: true);
+  }
+  &:not(.disabled) {
+    @include flat-button($disabled: false);
+  }
+}
+</style>