/* Menus déroulants du header et du footer. Fichier à part : le CSS du thème est compilé par Vite. */

#app-header { z-index: 40; }
#app-footer-1 { position: relative; z-index: 10; }

.menu-parent { position: relative; }
.menu-parent > button { display: flex; align-items: center; gap: .5rem; color: inherit; text-transform: inherit; cursor: pointer; }
.menu-parent > button::after { content: ""; width: .45rem; height: .45rem; margin-top: -.2rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }

.menu-parent > .sub-menu { position: absolute; top: calc(100% + .75rem); left: 50%; min-width: 15rem; padding: .5rem; border-radius: 1rem; background: #fff; color: var(--color-primary); box-shadow: 0 .75rem 2rem rgb(0 0 0 / .15); opacity: 0; visibility: hidden; transform: translateX(-50%); transition: opacity .2s ease, visibility .2s ease; }
.menu-parent > .sub-menu::before { content: ""; position: absolute; inset: -.75rem 0 100%; }
.menu-parent:hover > .sub-menu, .menu-parent:focus-within > .sub-menu { opacity: 1; visibility: visible; }
.menu-parent > .sub-menu a { display: block; padding: .75rem 1rem; border-radius: .6rem; font-size: var(--text-base); font-weight: 700; text-align: center; white-space: nowrap; }
.menu-parent > .sub-menu a:hover, .menu-parent > .sub-menu a:focus-visible { background: #DBDAC9; }

#app-mobile-header-menu .sub-menu { display: flex; flex-direction: column; gap: .75rem; margin-top: .75rem; font-size: .85em; font-weight: 400; }