.listeArticles{
 padding-bottom:105px;
 display: flex;
 flex-direction: column;
 align-items: center;
}
.listeArticles > .ti{
 padding:120px 0 90px;
}

.listeArticles .liste{
 display:flex;
 flex-flow:row wrap;
 justify-content:center;
 padding:0 25px;
 width: 100%;
}

.listeArticles .liste.hidden{display:none;}

.listeArticles .liste article{
 display:flex;
 flex-direction:column;
 margin:0 25px 20px;
 max-width: 520px;
}
.listeArticles .liste.col2 article{
 width:calc(50% - 50px);
}
.listeArticles .liste.col3 article{
 width:calc(calc(100%/3) - 50px);
}
.listeArticles .liste.col4 article{
 width:calc(calc(100%/4) - 50px);
}
.listeArticles .img{
 overflow:hidden;
 position:relative;
}
.listeArticles .liste article .txt{
 padding:25px;
}
.listeArticles .liste article .smti{
 margin-bottom: 25px;
 font-weight: 900;
}
.listeArticles > .lien,
.listeArticles .liste article .txt .lien{
 width:100%;
 display:flex;
 flex-direction:column;
 align-items:center;
}
.listeArticles .liste article .txt .lien .bt{
 min-width:auto;
 max-width:100%;
 width:282px;
}
.listeArticles > .bt{
 margin:60px 0 20px;
}
.listeArticles .liste + .bt{
 margin-top:50px;
}
.listeArticles.real .img{
 overflow: hidden;
 position: relative;
 display: block;
 padding-top: 100%;
}
.listeArticles.real .img .tag{
 position: absolute;
 top: 20px;
 left: 20px;
 padding: 8px 25px 10px;
 border-radius: 20px;
 background-color: var(--bleu);
 color: #fff;
}
.listeArticles.real .img .tag.neuf{
 background-color: var(--beige);
 color: #000;
}
.listeArticles.real .img img{
 transition: transform .5s;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.listeArticles.real .img:hover img{
 transform: scale(1.2);
}

.listeArticles.real .img .arrow{
 position: absolute;
 bottom: 20px;
 right: 20px;
 width: 60px;
 height: 60px;
 border-radius: 100%;
 background-color: #fff;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 26px;
 padding-bottom: 6px;
 padding-right: 10px;
 transition: padding .3s;
}
.listeArticles.real .img:hover .arrow{
 padding-right:0;
 padding-left: 10px;
}
.listeArticles.real .img{
 overflow:hidden;
 position:relative;
}
.listeArticles.real .liste article .txt{
 padding: 0;
}
.listeArticles.real .liste article .img + .txt{
 margin-top: 25px;
}
.listeArticles.real .liste article .smti > *{
 font-size: inherit;
 font-weight: inherit;
}
.listeArticles.real > .lien,
.listeArticles.real .liste article .txt .lien{
 width:100%;
 display:flex;
 flex-direction:column;
 align-items:center;
}
@media screen and (max-width:1440px){
 .listeArticles > .ti{
  padding: 85px 50px 65px;
 }
 .listeArticles .liste article{
  margin:0 15px 20px;
 }
 .listeArticles .liste.col2 article{
  width:calc(50% - 30px);
 }
 .listeArticles .liste.col3 article{
  width:calc(calc(100%/3) - 30px);
 }
 .listeArticles .liste.col4 article{
  width:calc(calc(100%/4) - 30px);
 }
}
@media screen and (max-width:1280px){
 .listeArticles{
  padding-bottom:65px;
 }
 .listeArticles > .titre1 {
  padding: 85px 50px 65px;
 }
 .listeArticles .liste{
  padding: 0 30px;
 }
 .listeArticles .liste article{
  margin:0 10px 20px;
 }
 .listeArticles .liste.col2 article{
  width:calc(50% - 20px);
 }
 .listeArticles .liste.col3 article{
  width:calc(calc(100%/3) - 20px);
 }
 .listeArticles .liste.col4 article{
  width:calc(calc(100%/4) - 20px);
 }
 .listeArticles.real .img .arrow{
  width: 40px;
  height: 40px;
  font-size: 20px;
 }
  .listeArticles.real .img .tag{
  top: 10px;
  left: 10px;
  padding: 6px 10px 8px;
 }
}
@media screen and (max-width:980px){
 .listeArticles{
  padding-bottom:30px;
 }
 .listeArticles > .ti {
  padding: 50px 25px 35px;
 }
 .listeArticles .liste{
  padding:15px;
 }
 .listeArticles .liste.col4 article{
  width:calc(calc(100%/2) - 20px);
 }
 .listeArticles .liste article .txt{
  padding: 15px;
 }

}
@media screen and (max-width:650px){
 .listeArticles .liste.col3 article{
  width:calc(calc(100%/2) - 20px);
 }
}
@media screen and (max-width:400px){
 .listeArticles .liste.col2 article,
 .listeArticles .liste.col3 article,
 .listeArticles .liste.col4 article{
  width:100%;
 }
}