@charset "UTF-8";
/* ---------------------------------------------------------------------------------------------
   agenda-filtres.css — les pastilles de filtre par artiste de la page Agenda (/event/). Brique
   « agenda-filtres », JulienWeb, 04/10/2026. Chargée sur cette page seulement.

   Le dessin est celui des pastilles de l'accueil (assets/agenda-home.css, règles sous .agenda-home,
   qui ne sont pas servies ici) : mêmes mesures, mêmes couleurs. Les pastilles gardent la classe
   .agenda-chip du thème, que le tableau « Qui joue quand » et la carte reconnaissent ; elles ne sont
   stylées ici que sous .jws-agenda-filtres.
   --------------------------------------------------------------------------------------------- */

.jws-agenda-filtres {
    margin: 0 0 14px;
    padding: 12px 14px 8px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 4px;
}

/* 12/10 : sous la carte, dans son propre conteneur */
.jws-agenda-filtres__cadre {
    margin-top: 24px;
    margin-bottom: 24px;
}

.jws-agenda-filtres[hidden],
.jws-agenda-filtres [hidden] {
    display: none;
}

.jws-agenda-filtres__ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
}

.jws-agenda-filtres .agenda-chip {
    font: inherit;
    font-size: .8em;
    line-height: 1;
    min-height: 24px;
    padding: 6px 10px;
    border: 1px solid var(--jws-indigo, #312783);
    border-radius: 3px;
    background: #fff;
    color: var(--jws-indigo, #312783);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.jws-agenda-filtres .agenda-chip small {
    font-size: .8em;
    opacity: .7;
    margin-left: 2px;
}

.jws-agenda-filtres .agenda-chip:hover {
    background: #eef0f7;
}

/* L'état actif se dit par le fond plein ET l'anneau, pas par la couleur seule. */
.jws-agenda-filtres .agenda-chip[aria-pressed="true"] {
    background: var(--jws-indigo, #312783);
    color: #fff;
    box-shadow: inset 0 0 0 1px var(--jws-indigo, #312783), 0 0 0 2px var(--jws-orange, #f39200);
}

.jws-agenda-filtres .agenda-chip[aria-pressed="true"] small {
    opacity: .85;
}

/* Anneau en indigo : l'orange fait 2,35:1 sur fond clair, sous les 3:1 d'un indicateur de focus. */
.jws-agenda-filtres .agenda-chip:focus-visible,
.jws-agenda-filtres__reset:focus-visible {
    outline: 3px solid var(--jws-indigo, #312783);
    outline-offset: 2px;
}

.jws-agenda-filtres__reset {
    font: inherit;
    font-size: .78em;
    min-height: 24px;
    margin-left: auto;
    padding: 6px 10px;
    border: 0;
    background: none;
    color: var(--jws-indigo, #312783);
    text-decoration: underline;
    cursor: pointer;
}

.jws-agenda-filtres__compteur {
    margin: 0;
    min-height: 1.2em;
    color: var(--jws-gris, #666);
    font-size: .8em;
}

/* Une date filtrée : la ligne porte l'attribut hidden, quelle que soit la règle d'affichage du thème. */
.event-annees-list .agenda-item[hidden] {
    display: none;
}

@media (pointer: coarse) {
    .jws-agenda-filtres .agenda-chip,
    .jws-agenda-filtres__reset {
        min-height: 44px;
        padding: 6px 12px;
    }
}

/* [14/10/2026, 22 h 30] Téléphone : « Filtrer l'agenda par artistes » remonte EN HAUT de la page, compacté sur deux
   colonnes comme le filtre de /albums/ (Julien : « page agenda mobile, comme la page albums, filtre sur deux colonnes
   des noms d'artistes en haut »). La colonne de gauche du thème est rangée APRÈS les dates par assets/mobile.css
   (order: 2, retour d'Ourida du 14/10 sur l'agenda d'un artiste) : ici, sur /event/ seulement (cette feuille n'est
   servie que là), la colonne s'efface (display: contents) pour que ses deux blocs se rangent chacun à sa place :
   les artistes avant les dates, « Filtrer par années » reste après. Les pages d'agenda d'un artiste ne changent pas.
   Mesures reprises de albums.css § Téléphone : icône de 24 px, nom sur la même ligne, 12,5 px, sans retour à la ligne. */
@media (max-width: 767.98px) {
    .post-type-archive-event .row.justify-content-between:has(.artist-events-coming) > .col-md-4 {
        display: contents;
    }

    .post-type-archive-event .row.justify-content-between > .col-md-4 > .event-annees-nav {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 15px;
        order: 2;
    }

    .post-type-archive-event .row.justify-content-between > .col-md-4 > .event-annees-nav:has(> .artist-pastille) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 12px;
        margin-bottom: 16px;
        order: -1;
    }

    .post-type-archive-event .event-annees-nav:has(> .artist-pastille) > h4 {
        grid-column: 1 / -1;
        margin-bottom: 8px;
    }

    .post-type-archive-event .event-annees-nav > .artist-pastille {
        flex-wrap: nowrap !important; /* la classe utilitaire .flex-wrap de Bootstrap porte un !important */
        min-width: 0;
        min-height: 40px;
        margin: 0;
    }

    .post-type-archive-event .event-annees-nav > .artist-pastille > [class*="col-"] {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        padding: 0;
    }

    .post-type-archive-event .event-annees-nav > .artist-pastille > [class*="col-"]:last-child {
        flex: 1 1 auto;
        min-width: 0;
        padding-left: 8px;
    }

    .post-type-archive-event .event-annees-nav > .artist-pastille img {
        display: block;
        width: 24px;
        height: 24px;
    }

    .post-type-archive-event .event-annees-nav > .artist-pastille .artist-pastille-text {
        margin: 0;
        overflow: hidden;
        font-size: 12.5px;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}