section.listeVignettes{
background-color:var(--noir);
color:var(--beige);
padding:130px 65px;
}

section.listeVignettes .content{
width:1610px;
max-width:100%;
margin:0 auto;
text-align:center;
}

section.listeVignettes .content > .titre1 + .liste{padding-top:130px;}

section.listeVignettes .content .liste{
display:flex;
flex-flow:row wrap;
justify-content:center;
}

section.listeVignettes .content .liste .bloc{
display:flex;
flex-flow:column;
justify-content:space-between;
width:25%;
border-right:1px solid var(--beige);
border-left:1px solid var(--beige);
border-bottom:2px solid var(--beige);
}

section.listeVignettes .content .liste .bloc:nth-child(1), section.listeVignettes .content .liste .bloc:nth-child(2), section.listeVignettes .content .liste .bloc:nth-child(3), section.listeVignettes .content .liste .bloc:nth-child(4){
border-top:2px solid var(--beige);
}

section.listeVignettes .content .liste .bloc:first-child, section.listeVignettes .content .liste .bloc:nth-child(4n+1){border-left:2px solid var(--beige);}

section.listeVignettes .content .liste .bloc:last-child, section.listeVignettes .content .liste .bloc:nth-child(4n+4){border-right:2px solid var(--beige);}

section.listeVignettes .content .liste .bloc > .titre2{
padding:20px;
border-bottom:2px solid var(--beige);
}

section.listeVignettes .content .liste .bloc > figure{
position:relative;
flex:1;
display:flex;
flex-flow:column;
justify-content:center;
align-items:center;
}

section.listeVignettes .content .liste .bloc > figure > img{
width:100%;
height:100%;
object-fit:cover;
}

section.listeVignettes .content .liste .bloc > figure > .picto{
padding:100px 20px;
opacity:1;
transition:0.3s ease-in-out;
}

section.listeVignettes .content .liste .bloc > figure > .picto img{
max-height:80px;
max-width:80px;
margin:0 auto;
}

section.listeVignettes .content .liste .bloc > figure > .picto + img{
position:absolute;
top:0;
left:0;
opacity:0;
transition:0.3s ease-in-out;
}

section.listeVignettes .content .liste .bloc > .lien{
position:relative;
padding:20px 70px 20px 50px;
text-transform:uppercase;
line-height:25px;
border-top:2px solid var(--beige);
font-size:23px;
line-height:27px;
}

section.listeVignettes .content .liste .bloc > .lien::after{
content:'';
position:absolute;
top:0;
right:0;
width:50px;
height:100%;
background:url(fleche_beige.png) no-repeat center center;
background-size:25px auto;
border-left:2px solid var(--beige);
transition:0.3s ease-in-out;
}

section.listeVignettes .content .liste .bloc:hover > figure > .picto + img{opacity:1;}

section.listeVignettes .content .liste .bloc:hover > figure > .picto{opacity:0;}

section.listeVignettes .content .liste .bloc:hover > .titre2, section.listeVignettes .content .liste .bloc:hover > .lien{
background-color:var(--beige);
color:var(--noir);
}

section.listeVignettes .content .liste .bloc:hover > .lien::after{background-image:url(fleche_noir.png);}

section.listeVignettes .content .liste.hidden{display:none;}

/********** medias **********/
@media screen and (max-width:1460px){
section.listeVignettes{padding:100px 40px;}

section.listeVignettes .content > .titre1 + .liste{padding-top:80px;}
}

@media screen and (max-width:1380px){
section.listeVignettes .content .liste .bloc > .lien{
font-size:20px;
line-height:22px;
}

section.listeVignettes .content .liste .bloc > .titre2{padding:15px 5px;}

section.listeVignettes .content .liste .bloc > figure > .picto{padding:80px 20px;}
}

@media screen and (max-width:1180px){
section.listeVignettes{padding:60px 20px;}

section.listeVignettes .content > .titre1 + .liste{padding-top:40px;}

section.listeVignettes .content .liste .bloc > .lien{padding:10px 70px 10px 20px;}

section.listeVignettes .content .liste .bloc > .lien::after{
width:40px;
background-size:20px auto;
}
}

@media screen and (max-width:980px){
section.listeVignettes .content .liste .bloc{width:50%;}

section.listeVignettes .content .liste .bloc{
margin-top:10px;
border-top:2px solid var(--beige) !important;
}

section.listeVignettes .content .liste .bloc:nth-child(4n+1){border-left:0;}

section.listeVignettes .content .liste .bloc:nth-child(2n+1){border-left:2px solid var(--beige);}

section.listeVignettes .content .liste .bloc:nth-child(4n+4){border-right:0;}

section.listeVignettes .content .liste .bloc:nth-child(2n+2){border-right:2px solid var(--beige);}

section.listeVignettes .content .liste .bloc > figure > .picto{padding:60px 20px;}
}

@media screen and (max-width:680px){
section.listeVignettes .content .liste .bloc > figure > .picto{padding:40px 20px;}

section.listeVignettes .content .liste .bloc > figure > .picto img{
max-width:60px;
max-height:60px;
}
}

@media screen and (max-width:580px){
section.listeVignettes{padding:40px 20px;}

section.listeVignettes .content .liste .bloc{width:100%;}

section.listeVignettes .content .liste .bloc{
border-left:2px solid var(--beige) !important;
border-right:2px solid var(--beige) !important;
margin-top:10px;
}

section.listeVignettes .content .liste .bloc > .titre2{padding:10px 5px;}

section.listeVignettes .content .liste .bloc > .lien{
font-size:16px;
line-height:18px;
background:var(--beige);
color:var(--noir);
}

section.listeVignettes .content .liste .bloc > .lien::after{background-image:url(fleche_noir.png);}
}