/* menu-artistes.css — brique « menu-artistes » (JulienWeb, 07/10/2026).
 * La liste des artistes au survol, collée sous l'en-tête. Grand écran avec souris seulement :
 * sous 992 px ou au doigt, la fenêtre au clic du thème reste telle quelle.
 *
 * --jws-ma-haut : distance du haut du <li> au bas de l'en-tête, posée par menu-artistes.js
 *                 (l'en-tête rétrécit au défilement). Sans script : 100 %, juste sous le mot.
 * --jws-ma-pont : hauteur du vide entre le mot et le panneau, que la souris doit pouvoir traverser.
 */
/* 12/10/2026 — le logo de l'artiste devant son nom (Ourida), sur tous les écrans : le rond indigo du thème
   (.artist-pastille-icon de style.css), 28 px. L'image arrive sans src, posée par le script à l'ouverture. */
.artists-menu .artist-pastille {
    display: flex;
    align-items: center;
    gap: 2px;
}

.artists-menu .jws-ma-logo {
    flex: none;
    width: 28px;
    height: 28px;
    margin-left: 8px;
    border-radius: 50%;
    background: #312783;
    object-fit: cover;
}

.artists-menu .jws-ma-logo:not([src]) {
    visibility: hidden;     /* pas d'icône d'image cassée avant l'ouverture, la place reste réservée */
}

@media (hover: hover) and (min-width: 992px) {

    .nav-main .menu-main > .menu-item > .artists-submenu {
        /* !important : à Échap, le scripts.js du thème fait un fadeOut() sur la liste dès qu'elle
           occupe de la place (visible ou non), et laisse un display: none en ligne. */
        display: block !important;
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: var(--jws-ma-haut, 100%);
        left: -16px;
        right: auto;
        transform: none;
        z-index: 1000;
        width: 480px;
        max-width: calc(100vw - 32px);
        max-height: none;
        overflow: visible; /* le pont dépasse vers le haut : c'est .artists-menu qui défile */
        background: #fff;
        border-top: 3px solid #F39200;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 14px 24px rgba(0, 0, 0, .28);
        text-align: left;
        transition: opacity .16s ease, visibility 0s linear .16s;
    }

    .nav-main .menu-main > .menu-item:hover > .artists-submenu,
    .nav-main .menu-main > .menu-item:focus-within > .artists-submenu,
    .nav-main .menu-main > .menu-item.jws-ma-ouvert > .artists-submenu {
        visibility: visible;
        opacity: 1;
        transition-delay: 0s;
    }

    /* Échap : fermé jusqu'à la sortie de la souris ou du focus, même survolé. */
    .nav-main .menu-main > .menu-item.jws-ma-ferme > .artists-submenu {
        visibility: hidden;
        opacity: 0;
        transition: none;
    }

    /* le pont : sans lui, la liste se referme pendant que la souris descend du mot au panneau */
    .nav-main .menu-main > .menu-item > .artists-submenu::before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: calc(var(--jws-ma-pont, 0px) + 3px);
    }

    .nav-main .menu-main > .menu-item > .artists-submenu > .artists-menu {
        column-count: 2;
        column-gap: 24px;
        padding: 10px 16px 14px;
        max-height: calc(100vh - var(--jw-hdr-h, 141px) - 24px);
        overflow-y: auto;
    }

    .nav-main .menu-main > .menu-item > .artists-submenu .artist-pastille {
        display: flex;      /* block jusqu'au 12/10 : le logo et le nom sur une ligne */
        padding: 3px 0;
        break-inside: avoid;
        border-bottom: 1px solid #eee;
    }

    /* le filet du dernier nom reste : les deux colonnes finissent pareil */
    .nav-main .menu-main > .menu-item > .artists-submenu .artist-pastille:last-child {
        border-bottom: 1px solid #eee;
    }

    .nav-main .menu-main > .menu-item > .artists-submenu .artist-pastille:focus-visible {
        outline: 2px solid #F39200;
        outline-offset: -2px;
    }
}

@media (hover: hover) and (min-width: 992px) and (prefers-reduced-motion: reduce) {
    .nav-main .menu-main > .menu-item > .artists-submenu {
        transition: none;
    }
}