header nav ul li.active > button, header nav ul li.active > a {
    background: var(--color-secondary);
    @apply px-4 py-2 rounded-2xl;
    color: var(--color-primary) !important;
}


@utility menu-dropdown {
    @apply absolute left-0 mt-8 shadow-amber-50 shadow-xs bg-light-dark border border-primary rounded-md origin-top transform opacity-0 pointer-events-none transition-all duration-200 ease-out;
}

header {
    nav {
        button {
            color: var(--color-primary);
            cursor: pointer;

            &:hover {
                opacity: 0.85;
            }
        }
        ul.menu-dropdown {
            li > a {
                @apply px-4 py-2 block;
                white-space: nowrap;

                a:hover {
                    @apply bg-light-dark;
                    color: #333 !important;
                }
            }
            li.active {
                > a {
                    @apply bg-light-dark;
                    color: #333 !important;
                }
            }
        }
    }
}

/* État fermé */
@utility menu-open {
    @apply opacity-100 pointer-events-auto;
}

header nav li a {
    @apply px-4 py-2;
}