@charset "UTF-8";
/* ---------------------------------------------------------------------------------------------
   Brique « prochaine-date » — la prochaine date sur la ligne du compteur d'albums
   (JulienWeb, 03/10/2026).

   Mise en file par brique.php sur les fiches artiste et projet qui ont une date à venir.
   Servie après style.css et commun.css.

   Le texte porte la classe du thème, .artist-release-compteur (style.css : 12 px, #333,
   inline-block) : même corps, même couleur, même graisse que « N album(s) ». Cette feuille
   n'ajoute que le losange orange qui sépare les mentions, le survol, le focus, la cible
   tactile et l'ancre. Pas de gras, pas d'orange en texte, rien sur une photo.
   Aucune largeur fixe : les mentions passent à la ligne une à une, tout tient à 320 px.
   --------------------------------------------------------------------------------------------- */


/* -- 1. Le lien ------------------------------------------------------------------------------ */

.jws-prochaine-date,
.jws-prochaine-date:hover,
.jws-prochaine-date:focus {
    text-decoration: none;
}

.jws-prochaine-date__item {
    position: relative;
    max-width: 100%;
}

/* Le survol du thème passe les liens en orange (2,35:1 sur blanc) : ici le texte reste
   lisible et le lien se signale par un soulignement. */
.jws-prochaine-date:hover .jws-prochaine-date__item,
.jws-prochaine-date:focus-visible .jws-prochaine-date__item {
    color: var(--jws-indigo, #312783);
    text-decoration: underline;
    text-decoration-color: var(--jws-orange, #f39200);
    text-underline-offset: 3px;
}

.jws-prochaine-date:focus-visible {
    outline: 2px solid var(--jws-indigo, #312783);
    outline-offset: 3px;
    border-radius: var(--jws-rayon, 3px);
}


/* -- 2. Le losange entre deux mentions -------------------------------------------------------
   Devant « Prochaine date » quand le compteur d'albums précède, et devant « N dates à venir ».
   C'est .jws-tesselle de commun.css (carré orange tourné par rotate, aria-hidden), ramenée
   à l'échelle d'un texte de 12 px. */

.jws-prochaine-date__tesselle.jws-tesselle {
    width: 5px;
    height: 5px;
    margin: 0 9px 0 5px;
    vertical-align: .15em;
}


/* -- 3. Cible tactile ------------------------------------------------------------------------
   Au doigt, la zone cliquable de chaque mention est étendue à 44 px de haut sans rien déplacer :
   surtout vers le bas, où il n'y a que le chapeau, pour ne pas mordre sur le compteur d'albums
   quand la mention est passée à la ligne. */

@media (pointer: coarse) {
    .jws-prochaine-date__item::after {
        content: "";
        position: absolute;
        top: -4px;
        right: 0;
        bottom: -22px;
        left: 0;
    }
}


/* -- 4. L'ancre devant le bloc Agenda --------------------------------------------------------
   Vide, sans hauteur. L'en-tête du site reste collé en haut : sa hauteur est publiée par
   chrome.js (--jw-hdr-h, reprise dans --jws-entete), jamais écrite en dur ici. */

.jws-prochaine-date__ancre {
    height: 0;
    scroll-margin-top: calc(var(--jws-entete, 141px) + 16px);
}

/* Secours : ancre posée dans le bloc, sous le cartouche « agenda » — on remonte d'autant. */
.jws-prochaine-date__ancre--dans-bloc {
    scroll-margin-top: calc(var(--jws-entete, 141px) + 110px);
}