.listeVignettes{
 padding-bottom:105px;
 display: flex;
 flex-direction: column;
 align-items: center;
}
.listeVignettes > .ti{
 padding:120px 20px 0;
 text-align: center;
}
.listeVignettes > .ckeditor{
 text-align: center;
}
.listeVignettes > .ti + .liste,
.listeVignettes > .ckeditor + .liste{
 padding-top: 90px;
}
.listeVignettes > .ti + .ckeditor{
 padding: 45px 20px 0;
}
.listeVignettes .liste{
display:flex;
flex-flow:row wrap;
 justify-content:center;
 padding:0 60px;
 width: 100%;
}

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

.listeVignettes .liste article{
 display:flex;
 flex-direction:column;
 justify-content: space-between;
 margin:0 25px 20px;
 text-align: center;
}
.listeVignettes .liste.col2 article{
width:calc(50% - 50px);
}
.listeVignettes .liste.col3 article{
 width:calc(calc(100%/3) - 50px);
}
.listeVignettes .liste.col4 article{
 width:calc(calc(100%/4) - 50px);
}
.listeVignettes a img{
 margin: 0 auto;
}
.listeVignettes a.link{
margin-top: 10px;
}
.listeVignettes .img{
 overflow:hidden;
 position:relative;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
}
.listeVignettes .img img{
 margin: 0 auto;
 transition:all .3s ease-in-out;
}
.listeVignettes a.img:hover img{
 transform:scale(1.2);
}
.listeVignettes article:not(.no_txt) a.img:hover img{
opacity:0.7;
}
.listeVignettes .liste article .txt{
 padding:25px;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}
.listeVignettes .liste article .ssti{
 font-family: 'transducer-extended', Arial, sans-serif;
 font-size: 35px;
 font-weight: 500;
 margin-bottom: 25px;
 hyphens: auto;
}
.listeVignettes > .lien,
.listeVignettes .liste article .txt .lien{
 width:100%;
 display:flex;
 flex-direction:column;
 align-items:center;
}
.listeVignettes .liste article .txt .lien .bt{
 min-width:auto;
 max-width:100%;
 width:282px;
}
.listeVignettes > .bt{
 margin:60px 0 20px;
}
.listeVignettes .liste + .bt{
 margin-top:50px;
}

@media screen and (max-width:1440px){
 .listeVignettes > .ti{
  padding: 85px 50px 0;
 }
 .listeVignettes > .ti + .liste,
 .listeVignettes > .ckeditor + .liste{
  padding-top: 65px;
 }
 .listeVignettes > .ti + .ckeditor{
  padding: 40px 20px 0;
 }
 .listeVignettes .liste article{
  margin:0 15px 20px;
 }
 .listeVignettes .liste.col2 article{
  width:calc(50% - 30px);
 }
 .listeVignettes .liste.col3 article{
  width:calc(calc(100%/3) - 30px);
 }
 .listeVignettes .liste.col4 article{
  width:calc(calc(100%/4) - 30px);
 }
}
@media screen and (max-width:1280px){
 .listeVignettes{
  padding-bottom:65px;
 }
 .listeVignettes .liste{
  padding: 0 30px;
 }
 .listeVignettes .liste article{
  margin:0 10px 20px;
 }
 .listeVignettes .liste.col2 article{
  width:calc(50% - 20px);
 }
 .listeVignettes .liste.col3 article{
  width:calc(calc(100%/3) - 20px);
 }
 .listeVignettes .liste.col4 article{
  width:calc(calc(100%/4) - 20px);
 }
 .listeVignettes .liste article .ssti{
  font-size:30px;
  line-height:35px;
 }
}
@media screen and (max-width:1080px){

 .listeVignettes .liste article .ssti{
  font-size:22px;
  line-height:22px;
 }

}
@media screen and (max-width:980px){
 .listeVignettes{
  padding-bottom:30px;
 }
 .listeVignettes > .ti {
  padding: 50px 25px 0;
 }
 .listeVignettes > .ti + .liste,
 .listeVignettes > .ckeditor + .liste{
  padding-top: 35px;
 }
 .listeVignettes > .ti + .ckeditor{
  padding: 25px 25px 0;
 }

 .listeVignettes .liste{
  padding:15px;
 }
 .listeVignettes .liste.col4 article{
  width:calc(calc(100%/2) - 20px);
 }
 .listeVignettes .liste article .txt{
  padding: 15px;
 }
}
@media screen and (max-width:750px){
 .listeVignettes .liste article .ssti{
  font-size:18px;
  line-height:18px;
 }
}
@media screen and (max-width:650px){
 .listeVignettes .liste.col3 article{
  width:calc(calc(100%/2) - 20px);
 }
}

@media screen and (max-width:400px){
 .listeVignettes .liste.col2 article,
 .listeVignettes .liste.col3 article,
 .listeVignettes .liste.col4 article{
  width:100%;
 }
}
@media screen and (max-width:500px){
 .listeVignettes .liste article .ssti{
  font-size:16px;
  line-height:16px;
 }
}