:root { --currentColor: var(--bleu); }

article > a {
    font-weight: var(--fw-normal);
    border-bottom: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

    article header { 
        margin-bottom: 1rem;
    }
    article a p:last-child.plus {
        width: fit-content;
        margin-top: auto;
        font-size: var(--fs-m);
        border-bottom: 1px solid;
    }

/* INTRO -------------------------------------------------------- */   
#intro {
    color: var(--currentColor);
    background-color: var(--lightColor);

}
#intro h1 {
    padding-bottom: 0;
}
#intro h2 {
    font-size: var(--t2);
}
    #intro > div, 
    #intro > nav {
        border-top: var(--border);
    }
    .newsletter {
        margin-top: auto;
        padding-top: var(--padding);
    }
        .newsletter p {
            --columns: 1;
            margin: 1rem 0;
            padding: 0;
            grid-column: span var(--columns);
        }
        .newsletter .bouton {
            --columns: 1;
            color: var(--blanc);
            background-color: var(--currentColor);
            grid-column: span var(--columns);
        }

 

/* UNE ---------------------------------------------------------- */
.article-une-extrait h3 {
    font-size: var(--t2);

}
.article-une-extrait figure {
    
    grid-row: 1/2;
    margin-bottom: var(--padding);
}
.article-une-extrait .article-textcontent {
    
    grid-row: 2/3;
}
    .article-extrait-text {
        font-size: var(--fs-l);
        margin-bottom: var(--padding);
    }
/* ARTICLES ----------------------------------------------------- */  
#articles {
        list-style: none;
        --column-width: 100%;
        columns: 1 ;
        column-width: var(--column-width);
        column-rule: dotted 1px ;
        column-gap: var(--padding);
        row-gap: var(--padding);
        padding-top: var(--padding);
    }
    /* BLOC Filtres NAV  */
    #articles .filtres {
        column-span: all;
        border-bottom: 1px dotted;
        position: relative;
        padding-top: 1rem;
        margin-bottom: calc(var(--padding) - 1rem);
        background-color: var(--lightColor);
        z-index: 100;
    }


        nav.filtercloud {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            padding-bottom: .5rem;
            margin: 0 auto ;
            width: fit-content;
        }
        /* nav.filtercloud {
            align-content: center;
        } */
        nav.filtercloud > * {
            width: fit-content;
            font-size: var(--fs-xs);
            margin-top: 0;
        }

        nav.filtercloud > h4 {
            margin-right: 1rem;

            font-weight: var(--fw-normal);
        }        

            nav.filtercloud a {
                line-height: 1.5rem;
                border: none;
                font-weight: var(--fw-normal);
                border: 1px solid;
                border-radius: 1rem;
                padding-inline: .75rem;
                padding-bottom: .1rem;
                margin: 0 .25rem .5rem .25rem;
            }
                nav.filtercloud a.filtre-actif { 
                    color: var(--lightColor);
                    background-color: var(--currentColor);
                    border-color: transparent;
                }    


    /* ARTICLE */            
    .article-extrait,
    .article-extrait-event,
    .article-extrait-projet {
        break-inside: avoid-column; 
        padding: 1rem 0 var(--padding) 0 ;
        margin-bottom: var(--padding);
        border-bottom: 1px dotted;
    }

        /* Article en avant */
        .article-extrait > a,
        .article-extrait-event > a,
        .article-extrait-projet > a {
            padding: 1rem 1rem var(--padding) 1rem ;
        }
        /* Article Evenement */
        .article-extrait-event > a {
            color: var(--bleu);
            background-color: var(--blanc);
        }
        /* Article Projet */
        .article-extrait-projet > a {
            color: var(--lightColor);
            background-color: var(--currentColor);
        }

            .article-extrait-categorie {
                text-transform: uppercase;
                font-size: var(--fs-s);
                font-weight: var(--fw-gras);
            }
            .article-extrait-title {
                margin-bottom: 1rem;
            }   

@media screen and (min-width: 610px)  {
    /* INTRO -------------------------------------------------------- */    
    #intro {
        min-height: var(--hauteur-section);
    }
        .newsletter .bouton:hover {
            border: 1px solid var(--currentColor);
            color: var(--currentColor);
            background-color: var(--blanc);
        }

    /* UNE ---------------------------------------------------------- */
    .article-une-extrait figure {

        margin-bottom: 0;
        min-width: 300px;
        height: auto;
        aspect-ratio: 1/1;
    }

    .article-une-extrait .article-textcontent {
        grid-column: span 8;
        grid-row: 1/2;

    }
        /* Une a HOVER */
        .article-une-extrait > a:hover {
            color: var(--bleu);
            background-color: transparent ;
        }
            .article-une-extrait > a:hover header > *, 
            .article-une-extrait > a:hover .article-extrait-text > *,
            .article-une-extrait > a:hover .plus
            {
                background-color: var(--blanc);
                width: fit-content;
            }
            article > a:hover p:last-child.plus {
                font-weight: var(--fw-gras);
                border-bottom: none;
            }

    /* BLOC FILTER NAV */
    #articles .filtres {
        position: sticky;
        top: var(--hauteurMenu);
    }
        nav.filtercloud > * {
            font-size: var(--fs-m);
        }

    /* ARTICLES ----------------------------------------------------- */
    .article-extrait,
    .article-extrait-event,
    .article-extrait-projet {
        padding: 1rem 1rem var(--padding) 1rem ;
        margin-bottom: var(--padding);
    }

        .article-extrait-text {
            font-size: var(--fs-m);
        }
        
            /* A HOVER */
            .article-extrait > a:hover, 
            .article-extrait-projet > a:hover {
                color: var(--bleu);
                background-color: var(--blanc) ;
            }
            /* Article Evenement HOVER */
            .article-extrait-event > a:hover {
                color: var(--blanc);
                background-color: var(--bleu) ;
            }

}

@media screen and (min-width: 1024px) {

    /* INTRO ---------------------------------------------------------- */
    .newsletter p {
        --columns: 8;  
        margin: 0;
        padding: 0;
    }
    .newsletter .bouton {
        --columns: 4;
        width: 100%;
        justify-self: end;
    }

    /* UNE ---------------------------------------------------------- */
    .article-une-extrait figure {
        grid-column: span 4;
    }

    /* ARTICLES ----------------------------------------------------- */
    #articles {
        --column-width: calc((100% / 3) - (var(--padding) * 4));
        columns: 3 ;
    }

}

@media screen and (min-width: 1920px) {
    
    /* ARTICLES ----------------------------------------------------- */    
    #articles {
        --column-width: calc((100% / 2) - var(--padding)*5);
        columns: 4 ;
    }
 
}