/* Section Header avec titre Nos Projets + lien vers la page d'archives */
.header__projet{
  background-color: var(--blanc);
  margin:0;
  display:flex;
  justify-content: center;
  height:265px;
}

.header__projet__content{
  width:80%;
  padding:15px 0;
  display:flex;
  flex-direction: column;
  & h2{
    width:100%;
    font-size:40px;
    margin:10px 0;
    color:var(--noir);
    line-height:1.1;
  }
  & a{
    width:100%;
    font-size:1rem;
    font-family:'PoppinsMedium';
    text-decoration:underline;
  }
}

/* section de description d'un projet avec image à la une + une description sur la droite */
.content__projet{
  display:flex;
  justify-content: center;
  position: relative;
  bottom: 130px;
  flex-direction: column;
  align-items: center;
  margin-bottom: -80px;
}

.description__projet__container{
  width:80%;
  display:flex;
  background-color:var(--violet);
  & img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
}

.featured__image{
  width:50%;
}

.description__projet__content{
  width:50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  & p{
    font-size:1rem;
    color:var(--noir);
    margin:0;
    & strong{
      font-family:'PoppinsBold';
    }
  }
  & h1{
    font-size:30px;
    color:var(--noir);
    margin:20px 0;
    line-height:1.2;
  }
  ul{
    padding-left:15px;
  }
}

.description__projet__content__box{
  padding:40px 40px 0 40px;
}

.txt__box{
  margin:20px 0;
  & li{
    padding:3px 0;
  }
}

#nom__client{
  color:white;
}

.subtitle{
  font-family:'PoppinsExtraBold';
}

ul, li{
  color:var(--noir);
  font-family:'PoppinsMedium';
  font-size:1rem;
  margin:0;
  padding:0;
}

.term__box{
  padding: 20px 40px;
  & p{
    color:white;
  }
}

/* ------ section ce que nous avons fait (3 boxes d'actions) -------- */
.action__projet{
  width:80%;
  margin:30px 0;
  & h2{
    text-align:left;
    font-size:2rem;
    margin:0;
    color:var(--noir);
    line-height: 1.1;
  }
  & p{
    color:var(--noir);
    font-size:1rem;
  }
  & h3{
    color:var(--noir);
    font-size:20px;
    margin: 10px 0 20px 0;
    line-height: 1.2;
  }
}

.action__box__container{
  display:flex;
  gap:20px;
}

.action__box{
width: 33.3%;
  & img{
    width:100%;
    aspect-ratio: 1/1;
    object-fit: cover;
  }
}

.tout__au__long{
  margin:20px 0;
  & h4{
    font-family:'PoppinsBlack';
    margin:0;
    font-size: 1.25rem;
    color:var(--noir)
  }
  & p{
    margin: 5px 0;
  }
}

/* --------------- section resultats ------------------ */
.section__resultat{
  width:80%;
  margin:0;
  background-color:var(--violet);
  display:flex;
}

.resultat__container{
  padding:30px;
  width:50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position:relative;
  & h2{
    color:var(--noir);
    margin:0;
    font-size:2rem;
    padding-left:30px;
    line-height:1.2;
  }
  & ul{
    padding:10px;
    & li{
      line-height:17px;
      padding: 10px 0 10px 10px;
    }
  }
}

.title__arrow::before{
    content: url("../images/icons/arrow_single_projet.svg");
    display: inline-block;
    height: 100px;
    width: 100px;
    position: absolute;
    left: -60px;
    top: -30px;
}

#button__download__file{
  width:100%;
  max-width:400px;
}

.download__file__button{
  background:none;
  border: 1px solid var(--noir);
  padding:20px;
  margin:10px 0;
  border-radius:50px;
  font-family: 'PoppinsMedium';
  color: var(--noir);
  font-size: 16px;
  width:100%;
  transition: all 0.2s;
}

.download__file__button:hover, .download__file__button:focus{
  background:white;
  border:1px solid white;
  font-family:'PoppinsExtraBold';
  color:var(--orange);
  cursor:pointer;
  box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 15px;
  transition:all 0.2s;
}

.download__file__button:active{
  background:var(--orange);
  border:1px solid var(--orange);
  font-family:'PoppinsExtraBold';
  color:white;
  cursor:pointer;
  transition:all 0.2s;
  box-shadow:none;
}

.carousel__container{
  padding:30px;
  width:50%;
  display: flex;
  align-items: flex-end;
}

.carousel__projet__slide{
  flex-direction:column;
  background:none !important;
}

.caption{
  color:var(--noir);
  font-size:1rem;
  font-family:'PoppinsItalic';
  line-height:15px;
  width:100%;
  text-align:left;
}

/* --- swiper --- */
.swiper-slide{
  & img{
    width: 100%;
    object-fit: cover;
    aspect-ratio: 4/3;
  }
}


.swiper-button-next, .swiper-button-prev {
  color:var(--noir);
}

.swiper-button-prev{
  background-image: url("../images/icons/arrow.svg");
  scale:1.2;
  width: 40px;
  height:50px;
}

.swiper-button-next{
  background-image: url("../images/icons/arrow.svg");
  scale:1.2;
  width: 40px;
  height:50px;
}

#carousel-projet-next{
    rotate:180deg;
}

.swiper-button-next::after, .swiper-button-prev::after{
content:"";
}



/* ------------ section témoignages --------------- */
.section__temoignage{
  display:flex;
  justify-content: center;
  width:80%;
  margin-top:20px;
}
.temoignage__container{
  display:flex;
  height:100%;
  width:100%;
  justify-content: center;
}

.temoignage__img__box{
  background-color:var(--violet);
  width:450px;
  height:450px;
  display: flex;
  justify-content: center;
  align-items: end;
  margin-top:30px;
  & img{
    height:100%;
  }
}

.temoignage__content__box{
  width:450px;
  height:450px;
  margin-top:30px;
  background-color:var(--blanc);
  display: flex;
  flex-direction: column;
  justify-content: center;
  & h6{
    font-size:0.95rem;
    padding: 0 30px;
    line-height:20px;
    margin:10px 0;
    color:var(--noir)
  }
  & p{
    font-size:0.95rem;
    padding: 0 30px;
    color:var(--noir)
  }
  & span{
    font-family:'PoppinsExtraBold';
  }
}


@media screen and (max-width:1024px){
  .description__projet__content{
    & h1{
      font-size:1.4rem;
      word-break: break-word;
    }
    & p{
      font-size:0.9rem;
    }
    & li, & ul{
      font-size:0.9rem;
    }
  }

  .action__projet{
    & h3{
      font-size:1.2rem;
    }
    & p{
      font-size:0.9rem;
    }
  }

  .caption{
    font-size:0.9rem;
  }

  .resultat__container{
    width:auto;
    align-items: center;
    padding: 30px 30px 0 30px;
    & li{
      font-size:0.9rem;
    }
    & p{
      font-size:0.9rem;
    }
  }
  .section__resultat{
    flex-direction: column;
  }
  .carousel__container{
    width:auto;
  }
  .download__file__button{
    font-size:0.9rem;
  }

  .temoignage__img__box{
    width:50%;
    height:500px;
    & img{
      width:100% !important;
      object-fit: cover !important;
    }
  }

  .temoignage__content__box{
    width:50%;
    height:500px;
      & h6{
        font-size:0.8rem;
        line-height:1.3;
      }
      & p{
        font-size:0.8rem;
      }
  }
}

@media screen and (max-width:768px){
  .description__projet__container{
    flex-direction: column;
  }
  .featured__image{
    width: 100%;
    aspect-ratio: 3/2;
  }
  .description__projet__content{
    width:100%;
  }
  .action__box__container{
    flex-direction: column;
  }
  .action__box{
    width:100%;
  }
  .section__resultat{
    margin:0;
  }
  .temoignage__container{
    flex-direction: column-reverse;
  }
  .temoignage__img__box{
    width:100%;
    height:100% !important;
    margin-top:0;
    height:300px;
    & img{
      width: 100% !important;
      object-fit: cover !important;
    }
  }
  .temoignage__content__box{
    width: 100%;
    height: 400px;
    margin-top: 50px;
    & h6{
      text-align:center;
    }
    & p{
      text-align:center;
    }
  }

  ul, li{
    font-size:0.9rem;
  }
}

@media screen and (max-width:480px){
  .header__projet__content{
  & h2{
    font-size:2rem;
    }
  }

  .description__projet__content__box{
    & h1{
      font-size:1.4rem;
    }

  }

  .term__box{
    padding: 20px;
  }

  .temoignage__content__box{
    height:430px !important;
    & h6{
      font-size: 0.8rem;
      line-height: 1.2;
      padding:0 20px;
    }
    & p{
      font-size:0.8rem;
    }
  }

  #carousel-projet-next, #carousel-projet-prev{
    width: 25px;
    height: 30px;
}

}