.banner                         { padding-top: 160px; position: relative;}
.banner .content                { position: relative; z-index: 2;}
.banner .titre_main             { font-size: 50px; line-height: 60px; width: 650px;}
.banner .wrapper_large          { display: grid; grid-template-columns: 460px auto; align-items: center;}
.banner .wrapper_large::after   { content: ""; display: block; position: absolute; top: -160px; bottom: -426px; width: 100vw; left: calc(100% - 400px); background: #efeae5;}
.banner .img                    { height: 620px; border-radius: 310px 0 0 310px; background: url(../images/banner.webp) left center / cover no-repeat; width: calc(100% + 5vw); position: relative; z-index: 1; box-shadow: 0 40px 40px 0 #efeae5; order: 2;}
.banner .chapo                  { max-width: 375px;}
.banner .link                   { margin-top: 25px;}

@media (max-width:1200px) { 
.banner                         { padding-top: 100px;}
.banner .wrapper_large::after   { display: none;}
}

@media (max-width:1000px) { 
.banner .wrapper_large          { display: block; width: 100%; max-width: initial;}
.banner .img                    { border-radius: 0; box-shadow: none; margin-bottom: 40px; width: 100%;}
.banner .content                { max-width: 750px; margin: 0 auto; width: 90vw;}
.banner .titre_main             { width: auto; max-width: 650px;}
.banner .chapo                  { max-width: initial;}
}

@media (max-width:700px) {
.banner                         { padding-top: 80px;}
.banner .img                    { background: url(../images/banner.webp) center / cover no-repeat; height: 320px; margin-bottom: 20px;}
.banner .titre_main             { font-size: 30px; line-height: 40px;}
.banner .link                   { text-align: center; padding: 0 20px; display: block; margin-top: 20px;}
.banner .link::after            { display: none;}
}


/***** intro *****/
.intro                              { padding: 95px 430px 115px 100px; background: url(../images/favicon.svg) left bottom no-repeat;}
.link-moins,.link-plus              { cursor:pointer; color: #000; border-bottom: 1px solid #000;}
.textMore                           { display: none; }
@media (max-width:1200px) { 
.intro                              { padding: 80px;}
}

@media (max-width:1000px) { 
.intro                              { padding: 0; background: none; margin: 70px 0;}
}

@media (max-width:700px) {
.intro                              { display: none;}
}


/***** chantiers *****/
.quote                              { font: 400 25px/35px "Roboto Slab"; letter-spacing: 0.2px; padding-top: 55px; background: url(../images/quote.svg) left top no-repeat; position: absolute; top: calc(100% - 16px); left: calc(50% + 15px); z-index: 12;}
.chantiers                          { margin: 140px 0; align-items: start; padding-bottom: 105px;}
.chantiers .photo::before           { content: ""; display: block; position: absolute; top: 50%; bottom: -190px; right: calc(50% + 35px); width: 100vw; background: #efeae5;}
.chantiers .desc                    { background: #000; color: #fff; border-radius: 20px; padding: 30px; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: auto; z-index: 11; width: 370px; line-height: 30px; opacity: 0; visibility: hidden;}

.chantiers .texte                   { padding-left: 100px; margin-top: 5px;}
.chantiers .texte .link             { display: block; margin-top: 20px;}
.chantiers .texte ul                { margin-top: 30px;}

@media (min-width:1201px) { 
.chantiers .desc                    { transition: all ease-in-out 400ms;}   
.chantiers .desc.show               { opacity: 1; visibility: visible;}
.chantiers .texte li.active .link   { color: #fff; background-position: 0 0;}
.chantiers .texte li.active .link::before   { opacity: 0;}
.chantiers .texte li.active .link::after    { filter: brightness(0) invert(1);}
}
@media (max-width:1200px) { 
.chantiers .texte                   { padding-left: 40px;}
.chantiers .photo::before           { right: calc(100% - 40px);}
.quote                              { left: 80px;}
}

@media (max-width:1000px) { 
.chantiers                          { margin: 70px 0; padding: 0;}
.chantiers .photo::before,
.quote                              { display: none;}
.chantiers .texte                   { padding: 0;}
}

@media (max-width:700px) {
.chantiers                          { margin: 50px 0 10px; gap: 20px;}
.chantiers .texte                   { margin: 0;}
.chantiers .texte>*:not(ul)         { display: none;}
.chantiers .texte ul                { margin: 0;}
.chantiers .texte .link             { margin-top: 10px;}
}


/***** services *****/
.services .texte                    { max-width: 950px; margin: 0 auto 50px;}
.services .grid                     { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; text-align: center;}
.services .item                     { border-radius: 20px; background: #efeae5; position: relative; overflow: hidden; padding: 50px 40px;}
.services .item p                   { position: absolute; top: 0; left: 0; width: 100%; padding: 35px 40px 0; color: #fff; opacity: 0;}
.services .item::before             { content: ""; display: block; position: absolute; top: 50px; width: 90px; height: 90px; background: #fff; left: 0; right: 0; border-radius: 50%; margin: auto;}
.services .item .icon               { display: block; margin: 0 auto; position: relative;}
.services .item .titre              { display: block; margin: 25px 0 10px}
.services .item .arrow              { display: block; margin: 0 auto;}
.services .item a                   { display: block; position: absolute; inset: 0;}
@media (min-width:1201px) { 
.services .item,
.services .item .icon,
.services .item .titre,
.services .item p,
.services .item .arrow              { transition: all ease-in-out 400ms;}
.services .item:hover               { background-color: #000;}
.services .item:hover::before,
.services .item:hover .icon         { opacity: 0;}
.services .item:hover p             { opacity: 1;}
.services .item:hover .titre        { color: #fff;}
.services .item:hover .arrow        { filter: brightness(0) invert(1);}
}
@media (max-width:1200px) { 
.services .grid                     { gap: 20px;}
}

@media (max-width:1000px) { 
.services .grid                     { grid-template-columns: 1fr 1fr;}
}

@media (max-width:700px) {
.services .item .icon,
.services .texte,
.services .item p                   { display: none;}
.services .item                     { padding: 0 30px 0 25px; border-radius: 25px;}
.services .item .titre              { margin: 0; line-height: 50px; text-align: left;}
.services .item::before             { top: 5px; width: 40px; height: 40px; left: auto; right: 5px; margin: 0;}
.services .item .arrow              { position: absolute; right: 25px; top: 50%; margin-top: -7px;}
.services .grid                     { grid-template-columns: 1fr; gap: 10px;}
}


/***** apropos *****/
.apropos                            { margin-bottom: 140px;}
.apropos .link                      { margin-top: 25px;}
.apropos .photo::after              { content: ""; display: block; position: absolute; top: 50%; bottom: -190px; left: 50%; width: 100vw; background: #efeae5;}
@media (max-width:1000px) { 
.apropos .photo::after              { display: none;}
}
@media (max-width:700px) {
.apropos                            { margin-bottom: 50px;}
}