.listeVignettes{
padding:120px 0 60px 0;
text-align:center;
}

.listeVignettes .content > .titre1{padding-bottom:120px;}

.listeVignettes .content .liste{
display:flex;
flex-flow:row wrap;
justify-content:center;
position:relative;
width:calc(100% + 30px);
left:-15px;
}

.listeVignettes .content .liste article{
padding-bottom:100px;
width:calc((100% - 120px) / 4);
margin:0 15px;
display:flex;
flex-flow:column;
justify-content:space-between;
}

.listeVignettes .content .liste article > figure{
position:relative;
overflow:hidden;
}

.listeVignettes .content .liste article > figure:after{
content:'';
display:block;
padding-bottom:100%;
}

.listeVignettes .content .liste article > figure img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
}

.listeVignettes .content .liste article > .txt > .titre3 + .ckeditor{padding-top:25px;}

.listeVignettes .content .liste article > figure + .txt{padding-top:50px;}

.listeVignettes .content .liste article > .txt > .ckeditor + .bt, .listeVignettes .content .liste article > .txt > .titre3 + .bt{margin-top:50px;}

.listeVignettes .content .liste article > .txt > .ckeditor{padding:0 40px;}

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

.listeVignettes .content > .titre1{padding-bottom:60px;}

.listeVignettes .content .liste article{width:calc((100% - 90px) / 3);}
}

@media screen and (max-width:1080px){
.listeVignettes .content .liste article > figure + .txt{padding-top:25px;}

.listeVignettes .content .liste article > .txt > .ckeditor + .bt{margin-top:25px;}
}

@media screen and (max-width:980px){
.listeVignettes .content .liste article > .txt > .ckeditor{padding:0;}

.listeVignettes .content .liste article{
width:calc((100% - 60px) / 2);
padding-bottom:50px;
}
}

@media screen and (max-width:650px){
.listeVignettes .content .liste article{
width:100%;
margin:0;
}

.listeVignettes .content .liste{
width:100%;
left:0;
}
}