/* #region SECTION 1 */
#section-1 h2 {
  font-weight: bold;
  font-size: 15px;
  text-align: center;
  padding-top: 55px;
  padding-bottom: 10px;
}

#section-1 h1 {
  font-weight: bold;
  font-size: 45px;
  text-align: center;
}

#section-1 p {
  font-size: 15px;
  text-align: center;
  width: 55%;
  margin: auto;
  padding-bottom: 35px;
  line-height: 1.7em;
}

/* #endregion */
/* #region SECTION 2 */
#section-2 {
  display: flex;
  flex-wrap: wrap;
}

#section-2-1 {
  background-color: var(--noir);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.section-2-1-class {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#section-2-1 .el-active span {
  font-size: 75px;
  color: var(--vert);

  font-weight: bold;
}

#section-2-2 {
  background-color: var(--noir);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#section-2-2 .el-active span {
  font-size: 75px;
  color: var(--vert);

  font-weight: bold;
}

#section-2-3 {
  background-color: var(--noir);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#section-2-3 span {
  font-size: 75px;
  color: var(--vert);

  font-weight: bold;
}

#section-2-4 {
  background-color: var(--noir);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#section-2-4 span {
  font-size: 75px;
  color: var(--vert);

  font-weight: bold;
}

.bloc {
  position: relative;
  overflow: hidden;
}

.bloc-titre {
  font-size: 28px;
  margin-top: 0;
  margin-bottom: 0;
  color: white;

  font-weight: bold;
}

.el-active {
  height: 100%;
  width: 100%;
}

.el-active img {
  height: 100%;
  width: 100%;
}

.el-active1 {
  background-color: var(--vert);
  color: var(--noir);
  position: absolute;
  bottom: 0;
  margin-bottom: 0;
  font-size: 18px;
  padding: 15px 35px !important;
  border-radius: 0 16px 0 0;
  font-weight: bold;
}

.el-notActive {
  display: none;
  background-color: var(--vert);
  height: 100%;
  color: var(--noir);
  padding: 35px;
  position: absolute;
  bottom: 0;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.el-notActivebis {
  display: none;
  height: 100%;
  color: white;
  padding: 35px;
  position: absolute;
  bottom: 0;
  overflow: hidden;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.el-notActive1 {
  font-size: 18px;

  font-weight: bold;
  padding: 0;
  margin-bottom: 5px;
  margin-top: 0;
}

.el-notActive2 {
  font-size: 14px;
}

.el-notActive2bis {
  font-size: 28px;
  margin-top: 25px;
  color: white;

  font-weight: bold;
}

.el-notActive3 {
  font-size: 14px;
}

.el-notActive {
  animation-name: el-notActive;
  animation-duration: 0.5s;
}

.el-notActivebis {
  animation-name: el-notActive;
  animation-duration: 0.5s;
}

@keyframes el-notActive {
  from {
    max-height: 0;
  }

  to {
    max-height: 100%;
  }
}

/* #endregion */
/* #region SECTION 3 */
#section-3 {
  background-color: var(--gris-clair);
}

#section-3-1 {
  margin-bottom: 52px;
}

#section-3-1 h2 {
  text-align: center;
  padding-top: 80px;
  font-size: 30px;
  margin-top: 0;
}

#section-3-1 p {
  text-align: center;
  font-size: 15px;
  width: 80%;
  max-width: 1080px;
  margin: auto;
}

#section-3-2 {
  width: 90%;
  max-width: 1400px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 32px;
  padding-bottom: 70px;
}

.card {
  min-height: 350px;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  padding: 50px 32px;
  border-radius: 16px;
}

.card img {
  margin-bottom: 20px;
}

.card h3 {
  font-size: 15px;
  padding-bottom: 20px;
  font-weight: 400;
  /* align-self: baseline; */
}

.cardP1 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 0;
}

.cardP2 {
  margin-top: 20px;
  font-size: 15px;
  /* text-align: center; */
  /* width: 90%; */
}

/* #endregion */
/* #region SECTION 4 */
#section-4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 70px 0;
  text-align: center;
}

#section-4 h2 {
  margin-top: 0;
}

#section-43 {
  margin: 20px 0 0 0;
}

#section-44 {
  margin: 10px 0 20px 0;
}

/* #endregion */
/* #region @MEDIA */
@media (max-width: 1199px) {}

@media (max-width: 991px) {

  /*************/
  /* SECTION 3 */
  /*************/
  #section-3-2 {
    /* grid-template-columns: repeat(2, minmax(0, 1fr)); */
  }
}

@media (max-width: 767px) {

  /*************/
  /* SECTION 1 */
  /*************/
  #section-1 h2 {
    font-size: 12px;
  }

  #section-1 h1 {
    font-size: 28px;
  }

  #section-1 p {
    width: 90%;
  }

  /*************/
  /* SECTION 2 */
  /*************/
  #section-2 {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-snap-type: mandatory;
    -ms-scroll-snap-type: mandatory;
    -webkit-scroll-snap-type: mandatory;
    flex-wrap: nowrap;
    display: flex;
  }

  .bloc {
    width: 100%;
    flex-shrink: 0;
    display: block;
    margin: auto;
    overflow: visible;
  }

  .el-notActive2 {
    font-size: 14px;
    line-height: 1.3;
    padding-bottom: 0;
  }

  .el-notActive3 {
    font-size: 14px;
    line-height: 1.3;
  }

  /*************/
  /* SECTION 3 */
  /*************/
  #section-3-1 h2 {
    font-size: 28px;
  }

  #section-3-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  /*************/
  /* SECTION 4 */
  /*************/
  #section-4 {
    width: 90%;
    margin: auto;
  }
}

/* #endregion */