.sous_titre                         { color: var(--black);}


/***** banner *****/
.banner                             { height: 90vh; position: relative; display: grid; align-items: center; justify-content: center;}
.banner .img                        { width: 100%; height: 100%; position: absolute; top: 0; right: 0; overflow: hidden; background: url(../images/banner.webp) center / cover no-repeat;}
.banner .img::before                { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 120vh; background: url(../images/masque.svg) center bottom / cover no-repeat;}
.banner .titre_main                 { color: var(--white); text-align: center; margin-bottom: 0; padding: 0 40px; z-index: 1; font-size: 50px; line-height: 60px;}

@media (max-width:1200px) {

}
@media (max-width:1000px) {
.banner .wrapper                    { width: 100%; max-width: initial;}
.banner .img                        { border-radius: 0;}
}
@media (max-width:700px) {
.banner                             { height: 490px; padding-top: 75px;}
.banner .wrapper                    { display: block; height: auto;}
.banner .img                        { background: url(../images/banner_mobile.webp) center / cover no-repeat; height: calc(100% - 80px); top: 80px;}
.banner .titre_main                 { width: 85vw; font-size: 25px; line-height: 35px; margin: -30px auto 0; padding: 0;}
}




/***** solutions *****/
.intro                              { text-align: center; max-width: 870px; margin: auto; padding: 160px 0 0; position: relative; z-index: 1;}
.intro .devis                       { top: -120px;}

@media (max-width:700px) {
.intro                              { padding: 10px 0 0;}
.intro .devis                       { position: static; display: block; text-align: center; height: 50px; line-height: 50px; font-size: 15px; width: auto; border-radius: 25px; padding: 0; background: var(--second-color); border: none;}
.intro .devis svg,
.intro .chapo                       { display: none;}
.intro .titre_main                  { margin-bottom: 20px;}
}



/***** services *****/
.gridlink                           { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-top: 40px;}
.linkicon                           { border-radius: 20px; background: var(--greylight); display: grid; align-items: center; justify-content: center; padding: 10px; text-align: center; min-height: 170px; color: var(--main-color); font: 700 15px/22px var(--font-main); overflow: hidden;}
.linkicon .icone                    { height: 70px; display: grid; align-items: end; justify-content: center; padding-bottom: 10px; overflow: hidden;}
.linkicon .title                    { display: block;}
.linkicon .title::after             { content: url(../images/arrow_right_1.svg); display: block; margin-top: 10px; line-height: 0;}
.parcjardin::before                 { top: calc(50% - 700px); right: calc(100% - 325px);}
.elagage                            { margin: 90px 0 100px;}
.elagage .gridlink                  { margin-top: 60px; grid-template-columns: repeat(4, 1fr);}

@media (min-width:1201px) {
.shape::before                      { content: ""; display: block; position: absolute; width: 1400px; height: 1400px; border-radius: 50%; background: var(--greylight);}
.linkicon .icone,
.linkicon .title::after             { transition: all ease-in-out 400ms;}
.linkicon:hover                     { background: var(--second-color); color: var(--white);}
.linkicon:hover>span                { transform: translateY(-35px);}
.linkicon:hover .icone              { opacity: 0;}
.linkicon:hover .title::after       { filter: brightness(0) invert(1);}
}
@media (max-width:1200px) {
.gridlink                           { gap: 15px;}
}
@media (max-width:1000px) {
.elagage .gridlink                  { grid-template-columns: 1fr 1fr;}
}
@media (max-width:700px) {
.amenagement,
.parcjardin                         { display: block; margin: 50px 0;}
.amenagement .photo,
.parcjardin .photo                  { display: none;}
.gridlink                           { grid-template-columns: 1fr !important; gap: 10px; margin-top: 30px;}
.linkicon                           { padding: 0; display: block; min-height: 0; text-align: inherit; border-radius: 5px; font-size: 13px;}
.linkicon>span                      { display: grid; grid-template-columns: 100px 1fr; align-items: center; padding-right: 20px;}
.linkicon .title                    { display: block; position: relative;}
.linkicon .icone                    { padding: 0; align-items: center;}
.linkicon .icone img                { transform: scale(0.7);}
.linkicon .title::after             { position: absolute; right: 0; top: 50%; transform: translateY(-50%); right: 0; margin: 0;}
.elagage                            { margin: 50px 0;}
.elagage .gridlink                  { margin-top: 30px;}
}



/***** bannersection *****/
.bannersection                      { position: relative; text-align: center; background: url(../images/bg_banner.webp) center / cover no-repeat; min-height: 620px; display: grid; align-items: center; justify-content: center; padding: 40px 0;}
.bannersection::before              { z-index: -1; left: calc(50% + 430px); top: calc(50% - 700px);}
.bannersection .wrapper             { max-width: 870px; color: var(--white);}
.bannersection img                  { display: block; margin: 0 auto 20px;}
.bannersection .titre_main          { color: var(--white);}
.bannersection .link                { margin-top: 30px;}

@media (max-width:1200px) {

}
@media (max-width:1000px) {

}
@media (max-width:700px) {
.bannersection                      { padding: 60px 0 70px; min-height: 0; background-image: url(../images/bg_banner_mobile.webp);}
}



/***** faq *****/
.faq                                { margin: 120px 0;}
.faq::before                        { right: calc(100% - 125px); top: calc(50% - 700px);}
.faq .texte                         { max-width: initial;}
.faq .table_plus                    { margin: 20px 0 0;}
@media (min-width:1001px) {
.faq                                { grid-template-columns: 420px auto;}
}
@media (max-width:1000px) {
.faq                                { margin: 80px 0;}
}
@media (max-width:1000px) {
.faq                                { margin: 50px 0;}
}