/***** banner *****/
.banner                             { position: relative; margin: 100px auto 220px; color: #fff;}
.banner .img                        { width: 100%; height: 80vh; max-height: 800px; min-height: 300px; background: url(../images/banner.webp) center / cover no-repeat; position: relative; }
.banner .img::after                 { content: ""; display: block; position: absolute; top: 100px; left: 100px; width: 100vw; height: 100%; background: #f6f2e8; z-index: -1;}

@media (max-width:1200px) {
.banner                             { margin: 90px auto 80px;}
.banner .img                        { height: 75vh;}
.banner .img::after                 { display: none;}
}
@media (max-width:1000px) {
.banner                             { margin: 120px auto 70px;}
.banner .img                        { height: 70vw;}
}
@media (max-width:700px) {
.banner                             { margin: 120px auto 50px;}    
.banner .img                        { height: 65vw; background-image: url(../images/banner_mobile.webp); width: 100vw; margin: 0 -7.5vw;}
}



/***** apropos *****/
.apropos                            { display: grid; grid-template-columns: 580px 1fr; align-items: center; margin: 150px 0;}
.apropos .photo                     { position: relative; padding-left: 140px; margin-right: 85px;}
.apropos .photo img                 { width: 100%; height: auto; display: block; box-shadow: -20px 20px 0 0 #f6f2e8;}
.apropos .texte                     { max-width: 490px;}

@media (max-width: 1500px) {
.apropos                            { grid-template-columns: 1fr 1fr;}
}
@media (max-width: 1200px) {
.apropos                            { grid-template-columns: 1fr 1fr; margin: 100px 0;}
.apropos .photo                     { margin-right: 60px;}
}
@media (max-width: 1000px) {
.apropos                            { margin: 80px 0 70px; grid-template-columns: 1fr; gap: 60px;}
.apropos .photo                     { max-width: 450px; padding: 0 0 0 100px; margin: 0 auto;}
.apropos .texte                     { max-width: 100%; text-align: center;}
}
@media (max-width: 700px) {
.apropos                            { margin: 50px 0 40px; gap: 30px;}
.apropos .photo                     { padding: 0 0 0 75px; max-width: 300px;}    
.apropos .photo img                 { box-shadow: -10px 10px 0 0 #f6f2e8;}
.apropos .sous_titre                { margin-bottom: 0;}
.apropos .texte p                   { display: none;}
}



/***** atout *****/
.atout                              { display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: center;}
.atout img                          { display: inline-block; vertical-align: top; margin-bottom: 25px;}
.atout .titre                       { margin-bottom: 0;}

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


/***** services *****/
.services .grid                     { display: grid; grid-template-columns: 1fr 1fr; align-items: center; margin: 140px 0 230px;}
.services .texte                    { max-width: 600px; width: 100%; padding-right: 120px; order: 1; margin-left: auto;}
.services .photo                    { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); order: 2; gap: 40px; position: relative;}
.services .photo div:first-of-type  { grid-area: 1 / 1 / 3 / 2; position: relative; line-height: 0;}
.services .photo div:first-of-type::after   { content: ""; display: block; position: absolute; top: calc(50% - 90px); left: 50%; bottom: -90px; width: 100vw; background: #f6f2e8;}
.services .photo div:nth-of-type(2) { grid-area: 1 / 2 / 2 / 3;}
.services .photo div:last-of-type   { grid-area: 2 / 2 / 3 / 3;}
.services .photo img                { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1;}
.services .quote                    { text-align: center; font: 400 italic 18px/30px "Montserrat"; color: #634e42; padding-top: 45px; background: url(../images/quote.svg) top center no-repeat; position: relative; z-index: 1;}

@media (max-width: 1366px) {
.services .texte                    { padding-right: 40px;}
}
@media (max-width: 1000px) {
.services .grid                     { grid-template-columns: 1fr; gap: 35px; margin: 70px 0;}
.services .photo                    { order: 1;}
.services .texte                    { padding: 0; max-width: initial;}
.services .photo div:first-of-type::after   { bottom: 0;}
}
@media (max-width: 700px) {
.services .grid                     { margin: 50px 0;}
.services .photo div:first-of-type::after   { display: none;}
.services .photo                    { gap: 20px;}
.services .quote                    { padding: 0; font-size: 0; background: #f0ece3;}
}


/** creations **/
.projets 									{ position: relative;}
.projets>.titre_main                        { text-align: center; margin-bottom: 30px;}
.projets .grid							    { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; position: relative; padding: 0 20px;}
.projets .item  							{ position: relative; overflow: hidden;}
.projets .item a 							{ display: block;}
.projets .item a:after 					    { width: 100%; height: 40%; position: absolute; left: 0; bottom: 0; background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); z-index: 5; content: "";}
.projets .item img 						    { display: block; width: 100%; height: auto; transition: all 400ms ease-in-out;}
.projets .item .content_titre				{ color: #fff; margin: 0; position: absolute; left: 0; bottom: 0; width: 100%; z-index: 10; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5)); padding: 100px 30px 15px;}
.projets .item .content_titre *             { font-family: "Montserrat Alternates" !important;}
.projets .item .sous_titre 		            { color: #fff; font-size: 20px; line-height: 30px; margin-bottom: 0; font-weight: 400;}
.projets .item .titre                       { margin-bottom: 0;}
.projets .item .titre_cap                   { display: block; font: 400 11px/30px "Poppins"; letter-spacing: 1.7px; text-transform: uppercase; color: #fff;}

@media (min-width:1201px) {
.projets .item a:hover .sous_titre:after 	{ right: 0; opacity: 1;}
.projets .item .content_titre               { transition: all ease-in-out 400ms; opacity: 0;}
.projets .item:hover .content_titre         { opacity: 1;}
}
@media (max-width:1200px) {
.projets .grid							    { grid-template-columns: 1fr 1fr;}

.projets .item a:after 					    { height: 60%; background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);}
.projets .item .sous_titre:after 			{ right: 0; opacity: 1; background-image: url("../images/arrow_white.svg");}
}
@media (max-width:1000px) {
.projets .item:nth-child(odd) 			    { top: auto;}
.projets .contact 						    { width: 100%; position: static; text-align: center; padding: 5px 0 0 0;}
.projets .contact :last-child 			    { margin-bottom: 0;}
}
@media (max-width:700px) {
.projets                                    { margin: 0 auto; width: 85vw;}
.projets>.titre_main                        { text-align: left;}
.projets .grid							    { grid-template-columns: 1fr; gap: 20px; padding: 0;}
.projets .item .titre                       { display: none;}
.projets .item .content_titre               { padding-bottom: 20px;}
.projets .item .sous_titre                  { font-size: 16px;}
.projets .item img                          { min-height: 300px; object-fit: cover;}
}


/** creations_details detail **/
.projets_details 							{ width: 100%; height: 100vh; position: fixed; right: 0; top: 0; z-index: 250; display: none;}
.projets_details ::-webkit-scrollbar  	    { display: none;}
.projets_details .close_bg				    { width: 100%; height: 100%; background: #000; position: absolute; left: 0; top: 0; z-index: 10; opacity: 0.7; cursor: url(../images/close.svg), auto;}
.projets_details .infos					    { width: 80vw; height: 100vh; background: #fff; position: absolute; top: 0; z-index: 20;}
.projets_details .infos .close 			    { position: absolute; top: 0; left: -60px; width: 60px; height: 60px; background: #3A8B86; background: #fff; cursor: pointer; z-index: 50;}
.projets_details .infos .close:before		{ width: 24px; height: 2px; background: #634e42; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); content: "";}
.projets_details .infos .close:after		{ width: 2px; height: 24px; background: #634e42; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); content: "";}
.projets_details .infos .row				{ height: 100%; overflow-y: auto; display: grid; align-items: center;}

.projets_details .infos .titre              { margin-bottom: 5px}
.projets_details .infos .row .wrap		    { padding: 60px 0 80px 0; position: relative;}
.projets_details .infos .texte 			    { background: #fff; margin-bottom: 40px;}
.projets_details .photos                    { height: 60vh; max-height: 800px; position: relative;}
.projets_details .swiper     	            { overflow: visible; height: 60vh; }
.projets_details .slider img	            { width: 100%; height: 100%; object-fit: cover; display: block;}
.projets_details .swiper-slide              { height: 60vh; width: auto;}

/* open close animation */
.projets_details .infos					    { right: -80vw; transition: right 600ms ease-in-out 200ms;}
.projets_details .infos.active			    { right: 0; transition-delay: 400ms;}
.projets_details .infos .row				{ opacity: 0; transition: opacity 400ms ease-in-out 0ms; padding: 0 100px;}
.projets_details .infos.active .row		    { opacity: 1; transition-delay: 1000ms;}

.photos [class*="arrownav_"]                { width: 50px; height: 50px; position: absolute; top: 20px; background-position: center; background-repeat: no-repeat; background-color: #fff; cursor: pointer; z-index: 1;}
.photos .arrownav_prev                      { background-image: url(../images/arrow_prev.svg); left: 20px;}
.photos .arrownav_next                      { background-image: url(../images/arrow_next.svg); left: 80px;}

@media (min-width:1201px) {
.projets_details .infos .close:hover:before	{ background: #000;}
.projets_details .infos .close:hover:after	{ background: #000;}
.photos [class*="arrownav_"]                { transition: all ease-in-out 400ms;}
.photos [class*="arrownav_"]:hover          { background-color: #b5c7bc;}
}

@media (max-width:1200px) { 
.projets_details .infos					    { width: 100vw; right: -100vw;}
.projets_details .infos .close 			    { left: auto; top: 0; right: 0; width: 50px; height: 50px; background: #000; opacity: 0; transition: opacity 400ms ease-in-out 0ms;}
.projets_details .infos .close:before		{ background: #fff;}
.projets_details .infos .close:after		{ background: #fff;}
.projets_details .infos .row .wrap		    { padding: 50px 0;}
.projets_details .infos .texte 			    { margin-bottom: 30px;}
.projets_details .slider .slick-slide img	{ height: 40vw;}
.projets_details .infos.active .close		{ opacity: 1; transition-delay: 1000ms;}
}
@media (max-width:1000px) { 
.projets_details .slider .slick-slide img	{ height: 60vw;}
}
@media (max-width:700px) { 
.projets_details .infos .close 			    { top: 0; right: 0; width: 46px; height: 46px;}
.projets_details .infos .row .wrap		    { padding: 5vw 0;}
.projets_details .infos .row                { padding: 0 20px;}
.projets_details .photos                    { width: 100%; height: auto; max-height: inherit;}
.projets_details .swiper     	            { height: auto; }
.projets_details .slider img	            { width: 100%; height: auto;}  
.projets_details .swiper-slide              { height: auto; width: 100%;}
.projets>.titre_main                        { margin-bottom: 20px;}
.photos [class*="arrownav_"]                { display: none;}
.photos .swiper-wrapper                     { gap: 10px; display: grid;}
}



/***** tarifs *****/
.tarif                                      { width: 100%; max-width: 960px; margin: 130px auto; background: #f6f2e8; padding: 50px 60px 10px; border-left: 80px solid #b5c7bc; position: relative;}
.tarif .titre_main                          { left: -60px; z-index: 1; color: #fff; top: 50%; transform: translateY(-50%) rotate(180deg);}
.tarif .sous_titre                          { font-size: 18px; line-height: 24px;}
.tarif .infos                               { padding: 0; list-style-type: none; display: grid; grid-template-columns: 320px auto; margin-bottom: 5px;}
.tarif li:last-child                        { margin-bottom: 0;}
.tarif .item                                { margin-bottom: 50px;}

@media (max-width:1000px) {
.tarif                                      { margin: 80px 0; padding: 0; border: none; background: none;}
.tarif .titre_main                          { transform: none; position: static; writing-mode: initial; color: #b5c7bc; margin-bottom: 15px;}
.tarif .infos                               { grid-template-columns: 1fr; line-height: 26px; border-bottom: 1px solid #e1ded6; padding-bottom: 10px; margin-bottom: 10px;}
.tarif li:last-child                        { border: none; margin: 0; padding: 0;}
.tarif .item                                { padding: 30px; margin: 0 0 10px; background: #f6f2e8;}
}
@media (max-width:1000px) {
.tarif                                      { margin: 50px 0;}
.tarif .sous_titre                          { font-size: 16px;}
.tarif .item                                { padding: 20px 30px;}
}



/* contact */
.contact                            { background: #634e42; padding: 90px 0;}
.content_form                       { max-width: 780px;margin: 0 auto;}
.contact .titre                     { color: #fff; text-align: center; margin-bottom: 0;}
.contact .sous_titre                { color: #fff; text-align: center; margin-bottom: 45px;}
.content_form .link                 { display: block; margin: 35px auto 0; background-image: linear-gradient(to top, #fff 0%, #fff 50%, #b5c7bc 50%, #b5c7bc 100%); color: #634e42;}
@media (min-width:1200px) {
.content_form .link:hover           { color: #fff;}
}
@media (max-width:1000px) {
.contact                            { padding: 70px 0;}
}
@media (max-width:700px) {
.contact                            { padding: 45px 0 40px;}
.contact .titre_main                { text-align: left; margin-bottom: 20px;}
.content_form .link                 { width: 100%;}
}




/* map */
.map                                { filter: grayscale(1); margin: 0; padding: 0;}
.map iframe                         { margin: 0 0 -10px 0; padding: 0;}
@media (max-width:7000px) {
.map iframe                         { height: 350px;}
}