section.infosCles{
position:relative;
padding:100px 0 70px 0;
}

section.infosCles.beige{background-color:var(--beige);}

section.infosCles.noir{
background-color:#000;
color:var(--beige);
}

section.infosCles > figure{
position:absolute;
top:0;
right:80px;
}

section.infosCles > figure img{
width:auto;
max-width:190px;
max-height:190px;
position:relative;
transform:translateY(-40%);
}

section.infosCles .content{
width:1820px;
max-width:100%;
margin:0 auto;
text-align:center;
}

section.infosCles .content .liste{
display:flex;
flex-flow:row wrap;
justify-content:center;
}

section.infosCles .content .liste article{
position:relative;
width:calc(100% / 3);
padding:60px 20px;
display:flex;
flex-flow:column;
align-items:center;
margin-top:30px;
}

section.infosCles .content .liste article:before{
content:'';
position:absolute;
top:0;
left:-1px;
height:100%;
width:2px;
background-color:#000;
}

section.infosCles.noir .content .liste article:before{background-color:var(--beige);}

section.infosCles.col_3 .content .liste article:nth-child(3n+1):before, section.infosCles.col_4 .content .liste article:nth-child(4n+1):before{display:none;}

section.infosCles.col_4 .content .liste article{width:calc(100% / 4);}

section.infosCles .content .liste article .ti_pt{word-break:break-word;}

section.infosCles .content .liste article .ti_pt + .ckeditor{padding-top:15px;}

section.infosCles .content .liste.hidden{display:none;}

section.infosCles .content > .ti_gd + .liste, section.infosCles .content .liste + .bt{margin-top:70px;}

section.infosCles .content > .ti_gd + .liste.hidden + .bt{margin-top:100px;}

/********** medias **********/
@media screen and (max-width:1380px){
section.infosCles{padding:70px 0;}

section.infosCles > figure{right:40px;}

section.infosCles > figure img{
max-width:130px;
max-height:130px;
transform:translateY(-20%);
}

section.infosCles .content > .ti_gd + .liste, section.infosCles .content .liste + .bt{margin-top:40px;}

section.infosCles .content .liste article{padding:40px 20px;}
}

@media screen and (max-width:1280px){
section.infosCles.col_4 .content .liste article{width:50%;}

section.infosCles.col_4 .content .liste article:nth-child(4n+1):before{display:block;}

section.infosCles.col_4 .content .liste article:nth-child(2n+1):before{display:none;}
}

@media screen and (max-width:980px){
section.infosCles{padding:50px 0;}

section.infosCles .content .liste article{padding:20px;}

section.infosCles > figure{
right:10px;
top:-10px;
}

section.infosCles > figure img{
max-width:100px;
max-height:100px;
transform:none;
}
}

@media screen and (max-width:780px){
section.infosCles{padding:50px 0;}

section.infosCles.col_3 .content .liste article{width:50%;}

section.infosCles.col_3 .content .liste article:nth-child(3n+1):before{display:block;}

section.infosCles.col_3 .content .liste article:nth-child(2n+1):before{display:none;}

section.infosCles .content .liste article{margin-top:20px;}

section.infosCles > figure img{
max-width:70px;
max-height:70px;
}

section.infosCles .content > .ti_gd + .liste, section.infosCles .content .liste + .bt{margin-top:20px;}

section.infosCles > figure + .content{}
}

@media screen and (max-width:480px){
section.infosCles.col_3 .content .liste article, section.infosCles.col_4 .content .liste article{width:100%;}

section.infosCles .content .liste article:before{
top:-1px;
left:20px;
height:2px;
width:calc(100% - 40px);
}

section.infosCles.col_3 .content .liste article + article:before, section.infosCles.col_4 .content .liste article + article:before{display:block !important;}

section.infosCles.col_3 .content .liste article:first-child:before, section.infosCles.col_4 .content .liste article:first-child:before{display:none !important;}

section.infosCles .content > .ti_gd + .liste, section.infosCles .content .liste + .bt{margin-top:20px;}

section.infosCles > figure + .content{padding-top:30px;}
}