@charset "UTF-8";
/* ---------------------------------------------------------------------------------------------
   albums.css — brique « albums » (JulienWeb, 03/10/2026).

   Servie sur /albums/, /releases-artiste/<artiste>, la fiche d'un album, et les fiches artiste
   et projet (leurs vignettes d'album). Aucun sélecteur du thème n'est redéfini : la vignette
   garde .release-row, .release-infos, .release-titre, .artist-name, .is-btn de style.css.

   1. Le cartouche de /albums/, en h1
   2. La liste : intertitre d'année, grille, année de la vignette
   3. Fiche album : les boutons d'écoute
   4. Fiche album : autres albums, prochaines dates

   Rien n'est posé sur une pochette. Pas d'orange en texte. Pas de graisse ajoutée : les
   intertitres gardent celle des titres du thème (h1…h6 en Poppins 800).
   Le mouvement (transitions de .jws-btn) est coupé par commun.css sous prefers-reduced-motion.
   --------------------------------------------------------------------------------------------- */


/* -- 1. Le cartouche ---------------------------------------------------------------------------
   Mêmes valeurs que .jws-titres-seo-cartouche (briques/titres-seo/titres-seo.css) : l'allure
   du h3 du thème, .section-row h3, reportée sur un h1. Voir cette feuille pour le détail des
   22 px de marge et des 19,8 px. Sous 576 px le cartouche est ancré par le bas sur le filet. */

.jws-albums__titre {
    position: absolute;
    top: auto;
    bottom: 100%;
    display: inline-block;
    box-sizing: border-box;
    max-width: calc(100% - 20px);
    margin: 0 0 -19.8px;
    padding: 10px 15px;
    background: var(--jws-indigo, #312783);
    color: var(--jws-sur-indigo, #fff);
    font-family: 'Poppins', serif;
    font-size: 22px;
    font-weight: 800;              /* la graisse du h3 du thème, pas un gras de plus */
    text-align: center;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

@media (min-width: 576px) {
    .jws-albums__titre {
        top: -45px;
        bottom: auto;
        max-width: none;
        margin: 22px 0;            /* la marge par défaut du h3 de 22 px */
        text-align: inherit;
        overflow-wrap: normal;
    }
}

/* L'air sous le cartouche (06/10/2026) : 29,2 px, la mesure du site (voir titres-seo.css,
   paragraphe 1 bis). Le gabarit enveloppe la liste dans .pt-2, 8 px de plus : 37,2 px.
   !important parce que l'utilitaire de bootstrap-grid en porte un (.pt-2 { padding-top:
   .5rem !important }) : sans lui la règle est inerte, mesuré le 06/10. */
.section-row + .pt-2 {
    padding-top: 0 !important;
}


/* -- 2. La liste -------------------------------------------------------------------------------
   L'intertitre d'année reprend le filet pointillé orange des rubriques (.section-row-content)
   et la tesselle du socle. Le texte est indigo (12,01:1 sur blanc). */

.jws-albums__annee {
    display: flex;
    align-items: center;
    margin: 1em 0 .8em;
    padding: 0 0 .4em;
    border-bottom: 1px dashed var(--jws-orange, #f39200);
    color: var(--jws-indigo, #312783);
    font-size: 1.25em;
    line-height: 1.2;
}

.jws-albums__annee:first-child {
    margin-top: 0;
}

/* Des vignettes de même hauteur sur une rangée (1em : la marge basse de .release-row). */
.jws-albums .release-row {
    height: calc(100% - 1em);
}

/* La vignette resserrée en hauteur (07/10, demande de Julien : « trop d'espace et de marges en
   hauteur »). Le thème donne 14,88 px de marge intérieure, 23,8 px d'interligne à chaque ligne,
   une boîte de 58,5 px au bouton et 14,88 px de vide sous le bloc de texte : 219 px de texte
   sous une pochette de 183. Ici : marges et interlignes réduits. */
.jws-albums .release-row {
    display: flex;
    flex-direction: column;
}

.jws-albums .release-row > a {
    flex: none;
}

.jws-albums .release-row .release-infos {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    margin-bottom: 0;
    padding: 10px 12px 12px;
    line-height: 1.35;
}

.jws-albums .release-row .release-infos .release-titre {
    margin-bottom: 4px;
    line-height: 1.3;
}

.jws-albums .release-row .release-infos .artist-name,
.jws-albums .release-row .release-infos .projet-name,
.jws-albums .release-row .release-infos .jws-album__annee {
    line-height: 1.35;
}

/* Sous un intertitre d'année (page /albums/), l'année ne se répète pas dans chaque vignette
   (08/10, demande de Julien). Ailleurs (fiche d'un artiste, sans intertitres), elle reste. */
.jws-albums--annees .jws-album__annee {
    display: none;
}

/* Plus de bouton « Plus d'infos » sur ces vignettes (07/10, demande de Julien) : la pochette et
   le titre mènent à la même fiche. Masqué ici, le gabarit de la vignette n'est pas touché (il
   sert aussi les fiches artiste et projet, qui gardent leur bouton). */
.jws-albums .release-row .release-infos > .text-center:last-child {
    display: none;
}

/* Téléphone : deux colonnes (dès 320 px depuis le 08/10, demande de Julien ; une seule avant,
   jusqu'à 420 px) ; à 768 px la grille du thème (trois). Sous 420 px les gouttières passent de
   30 à 12 px pour laisser de la largeur aux pochettes. */
@media (max-width: 767.98px) {
    .jws-albums .row > .col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 419.98px) {
    .jws-albums .row {
        margin-right: -6px;
        margin-left: -6px;
    }

    .jws-albums .row > .col-md-4 {
        padding-right: 6px;
        padding-left: 6px;
    }
}

/* L'année, sous le nom de l'artiste : la taille et le gris de .release_date (7,46:1). */
.jws-album__annee {
    margin-top: 2px;
    color: #555;
    font-size: .8em;
}


/* Grand écran (07/10, demande de Julien) : la colonne du filtre par artiste passe d'un tiers à un
   quart de la largeur, et les albums de trois à quatre par rangée. Les gabarits gardent leurs
   classes col-md-4 / col-md-8 ; sans :has(), la page reste à trois colonnes. */
@media (min-width: 1200px) {
    .row:has(> .col-md-8 > .jws-albums) > .col-md-4 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row:has(> .col-md-8 > .jws-albums) > .col-md-8 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .row:has(> .col-md-8 > .jws-albums) .jws-albums .row > .col-md-4 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}


/* Téléphone (08/10, demande de Julien : « icône plus petite, pas de retour à la ligne, on compacte
   l'ensemble »). Le filtre par artiste du thème pose l'icône (40 px) puis le nom dessous, un
   artiste par rangée de 73 px : 1 636 px pour 22 artistes à 375 px. Ici : icône de 24 px, nom sur
   la même ligne, deux colonnes. */
@media (max-width: 767.98px) {
    .row:has(> .col-md-8 > .jws-albums) .releases-artist-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 12px;
        margin-bottom: 16px;
    }

    .row:has(> .col-md-8 > .jws-albums) .releases-artist-nav > .titre-nav {
        grid-column: 1 / -1;
        margin-bottom: 8px;
    }

    .row:has(> .col-md-8 > .jws-albums) .releases-artist-nav > .artist-pastille {
        flex-wrap: nowrap;
        min-width: 0;
        min-height: 40px;
        margin: 0;
    }

    .row:has(> .col-md-8 > .jws-albums) .releases-artist-nav > .artist-pastille > [class*="col-"] {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        padding: 0;
    }

    .row:has(> .col-md-8 > .jws-albums) .releases-artist-nav > .artist-pastille > [class*="col-"]:last-child {
        flex: 1 1 auto;
        min-width: 0;
        padding-left: 8px;
    }

    .row:has(> .col-md-8 > .jws-albums) .releases-artist-nav .artist-pastille img {
        display: block;
        width: 24px;
        height: 24px;
    }

    .row:has(> .col-md-8 > .jws-albums) .releases-artist-nav .artist-pastille-text {
        margin: 0;
        overflow: hidden;
        font-size: 12.5px;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


/* -- 3. Les boutons d'écoute -------------------------------------------------------------------
   .jws-btn du socle (fond orange, texte indigo, 5,10:1), agrandi : 44 px de haut, corps du
   texte. Les liens non reconnus portent .jws-btn--contour. */

.jws-album-ecoute {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin: 1em 0;
}

.jws-album-ecoute .jws-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 8px 20px;
    font-size: 1em;
    line-height: 1.3;
    text-align: left;
    overflow-wrap: anywhere;
}


/* -- 4. Sous la fiche ---------------------------------------------------------------------------
   Deux blocs, chacun ouvert par le filet pointillé. Les pochettes sont dans une grille fluide :
   deux par rangée à 320 px, sept sur un grand écran. Le titre et l'année sont SOUS la pochette. */

.jws-album-suite {
    margin: 0;             /* 2em en haut jusqu'au 10/10 : l'air au-dessus du titre vient du composant */
    padding: 0 0 1em;
}

/* [10/10/2026] Le filet et le titre sont ceux du composant « titre de section » (commun.css § 6) : plus de filet
   ni de titre maison ici. */
.jws-album-suite__bloc {
    margin: 0 0 2em;
    padding: 0;
}

.jws-album-suite__titre {
    display: flex;
    align-items: center;
    margin: 0 0 1em;
    color: var(--jws-indigo, #312783);
    font-size: 1.15em;
    line-height: 1.3;
    text-transform: uppercase;
}

.jws-album-suite__pochettes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jws-album-suite__pochettes a {
    display: block;
    color: var(--jws-encre, #262830);
    text-decoration: none;
}

.jws-album-suite__pochettes img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px solid var(--jws-trait, #ccc);
}

.jws-album-suite__nom {
    display: block;
    margin-top: .5em;
    color: #222;
    font-size: .93em;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.jws-album-suite__annee {
    display: block;
    color: #555;
    font-size: .8em;
}

.jws-album-suite__pochettes a:hover,
.jws-album-suite__pochettes a:focus-visible {
    color: var(--jws-encre, #262830);   /* le thème pose a:hover en orange */
}

.jws-album-suite__pochettes a:hover .jws-album-suite__nom,
.jws-album-suite__pochettes a:focus-visible .jws-album-suite__nom {
    color: var(--jws-indigo, #312783);
    text-decoration: underline;
}

.jws-album-suite__pochettes a:focus-visible {
    outline: 3px solid var(--jws-indigo, #312783);
    outline-offset: 3px;
}

/* Les dates : jour en indigo, titre, lieu en gris (5,74:1). Sur un téléphone, le jour prend sa
   ligne et le reste passe dessous. */
.jws-album-dates {
    margin: 0;
    padding: 0;
    list-style: none;
}

.jws-album-dates__ligne {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
    padding: .7em 0;
    border-bottom: 1px solid var(--jws-trait-clair, #eee);
    line-height: 1.4;
}

.jws-album-dates__jour {
    flex: 0 0 8em;
    color: var(--jws-indigo, #312783);
    font-family: var(--jws-police-titre, 'Poppins', 'Open Sans', sans-serif);
}

.jws-album-dates__titre {
    flex: 1 1 12em;
    min-width: 0;
    color: var(--jws-encre, #262830);
    overflow-wrap: anywhere;
}

.jws-album-dates__lieu {
    flex: 1 1 10em;
    min-width: 0;
    color: var(--jws-gris, #666);
    overflow-wrap: anywhere;
}

.jws-album-suite__lien {
    margin: 1em 0 0;
}

.jws-album-suite__lien .jws-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 8px 18px;
    font-size: .9em;
    line-height: 1.3;
    overflow-wrap: anywhere;
}


/* -- L'accueil : « Derniers albums » (08/10, demande de Julien) ---------------------------------
   Les vignettes de la liste, quatre par rangée à partir de 768 px (deux au téléphone, règle plus
   haut). L'année reste affichée : ici, pas d'intertitre pour la dire. */

.jws-albums-accueil {
    padding: 0 0 2em;
    background: var(--jws-fond, #fff);
}

@media (min-width: 768px) {
    .jws-albums--accueil .row > .col-md-4 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

.jws-albums-accueil__pied {
    margin: 1.2em 0 0;
    text-align: center;
}

.jws-albums-accueil__tous {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 0 1.4em;
    font-size: .9em;
}