.homepage-utile-menu {
    position: relative;
    display: inline-block;
}

.homepage-utile-menu summary {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    color: #f4f0e7;
    background: #10233d;
    cursor: pointer;
    font-weight: 900;
    font-size: clamp(0.84rem, 1vw, 0.98rem);
    line-height: 1.2;
    list-style: none;
    padding: 8px 10px;
    border-radius: 999px;
}

.homepage-utile-menu summary::-webkit-details-marker { display: none; }
.homepage-utile-menu summary::after { content: " ▾"; color: #d5ad62; }
.homepage-utile-menu summary:hover,
.homepage-utile-menu[open] summary { background: #18314f; color: #d5ad62; }
.homepage-utile-menu summary:focus-visible { outline: 3px solid #d5ad62; outline-offset: 3px; }

.homepage-utile-menu .nav-submenu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    left: 0;
    display: grid;
    min-width: 250px;
    padding: 8px;
    background: #18314f;
    border: 1px solid rgba(224, 189, 119, .45);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}

.homepage-utile-menu .nav-submenu a {
    color: #f4f0e7;
    background: transparent;
    text-decoration: none;
    font-weight: 900;
    font-size: clamp(0.84rem, 1vw, 0.98rem);
    line-height: 1.2;
    padding: 8px 10px;
    border-radius: 4px;
    white-space: normal;
}

.homepage-utile-menu .nav-submenu a:hover,
.homepage-utile-menu .nav-submenu a:focus-visible { background: rgba(255, 255, 255, .08); color: #d5ad62; }

@media (max-width: 700px) {
    .homepage-utile-menu .nav-submenu {
        max-width: calc(100vw - 36px);
        min-width: min(250px, calc(100vw - 36px));
    }
}