.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;
}
} .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;
}
} .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__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(//les-beaux-jours.fr/wp-content/themes/les-beaux-jours_V2/assets/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-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(//les-beaux-jours.fr/wp-content/themes/les-beaux-jours_V2/assets/images/icons/arrow.svg);
scale:1.2;
width: 40px;
height:50px;
}
.swiper-button-next{
background-image: url(//les-beaux-jours.fr/wp-content/themes/les-beaux-jours_V2/assets/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__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;
}
}