@charset "UTF-8";
/* ---------------------------------------------------------------------------------------------
   actus-accueil.css — le bandeau d'actus de l'accueil. Brique « actus-accueil », JulienWeb,
   04/10/2026. Chargée sur l'accueil seulement, après style.css et commun.css.

   Tout sélecteur part du repère .jws-actus-accueil, posé par brique.php juste avant div.news-home :
   sans lui, rien ici ne s'applique. Le balisage est celui du thème (news-alaune.php,
   news-vignette.php), inchangé :

     div.news-home > div.container > div.row > div.col-md-3 > div.news-vignette
         > a (la photo ronde)   > div.parents-artiste-projet   > div.news-title

   Règles tenues : rien sur la photo, pas de gras ajouté, couleurs et graisses du thème.

   1. Deux colonnes      2. Une actu : photo à gauche, texte à droite
   --------------------------------------------------------------------------------------------- */


/* -- 1. Deux colonnes ---------------------------------------------------------------------------
   Le thème donne 4 colonnes (.col-md-3) à partir de 768 px, une seule en dessous. */

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

@media (min-width: 768px) {
    .jws-actus-accueil ~ .news-home .row > .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
        /* Les deux actus d'une rangée prennent la même hauteur : leurs photos restent alignées
           quand l'un des deux titres est plus long que l'autre. */
        display: flex;
    }

    .jws-actus-accueil ~ .news-home .row > .col-md-3 > .news-vignette {
        flex: 1 1 auto;
    }
}


/* -- 2. Une actu ---------------------------------------------------------------------------------
   Une grille de deux colonnes. La photo occupe la première sur toute la hauteur ; le texte est
   rangé dans les rangées 2 à 4, et les rangées 1 et 5 (1fr) se partagent ce qui reste : le texte
   est centré sur la photo quand il est plus court qu'elle, la photo centrée sur lui sinon. */

.jws-actus-accueil ~ .news-home .news-vignette {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: 16px;
    margin-bottom: 1.75em;
}

.jws-actus-accueil ~ .news-home .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-accueil ~ .news-home .news-thumb {
    width: 80px;
    height: 80px;
    margin-bottom: 0;
}

.jws-actus-accueil ~ .news-home .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-accueil ~ .news-home .parents-artiste-projet .artist-name,
.jws-actus-accueil ~ .news-home .parents-artiste-projet .projet-name {
    margin: 0;
    text-align: left;
}

.jws-actus-accueil ~ .news-home .news-vignette > .news-title {
    grid-column: 2;
    grid-row: 4;
    margin: 2px 0 0;
}

/* Ce qu'une autre brique ajouterait sous le titre (jws_actu_vignette_fin). */
.jws-actus-accueil ~ .news-home .news-vignette > .news-title ~ * {
    grid-column: 2;
    grid-row: 5;
}

/* La ligne « catégorie · date » (08/10, demande de Julien : le même encart que sur la page des
   actus) : servie après le titre, affichée en tête. 11 px en petites capitales, la catégorie
   indigo, la date grise ; la date ne se coupe pas. */
.jws-actus-accueil ~ .news-home .news-vignette > .news-title ~ .jws-actus-accueil__meta {
    grid-row: 2;
}

.jws-actus-accueil__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin: 0 0 3px;
    color: var(--jws-indigo, #312783);
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.jws-actus-accueil__meta .jws-tesselle {
    width: 6px;
    height: 6px;
    margin: 0 .7em 0 2px;
}

.jws-actus-accueil__cat {
    color: var(--jws-indigo, #312783);
    font-size: inherit;
    text-decoration: none;
}

a.jws-actus-accueil__cat:hover {
    color: var(--jws-indigo, #312783);
    text-decoration: underline;
}

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

.jws-actus-accueil__sep {
    color: var(--jws-gris, #666);
}

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

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

/* La date, entre parenthèses à la suite du titre : brique.php la rentre dans div.news-title.
   12 px, la taille du nom de l'artiste ; gris, comme sur la page des actus. Elle ne se coupe pas. */
.jws-actus-accueil__date {
    color: var(--jws-gris, #666);
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    white-space: nowrap;
}

@media (min-width: 576px) {
    .jws-actus-accueil ~ .news-home .news-vignette {
        grid-template-columns: 100px minmax(0, 1fr);
        column-gap: 22px;
    }

    .jws-actus-accueil ~ .news-home .news-thumb {
        width: 100px;
        height: 100px;
    }
}

/* Le bouton « Plus de news », à droite sous la liste (div.news-row, frère de div.row). */
.jws-actus-accueil ~ .news-home .container > .news-row {
    text-align: right;
}

/* Sur deux colonnes, un peu d'air entre le texte de gauche et la photo de droite. */
@media (min-width: 768px) {
    .jws-actus-accueil ~ .news-home .row > .col-md-3:nth-child(odd) {
        padding-right: 30px;
    }
}


/* -- Les tailles de la page des actus (08/10, demande de Julien) ---------------------------------
   Photo, nom de l'artiste et titre reprennent les valeurs d'actus-liste.css, largeur par largeur.
   Seul écart : entre 768 et 991 px l'accueil est déjà sur deux colonnes (la page des actus n'en a
   qu'une), la photo y reste à 112 px pour laisser sa place au texte.
     téléphone      photo 26 % de la largeur, 112 px au plus     nom 14 px    titre 16 px
     576 à 1199 px  photo 112 px                                 nom 15 px    titre 16 px
     1200 px et +   photo 140 px                                 nom 16 px    titre 17 px
   Posées en fin de feuille : elles passent devant les 80 et 100 px écrits plus haut. */

.jws-actus-accueil ~ .news-home {
    --jws-aa-photo: min(112px, 26vw);
    --jws-aa-ecart: 16px;
    --jws-aa-nom: .875em;      /* un cran de moins le 14/10, comme /news/ (Julien) */
    --jws-aa-titre: 1em;
}

.jws-actus-accueil ~ .news-home .news-vignette {
    grid-template-columns: var(--jws-aa-photo) minmax(0, 1fr);
    column-gap: var(--jws-aa-ecart);
}

.jws-actus-accueil ~ .news-home .news-thumb {
    width: var(--jws-aa-photo);
    height: var(--jws-aa-photo);
}

.jws-actus-accueil ~ .news-home .news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jws-actus-accueil ~ .news-home .parents-artiste-projet .artist-name {
    font-size: var(--jws-aa-nom);
    line-height: 1.25;
}

.jws-actus-accueil ~ .news-home .parents-artiste-projet .artist-name a {
    font-size: inherit;
}

.jws-actus-accueil ~ .news-home .news-vignette > .news-title {
    font-size: var(--jws-aa-titre);
}

@media (min-width: 576px) {
    .jws-actus-accueil ~ .news-home {
        --jws-aa-photo: 112px;
        --jws-aa-ecart: 20px;
        --jws-aa-nom: .9375em;
    }
}

@media (min-width: 1200px) {
    .jws-actus-accueil ~ .news-home {
        --jws-aa-photo: 140px;
        --jws-aa-ecart: 24px;
        --jws-aa-nom: 1em;
        --jws-aa-titre: 1.0625em;
    }
}