@charset "UTF-8";
/*
 * Brique « ecouter-suivre » — la rangée « Écouter et suivre » des fiches artiste et projet.
 * Mise en file après style.css et commun.css, seulement sur les fiches où la rangée sort.
 *
 * Même grammaire que les encarts de la colonne : le cadre du line-up (.artist-lineup, 2 px indigo),
 * les pastilles de l'agenda d'accueil (.agenda-chip) pour les cases. Icônes en indigo sur blanc
 * (12,01:1) : l'orange #f39200 ne passe pas le contraste sur fond blanc, il ne sert ici qu'au
 * contour du focus. Rien n'est posé sur une photo.
 *
 * Les variables --jws-… viennent de commun.css ; chaque emploi porte sa valeur de repli.
 */

.jws-es {
    border: 2px solid var(--jws-indigo, #312783);
    margin: 2em 0;
    padding: 0 20px 20px;
}

.jws-es .jws-es-titre {
    color: var(--jws-indigo, #312783);
    margin: 1em 0;
    text-transform: uppercase;
}

/* Six cases tiennent sur une ligne dans la colonne de 350 px (6 x 44 + 5 x 8 = 304 pour 306),
   quatre dans un téléphone de 320 px ; au-delà, la rangée passe à la ligne. */
.jws-es .jws-es-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jws-es .jws-es-item {
    margin: 0;
    padding: 0;
}

/* Une case : 44 px de côté, la cible tactile. */
.jws-es a.jws-es-lien {
    align-items: center;
    background: var(--jws-fond, #fff);
    border: 1px solid var(--jws-indigo, #312783);
    border-radius: var(--jws-rayon, 3px);
    box-sizing: border-box;
    color: var(--jws-indigo, #312783);
    display: flex;
    height: 44px;
    justify-content: center;
    min-width: 44px;
    position: relative;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

/* Le thème passe tout lien survolé en orange : ici le survol inverse la case, indigo plein. */
.jws-es a.jws-es-lien:hover,
.jws-es a.jws-es-lien:focus {
    background: var(--jws-indigo, #312783);
    color: var(--jws-sur-indigo, #fff);
}

.jws-es a.jws-es-lien:focus-visible {
    outline: 3px solid var(--jws-orange, #f39200);
    outline-offset: 2px;
}

.jws-es .jws-es-lien .fa {
    font-size: 20px;
    line-height: 1;
}

.jws-es .jws-es-svg {
    display: block;
    fill: currentColor;
    height: 20px;
    width: 20px;
}

/* L'intitulé du lien : lu par les lecteurs d'écran, absent de l'écran.
   (.jws-es-suite porte aussi .jws-sr de commun.css ; la règle est redite ici pour ne pas en dépendre.) */
.jws-es .jws-es-nom,
.jws-es .jws-es-suite {
    border: 0;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Sans la police d'icônes du thème : les intitulés s'écrivent, les cases s'élargissent. */
.jws-es.jws-es--texte .jws-es-nom {
    clip: auto;
    clip-path: none;
    font-size: .9em;
    height: auto;
    margin: 0;
    overflow: visible;
    padding: 0 12px;
    position: static;
    width: auto;
}

@media (prefers-reduced-motion: reduce) {
    .jws-es a.jws-es-lien {
        transition: none;
    }
}

@media print {
    .jws-es {
        display: none;
    }
}