.catTitle{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background-color: var(--grey);
    padding: var(--marge) ;
    font-size: var(--fsS);
    transition: .2s;
    cursor: pointer;
    border-bottom: 1px solid var(--black);
}

.catTitle:hover{
   background-color: var(--white);
   color: var(--black); 
}


.catList{
    display: grid;
    grid-template-rows: 0fr;
     transition: grid-template-rows 0.5s;
}

.catList.open{
    grid-template-rows: 1fr;
}

.wrapArticle{
    overflow: hidden;
}


#articleFilter{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    position: sticky;
    z-index: 2;
    top: var(--headerH);
    background-color: var(--white);
    color: var(--black);
    font-size: var(--fsS);
    border-bottom: 1px solid var(--black);
    font-family: "sabon";
}

.article{
    display: grid;
    position: relative;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--white);
}

.artInfo{
    display: block;
    padding: var(--marge);
    margin: var(--marge);
    grid-column: span 2;
}

.artInfo h2{
    font-size: var(--sanM);
    padding-bottom: calc(2 * var(--marge));

}

.subInfo{
    font-family: sabon;
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    font-size: var(--fsS);
    padding-bottom: calc(2 * var(--marge));
}

.artIntro{
    font-family: sabon;
    font-size: var(--fsS);
    line-height: 1.3;
}

.artImage{
    grid-column-start: 4;
}

.artImage img{
    display: block;
    width: 100%;
    height: auto;
}

.artSelect{
    display: none;
}

.artSelect:first-of-type{
    display: block;
}

.catSelect{
    cursor: pointer;
    transition: .3s;
    padding: var(--marge);
}

.catSelect:hover{
    background-color: var(--black);
    color: white;
}

#categorie{
    display: block;
    position: relative;
    grid-column: span 2;
    width: 100%;
}

#selection{
    display: block;
    position: absolute;
    top: 0;
    height: 0;
    overflow: hidden;
    width: 100%;
    opacity: 0;
    left: 0;
    background-color: var(--white);
}

#currentSel{
    padding: var(--marge);
}

#categorie:hover #selection{
    opacity: 1;
    height: auto;
}

.current::before{
    content: "⧓ ";
}

#rechercher{
    display: block;
    grid-column-start: 4;
    padding: 0;
    grid-column-end: 7;
}
input[type="text"] {
  all: unset;
}