section.listeVignettes{
margin:0 20px;
border-radius:15px;
padding:60px 50px;
}

section.listeVignettes.is_bg{padding:120px 50px;}

section + section.listeVignettes{margin-top:20px;}

section.listeVignettes .conteneur{
width:1680px;
max-width:100%;
margin:0 auto;
color:var(--vert1);
}

section.listeVignettes.txt_blanc .conteneur{color:#fff;}

section.listeVignettes.bloc_pt .conteneur{width:1450px;}

section.listeVignettes .conteneur .intro{
width:930px;
max-width:100%;
margin:0 auto;
text-align:center;
}

section.listeVignettes .conteneur .intro.hidden{display:none;}

section.listeVignettes .conteneur .intro > .surti{
font-size:15px;
line-height:17px;
text-transform:uppercase;
font-family:var(--font-bold);
letter-spacing:0.5px;
}

section.listeVignettes .conteneur .intro > .titre2 + .ckeditor, section.listeVignettes .conteneur .intro > .surti + .ckeditor{padding-top:30px;}

section.listeVignettes .conteneur .intro > .surti + .titre2{padding-top:10px;}

section.listeVignettes .conteneur .vignettes{
display:flex;
justify-content:center;
flex-flow:row wrap;
padding-top:70px;
}

section.listeVignettes .conteneur .vignettes.hidden{display:none;}

section.listeVignettes .conteneur .intro.hidden + .vignettes{padding-top:0;}

section.listeVignettes .conteneur .vignettes > article{
position:relative;
transform:translateY(50px);
opacity:0.5;
transition:opacity 0.8s, transform 0.4s ease-in-out;
margin:10px;
width:calc(50% - 20px);
border-radius:15px;
background-color:#fff;
overflow:hidden;
}

section.listeVignettes .conteneur .vignettes > article.go_anim{
transform:translateY(0);
opacity:1;
}

section.listeVignettes .conteneur .vignettes > article .bloc{
display:flex;
flex-flow:column;
height:100%;
}

section.listeVignettes .conteneur .vignettes > article .bloc > figure, section.listeVignettes .conteneur .vignettes > article .bloc > figure img{width:100%;}

section.listeVignettes .conteneur .vignettes > article .bloc > figure{overflow:hidden;}

section.listeVignettes .conteneur .vignettes > article .bloc > figure img{transition:all 0.6s ease-in-out;}

section.listeVignettes .conteneur .vignettes > article .bloc:hover > figure img{transform:scale(1.1);}

section.listeVignettes .conteneur .vignettes > article.image_bottom{flex-flow:column-reverse;}

section.listeVignettes .conteneur .vignettes > article.image_bottom > figure{margin-top:auto;}

section.listeVignettes .conteneur .vignettes > article.col_3{width:calc((100% / 3) - 20px);}

section.listeVignettes .conteneur .vignettes > article.col_4{width:calc(25% - 20px);}

section.listeVignettes .conteneur .vignettes > article.col_5{width:calc(20% - 20px);}

section.listeVignettes .conteneur .vignettes > article .bloc > .txt{
flex:1;
display:flex;
flex-flow:column;
align-items:center;
text-align:center;
padding:40px;
color:var(--vert1);
}

section.listeVignettes .conteneur .vignettes > article.txt_blanc .bloc > .txt{color:#fff;}

section.listeVignettes .conteneur .vignettes > article .bloc > .txt .ckeditor{
width:380px;
max-width:100%;
}

section.listeVignettes .conteneur .vignettes > article .bloc > .txt .ti + figure.picto, section.listeVignettes .conteneur .vignettes > article .bloc > .txt .ckeditor + figure.picto{margin-top:40px;}

section.listeVignettes .conteneur .vignettes > article .bloc > .txt .ti + .ckeditor{margin-top:30px;}

section.listeVignettes .conteneur .vignettes > article .bloc > .txt .lien{margin-top:auto;}

section.listeVignettes .conteneur .vignettes > article .bloc > .txt figure.picto + .ti, section.listeVignettes .conteneur .vignettes > article .bloc > .txt figure.picto + .ckeditor, section.listeVignettes .conteneur .vignettes > article .bloc > .txt figure.picto + .lien, section.listeVignettes .conteneur .vignettes > article .bloc > .txt .ti + .lien, section.listeVignettes .conteneur .vignettes > article .bloc > .txt .ckeditor + .lien, section.listeVignettes .conteneur .vignettes > article .bloc > .txt figure.picto + .lien{padding-top:30px;}

section.listeVignettes .conteneur .vignettes > article .bloc > .txt .lien{width:100%;}

section.listeVignettes .conteneur .vignettes > article .bloc > .txt .lien .bt.masque{margin-left:auto;}

section.listeVignettes .conteneur > .liens{
display:flex;
flex-flow:row wrap;
justify-content:center;
align-items:center;
text-align:center;
padding-top:80px;
}

section.listeVignettes .conteneur > .liens a{margin:10px 7px 0 7px;}

section.listeVignettes .conteneur .intro.hidden + .vignettes.hidden + .liens{padding-top:0;}

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

section.listeVignettes.is_bg{padding:80px 10px;}
}

@media screen and (max-width:1280px){
section.listeVignettes .conteneur .vignettes > article .bloc > .txt{padding:20px;}
}

@media screen and (max-width:1180px){
section.listeVignettes, section.listeVignettes.is_bg{padding:50px 0;}

section.listeVignettes .conteneur .vignettes{padding:40px 10px 0 10px;}

section.listeVignettes .conteneur .vignettes > article .bloc > .txt .ti + figure.picto, section.listeVignettes .conteneur .vignettes > article .bloc > .txt .ckeditor + figure.picto{margin-top:20px;}

section.listeVignettes .conteneur .vignettes > article .bloc > .txt .ti + .ckeditor{margin-top:20px;}

section.listeVignettes .conteneur .vignettes > article .bloc > .txt figure.picto + .ti, section.listeVignettes .conteneur .vignettes > article .bloc > .txt figure.picto + .ckeditor, section.listeVignettes .conteneur .vignettes > article .bloc > .txt figure.picto + .lien, section.listeVignettes .conteneur .vignettes > article .bloc > .txt .ti + .lien, section.listeVignettes .conteneur .vignettes > article .bloc > .txt .ckeditor + .lien, section.listeVignettes .conteneur .vignettes > article .bloc > .txt figure.picto + .lien{padding-top:20px;}

section.listeVignettes .conteneur > .liens{padding-top:40px;}
}

@media screen and (max-width:1080px){
section.listeVignettes .conteneur .vignettes > article.col_4{width:calc((100% / 3) - 20px);}

section.listeVignettes .conteneur .vignettes > article.col_5{width:calc(25% - 20px);}
}

@media screen and (max-width:980px){
section.listeVignettes .conteneur .intro{padding:0 20px;}
}

@media screen and (max-width:880px){
section.listeVignettes .conteneur .vignettes > article.col_3, section.listeVignettes .conteneur .vignettes > article.col_4{width:calc(50% - 20px);}

section.listeVignettes .conteneur .vignettes > article.col_5{width:calc((100% / 3) - 20px);}
}

@media screen and (max-width:780px){
section.listeVignettes .conteneur .vignettes > article.col_2{
width:100%;
margin-left:0;
margin-right:0;
}
}

@media screen and (max-width:680px){
section.listeVignettes, section.listeVignettes.is_bg{padding:30px 0;}

section.listeVignettes .conteneur .vignettes > article, section.listeVignettes .conteneur .vignettes > article.col_3{
width:100%;
margin-left:0;
margin-right:0;
}

section.listeVignettes .conteneur .vignettes > article.col_5{width:calc(50% - 20px);}

section.listeVignettes .conteneur > .liens{padding-top:20px;}
}

@media screen and (max-width:580px){
section.listeVignettes .conteneur .vignettes > article.col_4{
width:100%;
margin-left:0;
margin-right:0;
}
}

@media screen and (max-width:480px){
section.listeVignettes .conteneur .vignettes > article.col_5{
width:100%;
margin-left:0;
margin-right:0;
}

section.listeVignettes .conteneur .vignettes > article .bloc > .txt{padding:20px 10px;}

section.listeVignettes .conteneur > .liens a{
width:100%;
margin:10px 0 0 0;
}
}