.blocMod.listeVignettes{padding:50px 20px;}

.blocMod.listeVignettes .wrapper{
width:1480px;
max-width:100%;
margin:0 auto;
color:var(--noir);
}

.blocMod.listeVignettes.txt_beige .wrapper{color:var(--beige);}

.blocMod.listeVignettes .wrapper .filAriane{text-align:center;}

.blocMod.listeVignettes.txt_beige .wrapper .filAriane{color:var(--beige);}

.blocMod.listeVignettes.txt_beige .wrapper .filAriane span.separ{background-color:var(--beige);}

.blocMod.listeVignettes .wrapper .intro{
width:820px;
max-width:100%;
margin:0 auto;
text-align:center;
}

.blocMod.listeVignettes .wrapper .intro .ti + .ckeditor{padding-top:10px;}

.blocMod.listeVignettes .wrapper > .intro + figure{padding-top:20px;}

.blocMod.listeVignettes .wrapper > .intro.hidden + figure{padding-top:0;}

.blocMod.listeVignettes .wrapper > figure{
border-radius:5px;
overflow:hidden;
}

.blocMod.listeVignettes .wrapper > figure img{width:100%;}

.blocMod.listeVignettes .wrapper .articles{
position:relative;
display:flex;
flex-flow:row wrap;
justify-content:center;
width:calc(100% + 30px);
left:-15px;
opacity:0.1;
transform:translateX(-50%);
transition:transform 0.3s, opacity 1s;
padding-top:30px;
}

.blocMod.listeVignettes .wrapper .articles.animer{
transform:translateX(0);
opacity:1;
}

.blocMod.listeVignettes .wrapper .intro.hidden, .blocMod.listeVignettes .wrapper .articles.hidden{display:none;}

.blocMod.listeVignettes .wrapper .intro + figure + .articles{padding-top:0;}

.blocMod.listeVignettes .wrapper .articles > article{
display:flex;
flex-flow:column;
margin:25px 15px;
width:calc((100% / 3) - 30px);
}

.blocMod.listeVignettes .wrapper .articles > article > figure{
border-radius:5px;
overflow:hidden;
}

.blocMod.listeVignettes .wrapper .articles > article > figure, .blocMod.listeVignettes .wrapper .articles > article > .ti, .blocMod.listeVignettes .wrapper .articles > article > .ckeditor{width:100%;}

.blocMod.listeVignettes .wrapper .articles > article > figure img{margin:0 auto;}

.blocMod.listeVignettes .wrapper .articles > article > .ti, .blocMod.listeVignettes .wrapper .articles > article > .ckeditor{
border-bottom:1px solid var(--noir);
border-left:1px solid var(--noir);
}

.blocMod.listeVignettes.txt_beige .wrapper .articles > article > .ti, .blocMod.listeVignettes.txt_beige .wrapper .articles > article > .ckeditor{
border-bottom:1px solid var(--beige);
border-left:1px solid var(--beige);
}

.blocMod.listeVignettes .wrapper .articles > article > .ti{padding:5px 0 7px 10px;}

.blocMod.listeVignettes .wrapper .articles > article > .ckeditor{
padding:5px 0 70px 10px;
flex:1;
}

.blocMod.listeVignettes .wrapper .articles > article > .ckeditor.is_lien{padding-bottom:30px;}

.blocMod.listeVignettes .wrapper .articles > article > .ckeditor > .lien{
text-align:center;
padding-top:100px;
}

.blocMod.listeVignettes .wrapper .articles > article > figure + .ti, .blocMod.listeVignettes .wrapper .articles > article > figure + .ckeditor, .blocMod.listeVignettes .wrapper .articles > article > .ti + .ckeditor{margin-top:20px;}

.blocMod.listeVignettes .wrapper > .liens{
padding-top:55px;
display:flex;
flex-flow:row wrap;
align-items:center;
position:relative;
width:calc(100% + 20px);
left:-10px;
justify-content:center;
}

.blocMod.listeVignettes .wrapper .liens a{margin:10px;}

.blocMod.listeVignettes .wrapper .intro.hidden + .articles.hidden + .liens{padding-top:0;}

/********** medias **********/
@media screen and (max-width:1380px){
.blocMod.listeVignettes{padding:25px 20px 50px 20px;}
}

@media screen and (max-width:980px){
.blocMod.listeVignettes{padding:25px 20px;}

.blocMod.listeVignettes .wrapper .articles{
padding-top:40px;
width:calc(100% + 10px);
left:-5px;
}
.blocMod.listeVignettes .wrapper .articles > article{
margin:20px 5px;
width:calc((100% / 3) - 10px);
}

.blocMod.listeVignettes .wrapper .articles > article > .ckeditor{padding-bottom:20px;}

.blocMod.listeVignettes .wrapper > .liens{padding-top:25px;}
}

@media screen and (max-width:680px){
.blocMod.listeVignettes .wrapper .articles > article{width:calc((100% / 2) - 10px);}
}

@media screen and (max-width:480px){
.blocMod.listeVignettes .wrapper .articles{
width:100%;
left:0;
}

.blocMod.listeVignettes .wrapper .articles > article{
margin:20px 0;
width:100%;
}
}