/***** banner *****/

.banner                             { padding-top: 150px; position: relative;}
.banner .img                        { height: 100%; position: absolute; top: 0; left: 440px; z-index: 2; right: 0; background: url(../images/banner.webp) center / cover no-repeat;}
.banner::after                      { content: ""; display: block; position: absolute; top: 0; bottom: calc(50% - 75px); left: 0; width: 100%; background: #252525;}
.banner .wrapper                    { padding-top: 200px;}
.banner .content                    { background: #fff; position: relative; z-index: 2; width: 560px; box-shadow: 0 40px 80px 0 rgba(0,0,0,0.15);}
.banner .inner                      { padding: 50px 60px;}
.banner .link                       { display: block;}

@media (max-width:1000px) {
.banner                             { padding-top: 160px; background: #252525;}
.banner .wrapper                    { height: auto; display: block; width: 100%; max-width: 100%; padding: 0;}
.banner::after                      { display: none;}
.banner .img                        { position: static; height: 480px;}
.banner .content                    { width: auto; max-width: initial; text-align: center; background: none; max-width: 750px; width: 90vw; margin: 0 auto; box-shadow: none; padding: 40px 0;}
.banner .inner                      { padding: 0; margin-bottom: 30px;}
.banner .inner                      { margin-bottom: 0;}
.banner .titre_main                 { margin: 0; color: #fff; margin-bottom: 24px;}
.banner .content .chapo				{ display:none;}
.banner .shape:before               { display: none;}
}

@media (max-width:600px) {
.banner .img                        { background-image: url(../images/banner_mobile.webp); height: 300px;}
.banner .content                    { padding: 25px 0 45px;}
}
/***** intro *****/
.intro                              { margin: -15px 75px 0;}
.intro img                          { display: block; margin-bottom: 20px;}
@media (max-width:1000px) {
.intro                              { margin: 80px 0 0;}
}
@media (max-width:600px) {
.intro                              { margin-top: 50px;}
.intro img                          { width: 40px; margin-bottom: 10px;}

}

/***** services *****/
.services                           { margin: 170px 0 0;}
.services .wrap_title               { display: grid; grid-template-columns: auto auto; justify-content: space-between; margin-bottom: 35px;}
.services .titre_main               { margin-bottom: 0;}
.arrowservices                      {  position: relative; right: -12px;}
.arrowservices button               { position: relative; z-index: 1;}
.arrowservices::after               { content: ""; display: block; position: absolute; left: calc(100% - 160px); top: -48px; width: 10000px; height: 580px; background: #252525;}
.services .slider                   { width: 1860px; position: relative; left: -20px;}
.services .slick-list               { padding: 0 0 120px;}
.services .item                     { width: 620px; padding: 0 20px; position: relative;}
.services .item img                 { width: 100%; height: auto;}
.services .item .badge              { width: auto; position: absolute; right: 50px; top: 30px; z-index: 1  ;}
.services .texte                    { padding: 25px 50px 55px; background: #fff; box-shadow: 0 0 20px 0 rgba(0,0,0,0.15);}
.services .sous_titre               { margin-bottom: 0;}

@media (max-width:1000px) {
.services                           { margin: 80px 0;}
.services .slider                   { width: auto; left: auto;} 
.services .item                     { width: 100% !important; padding: 0; background: none;}
.services .slick-track              { width: 100% !important;}
.services .item p,
.arrowservices::after               { display: none;}
.services .slick-list               { padding: 0;}
.services .texte                    { background: none; padding: 0;}
.services .sous_titre               { margin-top: 10px;}
.services .item:first-of-type img   { display: block;}
.services .item img                 { display: none;}
}
@media (max-width:600px) {
.services                           { margin: 30px 0 50px;}
.services .wrap_title               { margin-bottom: 20px;}  
.services .item .badge              { width: 120px; height: 120px; top: 20px; right: 20px;}
.services .item img                 { height: 300px;}
}

/***** À propos *****/
.amenagement .texte                 { background: #252525; color: #fff; padding: 105px 0 80px;}
.amenagement .inner                 { position: relative;}
.amenagement .inner:after           { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; top: 0; bottom: calc(50% + 37px); background-color: #252525;}
.amenagement .grid                  { position: relative; z-index: 1; margin: 0 -20px;}
.amenagement .grid .item            { margin: 0 20px;}
.amenagement .grid img              { width: 100%; height: auto; display: block;}
.amenagement .sous_titre            { margin-bottom: 0;}
.amenagement .sous_titre a          { margin: 0; height: 75px;}
@media (max-width:1200px) {
    .amenagement .sous_titre a     { font-size: 18px;}
}
@media (max-width:1000px) {
.amenagement                        { background: #252525; padding-bottom: 45px;}
.amenagement .grid                  { margin: 0; width: 100vw;}
.amenagement .grid .item            { width: 300px; margin:0 30px 0 0;}
.amenagement .sous_titre a          { color: #fff; background-image:none;}
.amenagement .item                      { margin: 0 15px 0 0; width: 200px;}
.amenagement .slick-dots                { background: #fff; display: flex; border-radius: 0; border-radius: 3px; overflow: hidden;}
.amenagement .slick-dots button         { width: 100%; border-radius: 0; border: none; height: 4px; border-radius: 3px;}
.amenagement .slick-dots button:before  { display: none;}
.amenagement .slick-dots li             { display: block; margin: 0;}
.amenagement .slick-dots li.slick-active button{ background-color: #80b734;}
.amenagement .inner:after           { display: none;}
}
@media (max-width:600px) {
.amenagement                        { padding: 45px 0;}
.amenagement .texte                 { padding: 0; background: none;}
.amenagement .texte p               { display: none;}
.amenagement .texte .titre_main     { margin-bottom: 20px;}
.amenagement .sous_titre a          { padding: 0 20px; height: 50px;}
.amenagement .slick-dots            { margin-top: 10px;}
.amenagement .grid .item            { margin-right: 10px; width: 200px;}
}



/***** À propos *****/
.apropos                            { display: grid; grid-template-columns: 1fr 1fr; margin: 95px 0 200px;}
.apropos .photo                     { position: relative; line-height: 0;}
.apropos .photo span                { position: absolute; left: 0; width: 100%; top: 50%; transform: translateY(-50%); color: #fff; font: 400 30px/40px "Poppins"; text-align: center; z-index: 2;}
.apropos .photo::before             { content: ""; display: block; position: absolute; top: 100px; right: 50%; width: 100vw; height: 100%; background-color: #252525;}
.apropos .photo img                 { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.8); position: relative; z-index: 1;}
.apropos .texte                     { padding: 40px 60px; height: 100%; display: grid; align-items: center; box-shadow: 0 0 80px 0 rgba(0,0,0,0.15);}
.apropos .texte .sous_titre         { margin-bottom: 0;}
.apropos .texte .sous_titre:last-of-type { margin-top: 30px;}
.apropos .hide                      { display: none;}
@media (max-width:1000px) { 
.apropos                            { margin-bottom: 0;}
.apropos                            { grid-template-columns: 1fr;}
.apropos .photo::before             { display: none;}
.apropos .texte                     { padding: 0; box-shadow: none; margin-top: 10px; align-items: start;}
.apropos .texte p                   { display: none;}
.apropos .texte .sous_titre:last-of-type { margin-top: 10px;}
}
@media (max-width:600px) {
.apropos                            { margin-top: 50px;}
.apropos .photo span                { font-size: 20px; line-height: 30px;}
.apropos .photo img                 { height: 300px;}
}

/***** atout *****/
.atout                              { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px;}
.atout .item                        { background: #eee; padding: 40px 40px 50px;}
.atout .sous_titre                  { color: #000; padding-left: 60px; background: url(../images/check.svg) left 5px no-repeat; font-size: 22px; line-height: 32px;}

@media (max-width:1000px) { 
.atout                              { grid-template-columns: 1fr;}
}
@media (max-width:600px) {
.atout                              { gap: 5px;}
.atout .item                        { background: none; padding: 0;}
.atout .item p,
.atout .item br                     { display: none;}
.atout .sous_titre                  { padding-left: 40px; font-size: 15px; line-height: 34px; font-weight: 400; background-size: 25px; margin-bottom: 0;}
}


/***** atouts *****/
.atouts 							{ position: relative; text-align: center; padding: 125px 0; background: #eeeeee;}
.atouts .titre_main					{ display: none;}
.atouts ul 							{ position: relative;}
.atouts li 							{ display: inline-block; font-size: 20px; line-height: 30px; margin-right: 65px; position: relative;}
.atouts li:after					{ width: 14px; height: 14px; position: absolute; right: -39px; top: 8px; background: #80b734; content: "";}
.atouts li:last-child  				{ margin: 0;}
.atouts li:last-child:after 		{ display: none;}

.moving_text 						{ width: 100vw; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 140px; overflow: hidden;}
.moving_text .row 					{ display: flex;}
.moving_text .row .item 			{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 5vw; white-space: nowrap; font: 500 120px/140px "Poppins"; text-transform: uppercase; letter-spacing: 15px; color: #fff; opacity: 50%; padding-left: 5vw; animation: scroll_text 35s linear infinite;}

@keyframes scroll_text {
0%									{ transform: translate(-100%, 0);}
100% 								{ transform: translate(0%, 0); }
}
@media (max-width:1200px) {
.atouts 							{ padding: 80px 0;}
.atouts 							{ text-align: left;}
.atouts .titre_main					{ display: block;}
.atouts ul 							{ column-count: 2;}
.atouts li 							{ font-size: 16px; line-height: 36px; margin: 0; display: block; padding-left:30px;}
.atouts li:after					{ right: auto; left: 0; top: 10px;}
.atouts li:last-child:after 		{ display: block;}
.moving_text 						{ display: none;}
}
@media (max-width:600px) {
.atouts 							{ padding: 40px 0;}
.atouts ul 							{ column-count: 1; margin: 15px 0 -5px 0;}
.atouts li 							{ font-size: 14px; line-height: 34px;}
.atouts li:after                    { width: 10px; height: 10px; top: 12px;}
}



