section.introArticle{
display:flex;
justify-content:flex-end;
padding-left:65px;
border-top:2px solid var(--noir);
}

main section.introArticle:first-child, main .bloc_contact + section.introArticle{border-top:none;}

section.introArticle.reverse{
flex-flow:row-reverse;
justify-content:flex-start;
padding-left:0;
padding-right:65px;
}

section.introArticle > figure{
width:calc((100% + 65px) / 2);
border-left:2px solid var(--noir);
}

section.introArticle > figure img{
width:100%;
height:100%;
object-fit:cover;
}

section.introArticle > article{
display:flex;
flex-flow:column;
justify-content:center;
position:relative;
width:805px;
max-width:calc((100% - 65px) / 2);
margin-left:auto;
padding:90px 50px;
border-left:2px solid var(--noir);
}

section.introArticle.reverse > article{
margin-left:0;
margin-right:auto;
border-left:none;
border-right:2px solid var(--noir);
}

section.introArticle.reverse > figure{
border-left:none;
border-right:2px solid var(--noir);
}

section.introArticle > article > .picto{
position:absolute;
top:0;
left:0;
width:75px;
height:75px;
display:flex;
flex-flow:column;
justify-content:center;
align-items:center;
background-color:var(--noir);
}

section.introArticle > article > .picto img{
max-width:50px;
max-height:50px;
}

section.introArticle > article .content{
width:400px;
max-width:100%;
margin:0 auto;
}

section.introArticle > article .content .titre2{padding-bottom:20px;}

section.introArticle.hidden_article > article{display:none;}

section.introArticle.hidden_article, section.introArticle.hidden_img{justify-content:center;}

section.introArticle.hidden_img, section.introArticle.reverse.hidden_img{padding:0 20px;}

section.introArticle.hidden_img > article, section.introArticle.reverse.hidden_img > article{
margin:0 auto;
border-right:2px solid var(--noir);
border-left:2px solid var(--noir);
width:800px;
max-width:100%;
}

/********** medias **********/
@media screen and (max-width:1460px){
section.introArticle{padding-left:40px;}

section.introArticle.reverse{padding-right:40px;}

section.introArticle > figure{width:calc((100% + 40px) / 2);}

section.introArticle > article{max-width:calc((100% - 40px) / 2);}
}

@media screen and (max-width:1180px){
section.introArticle{padding-left:20px;}

section.introArticle.reverse{padding-right:20px;}

section.introArticle > figure{width:calc((100% + 20px) / 2);}

section.introArticle > article{
max-width:calc((100% - 20px) / 2);
padding:70px 20px;
}

section.introArticle > article > .picto{
width:50px;
height:50px;
}

section.introArticle > article > .picto img{
max-width:30px;
max-height:30px;
}
}

@media screen and (max-width:680px){
section.introArticle, section.introArticle.reverse{
flex-flow:column;
justify-content:center;
padding-right:0;
padding-left:0;
}

section.introArticle > figure, section.introArticle > article{
width:100%;
max-width:100%;
}

section.introArticle > article, section.introArticle > figure{
border-right:0 !important;
border-left:0 !important;
}

section.introArticle > article{padding:0;}

section.introArticle > article > .picto{position:relative;}

section.introArticle > article .content{
width:600px;
padding:40px 20px;
}
}