.listeSecteurs{
 padding-bottom: 120px;
 position: relative;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 align-items: center;
 min-height:880px;
}
.listeSecteurs > .ti{
 padding:120px 0 30px;
 text-align: center;
 display: block;
}

.listeSecteurs .liste{
 padding:0 50px;
 width: 100%;
}

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

.listeSecteurs .liste article{
 max-width: max-content;
 margin: 0 auto;
}

.listeSecteurs .liste article + article{
 margin-top: 30px;
}

.listeSecteurs .liste article .survol{
 position: absolute;
 top: 50px;
 left: 50px;
 max-width: calc(27% - 25px);
 width: 520px;
 opacity: 0;
 transition: opacity .5s;
 overflow: hidden;
}

.listeSecteurs .liste article:hover .survol{
 opacity: 1;
}

.listeSecteurs .liste article .survol .ckeditor{
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 align-items: center;
 padding: 50px 15px;
 text-align: center;
 line-height: 45px;
}

.listeSecteurs .liste article:hover .ssti{
text-decoration:  underline;
}

.listeSecteurs > .bt{
 margin:60px auto 0;
 max-width: max-content;
 display: block;
}
.listeSecteurs .liste + .bt{
 margin-top:30px;
}

@media screen and (max-width:1440px){
 .listeSecteurs > .ti{
  padding: 85px 50px 65px;
 }
 .listeSecteurs {
  padding-bottom: 105px;
 }
}
@media screen and (max-width:1280px){
 .listeSecteurs{
  padding-bottom:65px;
 }
}
@media screen and (max-width:980px){
 .listeSecteurs{
  padding-bottom:30px;
  min-height:auto;
 }
 .listeSecteurs > .ti{
  padding: 50px 25px 30px;
 }
 .listeSecteurs .liste{
  padding: 0 20px;
 }
 .listeSecteurs .liste article{
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 }
 .listeSecteurs .liste article .txt{
  width: max-content;
  position: relative;
 }
 .listeSecteurs .liste article .txt::after{
  content: "▼";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -30px;
  transition: all .5s;
 }
 .listeSecteurs .liste article.open .txt::after{
  transform: translateY(-50%) rotate(-180deg);
 }
 .listeSecteurs .liste article .survol{
  position: relative;
  top: initial;
  left: initial;
  width: 100%;
  max-width: 100%;
  opacity: 1;
  margin-top: 20px;
  display: none;
 }
 .listeSecteurs .liste article.open .txt .ssti{
  text-decoration: underline;
 }
 .listeSecteurs .liste article.open .survol{
  display: flex;
 }
 .listeSecteurs .liste article .survol .img{
  position: relative;
  width: 40%;
  padding-bottom: 40%;
 }
 .listeSecteurs .liste article .survol .img img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
 }
 .listeSecteurs .liste article .survol .ckeditor{
  width: 60%;
  justify-content: center;
  align-items: center;
 }
}
@media screen and (max-width:480px){
 .listeSecteurs .liste article .survol{
  flex-direction: column;
 }
 .listeSecteurs .liste article .survol .img{
  padding-bottom: 0;
  min-height: 150px;
 }
 .listeSecteurs .liste article .survol .img,
 .listeSecteurs .liste article .survol .ckeditor{
  width: 100%;
  padding: 20px 15px;
  line-height: 28px;
 }
}