@charset "UTF-8";
/* ---------------------------------------------------------------------------------------------
   actus-liste.css — la page des actus (/news/, /news-en/). Brique « actus-liste », JulienWeb,
   03/10/2026. Chargée sur cette page seulement, après style.css et commun.css.

   Règles tenues :
   - rien ne se pose sur une photo : la date SUIT le titre, les pastilles sont AU-DESSUS de la liste ;
   - pas d'orange en texte sur fond clair : l'orange est un anneau ou un contour de focus ;
   - pas de gras ajouté ; les pastilles sont celles de la page « Vidéos » (elles-mêmes reprises
     de .agenda-chip, assets/agenda-home.css), en boutons.

   La règle qui cache la suite de la liste avant le démarrage du script est écrite dans <head>
   par brique.php (elle dépend de la taille du lot).

   1. Pastilles      2. Liste par lots      3. Une actu : photo à gauche, texte à droite
   4. Date           5. « Plus d'actus »
   --------------------------------------------------------------------------------------------- */


/* -- 1. Pastilles ------------------------------------------------------------------------------ */

.jws-actus-liste {
    margin: 0 0 1.5em;
}

.jws-actus-liste[hidden] {
    display: none;
}

/* -- 0. La carte (04/10) : la barre du blog de julienweb.fr (jw-blog-filter.css), aux couleurs du
   site. Fond blanc, filet orange en tête, coins de 4 px comme les blocs de l'agenda. En tête le
   compte vivant et « Réinitialiser » ; puis les pastilles ; puis la recherche, sous un filet. */

.jws-actus-liste__carte {
    /* relative : le libellé .jws-sr du champ est en position absolue. */
    position: relative;
    padding: 16px 16px 14px;
    border: 1px solid #e3e6ef;
    border-top: 3px solid var(--jws-orange, #f39200);
    border-radius: 4px;
    background: #fff;
}

/* Une rangée de filtres et son libellé (06/10) : « Catégories », « Artistes ». Le libellé est
   au-dessus au téléphone, devant à partir de 576 px. 11 px, gris, capitales : la taille et le
   ton du type écrit sous une actu. */
.jws-actus-liste__groupe {
    margin: 0 0 8px;
}

.jws-actus-liste__groupe[hidden],
.jws-actus-liste__tete[hidden] {
    display: none;
}

.jws-actus-liste__libelle {
    display: block;
    margin: 0 0 2px;
    color: var(--jws-gris, #666);
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* minmax(0, 1fr) : une rangée qui défile ne doit pas élargir la carte. */
@media (min-width: 576px) {
    .jws-actus-liste__groupe {
        display: grid;
        grid-template-columns: 6.5em minmax(0, 1fr);
        align-items: center;
        column-gap: 10px;
    }

    .jws-actus-liste__libelle {
        margin: 0;
    }
}

/* Sous les rangées, derrière un filet : la recherche, puis le compte et « Réinitialiser », qui
   ne se montrent que sous un filtre. Là, ils ne décalent pas les rangées en apparaissant. */
.jws-actus-liste__pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 10px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid #e3e6ef;
}

.jws-actus-liste__tete {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    min-height: 28px;
    margin: 0 0 0 auto;
}

.jws-actus-liste__compte {
    margin: 0;
    color: var(--jws-gris, #666);
    font-size: .9em;
}

.jws-actus-liste__raz {
    flex: 0 0 auto;
    min-height: 28px;
    margin: 0;
    padding: 4px 12px;
    border: 1px solid var(--jws-indigo, #312783);
    border-radius: var(--jws-rayon-pilule, 20px);
    background: #fff;
    color: var(--jws-indigo, #312783);
    font-family: inherit;
    font-size: .8em;
    font-weight: inherit;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.jws-actus-liste__raz:hover {
    background: var(--jws-indigo, #312783);
    color: #fff;
}

.jws-actus-liste__raz[hidden],
.jws-actus-liste__ligne[hidden],
.jws-actus-liste__recherche[hidden] {
    display: none;
}

/* La recherche part du même bord que les pastilles (08/10, demande de Julien) : elle était calée
   sous les libellés. Le retrait vaut la colonne des libellés et son écart (mesuré). */
@media (min-width: 576px) {
    .jws-actus-liste__pied {
        padding-left: calc(6.5em + 10px + 3px);
    }
}

.jws-actus-liste__recherche {
    position: relative;
    flex: 1 1 280px;
    max-width: 560px;
    margin: 0;
}

/* 16 px : en dessous, iOS agrandit la page quand le champ prend le curseur. */
.jws-actus-liste__champ {
    width: 100%;
    height: 46px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 44px 0 44px;
    border: 1px solid #b9bdd6;
    border-radius: 4px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23312783' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Cpath d='m12.5 12.5 4 4'/%3E%3C/svg%3E") no-repeat 14px 50%;
    color: var(--jws-encre, #262830);
    font-family: inherit;
    font-size: 16px;
    transition: border-color .15s, box-shadow .15s;
}

.jws-actus-liste__champ::placeholder {
    color: var(--jws-gris, #666);
    opacity: 1;
}

.jws-actus-liste__champ:hover {
    border-color: var(--jws-indigo, #312783);
}

.jws-actus-liste__champ:focus {
    border-color: var(--jws-indigo, #312783);
    outline: 3px solid var(--jws-indigo, #312783);
    outline-offset: 2px;
}

/* Le rappel du raccourci : il s'efface quand on écrit. Sans objet au doigt. */
.jws-actus-liste__touche {
    position: absolute;
    right: 12px;
    bottom: 12px;
    min-width: 22px;
    padding: 2px 6px;
    border: 1px solid #b9bdd6;
    border-bottom-width: 2px;
    border-radius: 4px;
    background: #f5f5f8;
    color: var(--jws-gris, #666);
    font: 12px/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace;
    text-align: center;
    pointer-events: none;
}

.jws-actus-liste__champ:focus ~ .jws-actus-liste__touche,
.jws-actus-liste__champ:not(:placeholder-shown) ~ .jws-actus-liste__touche {
    opacity: 0;
}

@media (pointer: coarse), (max-width: 767px) {
    .jws-actus-liste__touche {
        display: none;
    }

    .jws-actus-liste__champ {
        padding-right: 12px;
    }
}

/* Une pastille qui ne donnerait rien avec la recherche en cours : grisée, jamais cachée. */
.jws-actus-liste__pastille:disabled {
    opacity: .4;
    cursor: default;
}

.jws-actus-liste__pastille:disabled:hover {
    background: #fff;
}

/* Au téléphone, les pastilles tiennent sur une ligne qui défile, au lieu de dix rangées qui
   repoussent les actus sous le pli. La page, elle, ne défile jamais de côté. */
.jws-actus-liste__ligne {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    /* Un cadre qui défile coupe ce qui dépasse de son retrait : l'anneau de focus (3 px posés à
       2 px du bord) demande 5 px en haut et à gauche. La marge négative rend ces 2 px : les
       pastilles ne bougent pas. */
    margin: -2px 0 0 -2px;
    padding: 5px 12px 8px 5px;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.jws-actus-liste__ligne > li {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

.jws-actus-liste__pastille {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--jws-indigo, #312783);
    border-radius: var(--jws-rayon, 3px);
    background: #fff;
    color: var(--jws-indigo, #312783);
    font-family: inherit;
    font-size: .8em;
    font-weight: inherit;
    line-height: 1.15;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.jws-actus-liste__pastille small {
    font-size: .8em;
    opacity: .7;
}

.jws-actus-liste__pastille:hover {
    background: #eef0f7;
    color: var(--jws-indigo, #312783);
}

/* L'état actif se dit par le fond plein ET l'anneau, pas par la couleur seule. */
.jws-actus-liste__pastille[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-actus-liste__pastille[aria-pressed="true"] small {
    opacity: .85;
}

/* Anneau en indigo : l'orange fait 2,35:1 sur le blanc de la page, sous les 3:1 d'un indicateur de focus. */
.jws-actus-liste__pastille:focus-visible {
    outline: 3px solid var(--jws-indigo, #312783);
    outline-offset: 2px;
}

/* Au doigt : 44 px de haut. */
@media (pointer: coarse) {
    .jws-actus-liste__pastille {
        min-height: 44px;
        padding: 6px 12px;
    }
}

@media (min-width: 576px) {
    .jws-actus-liste__ligne {
        flex-wrap: wrap;
        margin: 0;
        padding: 3px;
        overflow: visible;
    }
}


/* -- 2. Liste par lots --------------------------------------------------------------------------
   actus-liste.js pose l'attribut hidden sur la colonne de chaque actu hors lot ou hors filtre.
   La règle le garantit même si une feuille redonne un display à la colonne. */

.jws-actus-liste ~ .container > .row > [hidden] {
    display: none;
}


/* -- 3. Une actu : la mise en page du bandeau de l'accueil, la photo en plus grand (05/10) --------
   Demande de Julien : « comme sur la section news de la page d'accueil », les images plus
   grandes. Le balisage est celui du thème (archive-news.php, news-vignette.php), inchangé :

     nav.jws-actus-liste ~ div.container > div.row > div.col-md-3 > div.news-vignette
         > a (la photo ronde)   > div.parents-artiste-projet   > div.news-title

   Ce sont les règles d'actus-accueil.css (§ 1 et 2), aux tailles près : la photo fait 140 px là
   où l'accueil en donne 100. Une colonne jusqu'à 992 px (deux colonnes à 768 px laisseraient
   moins de 170 px au texte à côté d'une photo de 140), deux au-delà.

   La photo, le nom de l'artiste et le titre par largeur d'écran (06/10, demandes de Julien). Le
   thème sert la photo à 100 px, le nom à 12 px et le titre à 16 px, partout. Ici :
     téléphone      photo 26 % de la largeur, 112 px au plus     nom 16 px    titre 17 px
     576 px         photo 112 px                                 nom 18 px    titre 17 px
     768 px         photo 140 px, une colonne                    nom 20 px    titre 18 px
     992 px         photo 112 px, deux colonnes                  nom 18 px    titre 17 px
     1200 px        photo 140 px                                 nom 20 px    titre 18 px
   Le nom passe devant : c'est lui qu'on lit en premier, le titre vient dessous. Deux essais
   écartés le 06/10 : le titre à 20 / 18 / 17 px (« un peu grand »), la photo à 200 / 160 px et
   36 % de la largeur (ramenée à 80 %, puis à 70 %). En em : la lettrine orange (1,3 em dans style.css) grandit
   avec le titre. Le projet et la date restent à 12 px. */

.jws-actus-liste ~ .container > .row {
    --jws-actus-photo: min(112px, 26vw);
    --jws-actus-ecart: 16px;
    --jws-actus-nom: .875em;      /* noms réduits d'un cran le 07/10, puis le 14/10 avec les titres (Julien) : noms 14 / 15 / 16 px, titres 16 / 17 px */
    --jws-actus-titre: 1em;
}

.jws-actus-liste ~ .container > .row > .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Les actus d'une rangée prennent la même hauteur : leurs photos restent alignées quand un titre
   est plus long que l'autre. :not([hidden]) : le filtre et les lots cachent une actu par cet
   attribut (§ 2), et cette règle a le même poids que la leur. */
.jws-actus-liste ~ .container > .row > .col-md-3:not([hidden]) {
    display: flex;
}

/* Une grille de deux colonnes. La photo occupe la première sur toute la hauteur ; le texte est
   rangé dans les rangées 2 à 5, les rangées 1 et 6 (1fr) se partagent le reste : il est centré
   sur la photo quand il est plus court qu'elle, la photo centrée sur lui sinon. */
.jws-actus-liste ~ .container > .row > .col-md-3 > .news-vignette {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: var(--jws-actus-photo) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: var(--jws-actus-ecart);
}

.jws-actus-liste ~ .container > .row .news-vignette > a:first-child {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
}

/* Le thème fixe la photo à 100 px et lui laisse 10 px dessous, pour le nom qui la suivait. */
.jws-actus-liste ~ .container > .row .news-thumb {
    width: var(--jws-actus-photo);
    height: var(--jws-actus-photo);
    margin-bottom: 0;
}

/* 7 photos sur 117 ne sont pas le carré de 300 px (150 × 150, 225 × 225, 300 × 217…) : les plus
   petites ne rempliraient pas un rond de 140 px. Recadrées au centre, agrandies s'il le faut. */
.jws-actus-liste ~ .container > .row .news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jws-actus-liste ~ .container > .row .news-vignette > .parents-artiste-projet {
    grid-column: 2;
    grid-row: 3;
}

/* Le nom de l'artiste était centré sous la photo, avec 10 px au-dessus. */
.jws-actus-liste ~ .container > .row .parents-artiste-projet .artist-name,
.jws-actus-liste ~ .container > .row .parents-artiste-projet .projet-name {
    margin: 0;
    text-align: left;
}

/* Le thème fixe 12 px sur le bloc du nom ET sur son lien : la taille se pose sur le bloc, le lien
   la reprend (deux fois la même valeur en em se multiplieraient). Interligne serré : un nom long
   passe sur deux lignes au téléphone. */
.jws-actus-liste ~ .container > .row .parents-artiste-projet .artist-name {
    font-size: var(--jws-actus-nom);
    line-height: 1.25;
}

.jws-actus-liste ~ .container > .row .parents-artiste-projet .artist-name a {
    font-size: inherit;
}

.jws-actus-liste ~ .container > .row .news-vignette > .news-title {
    grid-column: 2;
    grid-row: 4;
    margin: 2px 0 0;
    font-size: var(--jws-actus-titre);
}

/* Ce qui suit le titre : la date restée en bloc (voir § 4), ou l'ajout d'une autre brique. */
.jws-actus-liste ~ .container > .row .news-vignette > .news-title ~ * {
    grid-column: 2;
    grid-row: 5;
}

/* La ligne « catégorie · date » (08/10) : servie après le titre, affichée en tête de l'actu. */
.jws-actus-liste ~ .container > .row .news-vignette > .news-title ~ .jws-actus-liste__meta {
    grid-row: 2;
}

@media (min-width: 576px) {
    .jws-actus-liste ~ .container > .row {
        --jws-actus-photo: 112px;
        --jws-actus-ecart: 20px;
        --jws-actus-nom: .9375em;
    }
}

@media (min-width: 768px) {
    .jws-actus-liste ~ .container > .row {
        --jws-actus-photo: 140px;
        --jws-actus-ecart: 24px;
        --jws-actus-nom: 1em;
        --jws-actus-titre: 1.0625em;
    }
}

/* Deux colonnes. De l'air entre le texte d'une actu et la photo de sa voisine : 30 px à droite de
   CHAQUE colonne, et non des seules colonnes impaires comme sur l'accueil — sous un filtre, une
   actu impaire dans la page n'est plus forcément à gauche. */
@media (min-width: 992px) {
    .jws-actus-liste ~ .container > .row {
        --jws-actus-photo: 112px;
        --jws-actus-nom: .9375em;
        --jws-actus-titre: 1em;
    }

    .jws-actus-liste ~ .container > .row > .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
        padding-right: 30px;
    }
}

@media (min-width: 1200px) {
    .jws-actus-liste ~ .container > .row {
        --jws-actus-photo: 140px;
        --jws-actus-nom: 1em;
        --jws-actus-titre: 1.0625em;
    }
}


/* -- 4. La ligne « catégorie · date », en tête de l'actu (08/10, demande de Julien) --------------
   brique.php réunit l'étiquette de catégorie (brique « actus-types ») et la date dans
   div.jws-actus-liste__meta. Même corps pour les deux : 11 px en petites capitales, la catégorie
   indigo, la date grise ; la date ne se coupe pas, elle passe à la ligne entière au téléphone.
   Si le gabarit change et que le titre n'est plus reconnu, la date reste en bloc (div) sous le titre. */

.jws-actus-liste__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin: 0 0 4px;
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.jws-actus-liste__meta .jws-actus-types__etiq {
    margin: 0;
}

.jws-actus-liste__date {
    color: #555;                    /* 7,46:1 sur blanc */
    font-size: 11px;
    white-space: nowrap;
}

.jws-actus-liste__meta .jws-actus-types__etiq + .jws-actus-liste__date::before {
    content: "·";
    margin: 0 .5em;
    color: var(--jws-gris, #666);
}

div.jws-actus-liste__date {
    margin: 2px 0 0;
    line-height: 1.4;
}


/* -- 4 bis. Un intertitre par année, celui des albums (.jws-albums__annee, albums.css) ---------- */

.jws-actus-liste__an[hidden] {
    display: none;
}

.jws-actus-liste__annee {
    display: flex;
    align-items: center;
    margin: .4em 0 1em;
    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-actus-liste__an ~ .jws-actus-liste__an .jws-actus-liste__annee {
    margin-top: 1.4em;
}


/* -- 5. « Plus d'actus » ------------------------------------------------------------------------ */

.jws-actus-liste__suite {
    margin: 0 0 2.5em;
    padding: 0 15px;
    text-align: center;
}

.jws-actus-liste__suite[hidden] {
    display: none;
}

.jws-actus-liste__plus {
    min-height: 44px;
    margin: 0;
    padding: .5em 1.4em;
    font-size: .9em;
}

.jws-actus-liste__plus span {
    opacity: .8;
}

.jws-actus-liste__plus span:empty {
    display: none;
}