.listeBlocsParRub{padding:80px 0;}

.listeBlocsParRub .content{display:flex;}

.listeBlocsParRub .content .left{width:30%;}

.listeBlocsParRub .content .left.hidden{display:none;}

.listeBlocsParRub.txt_blanc .content .left{color:#fff;}

.listeBlocsParRub .content .left .titre3 + .rub{padding-top:30px;}

.listeBlocsParRub .content .left .rub{
display:flex;
flex-flow:column;
}

.listeBlocsParRub .content .left .rub span{cursor:pointer;}

.listeBlocsParRub .content .left .rub span.on{text-decoration:underline;}

.listeBlocsParRub .content .left .rub span + span{margin-top:5px;}

.listeBlocsParRub .content .left > .titre3 + .bt, .rub + .bt{margin-top:30px;}

.listeBlocsParRub .content .left > .titre3{cursor:pointer;}

.listeBlocsParRub .content .liste{
width:70%;
display:flex;
flex-flow:row wrap;
}

.listeBlocsParRub .content .left.hidden + .liste{width:100%;}

.listeBlocsParRub .content .liste article{
position:relative;
overflow:hidden;
width:calc(25% - 20px);
margin:0 0 20px 20px;
background-color:#fff;
}

@-webkit-keyframes zoomOut{
0%{
opacity:1;
}
50%{
opacity:0;
-webkit-transform:scale3d(.3,.3,.3);
transform:scale3d(.3,.3,.3);
}
to{
opacity:0;
width:0;
margin:0;
}
}

@keyframes zoomOut{
0%{
opacity:1;
}
50%{
opacity:0;
-webkit-transform:scale3d(.3,.3,.3);
transform:scale3d(.3,.3,.3);
}
to{
opacity:0;
width:0;
margin:0;
}
}

@-webkit-keyframes zoomIn{
0%{
opacity:0;
-webkit-transform:scale3d(.3,.3,.3);
transform:scale3d(.3,.3,.3);
}
50%{
opacity:1;
}
}

@keyframes zoomIn{
0%{
opacity:0;
-webkit-transform:scale3d(.3,.3,.3);
transform:scale3d(.3,.3,.3);
}
50%{
opacity:1;
}
}

.listeBlocsParRub .content .liste article.zoomIn, .listeBlocsParRub .content .liste article.zoomOut{
-webkit-animation-duration:1s;
animation-duration:1s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both;
}

.listeBlocsParRub .content .liste article.zoomOut{
-webkit-animation-name:zoomOut;
animation-name:zoomOut;
order:100;
}

.listeBlocsParRub .content .liste article.zoomIn{
-webkit-animation-name:zoomIn;
animation-name:zoomIn;
}

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

.listeBlocsParRub .content .liste article .bloc{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

.listeBlocsParRub .content .liste article .bloc figure{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:2;
}

.listeBlocsParRub .content .liste article .bloc figure.logo{
display:flex;
flex-flow:column;
justify-content:center;
align-items:center;
padding:50px 30px;
}

.listeBlocsParRub .content .liste article .bloc figure.img img{
width:100%;
height:100%;
object-fit:cover;
}

.listeBlocsParRub .content .liste article .bloc figure + figure{
opacity:0;
z-index:4;
transition:opacity 0.3s;
}

.listeBlocsParRub .content .liste article .bloc:hover figure + figure{opacity:1;}


@media screen and (max-width:1280px){
.listeBlocsParRub .content .left{width:300px;}

.listeBlocsParRub .content .liste{width:calc(100% - 300px);}
}

@media screen and (max-width:1180px){
.listeBlocsParRub .content .liste article{width:calc((100% / 3) - 20px);}
}

@media screen and (max-width:980px){
.listeBlocsParRub{padding:50px 0;}

.listeBlocsParRub .content .left{
width:200px;
font-size:15px;
line-height:18px;
}

.listeBlocsParRub .content .left .rub span + span{margin-top:10px;}

.listeBlocsParRub .content .liste{width:calc(100% - 200px);}

.listeBlocsParRub .content .liste article .bloc figure.logo{padding:20px;}
}

@media screen and (max-width:760px){
.listeBlocsParRub{padding:30px 0;}

.listeBlocsParRub .content{flex-flow:column;}

.listeBlocsParRub .content .left{width:100%;}

.listeBlocsParRub .content .left{
text-align:center;
padding-bottom:20px;
}

.listeBlocsParRub .content .left .titre3 + .rub{padding-top:20px;}

.listeBlocsParRub .content .left > .titre3 + .bt, .rub + .bt{margin-top:20px;}

.listeBlocsParRub .content .liste, .listeBlocsParRub .content .left.hidden + .liste{
width:calc(100% + 20px);
position:relative;
left:-10px;
}

.listeBlocsParRub .content .liste article{margin:10px;}
}

@media screen and (max-width:580px){
.listeBlocsParRub .content .liste article{width:calc(50% - 20px);}
}

@media screen and (max-width:340px){

.listeBlocsParRub .content .liste, .listeBlocsParRub .content .left.hidden + .liste{
width:100%;
left:0;
}

.listeBlocsParRub .content .liste article{margin:10px 0;}

.listeBlocsParRub .content .liste article{width:100%;}
}