.banner                              { padding-top: 170px; position: relative;}
.banner .wrapper                     { width: 90vw; max-width: 1800px; display: grid; grid-template-columns: 560px 1fr; align-items: center; margin: 0 auto;}
.banner .texte                       { padding: 80px; background-color: #2d2d2d; margin-right: -100px; z-index: 70 }
.banner .photo                       { position: relative; width: 100%;}
.banner .photo:after                 { content: ""; background: #f49640; position: absolute; right: calc(-100% - 20px); bottom: 0; top: 0; width: 100%; height: 100%; display: block; z-index: 70;}
.banner .photo img                   { display: block; width: 100%; height: auto;}
.banner .titre_main                  { color: #fff; margin: 0 0 20px 0; font-weight: 400;}
.banner .titre_main span             { font-weight: 500; font-size: 60px; text-transform: uppercase; display: block; margin-bottom: 20px;}

@media (max-width:1900px) {
.banner .wrapper                     { max-width: 1500px; }
}
@media (max-width:1500px) {
.banner .wrapper                     { grid-template-columns: 440px 1fr;}
.banner .texte                       { padding: 50px; margin-right: -60px; }
.banner .titre_main                  { font-size: 30px; }
.banner .titre_main span             { font-size: 45px; }
}
@media (min-width:1201px) {
.banner .link:hover                  { background-color: #000; }
}
@media (max-width:1200px) {
.banner                              { padding-top: 90px;}
.banner .wrapper                     { grid-template-columns: 390px 1fr;}
.banner .texte                       { padding: 40px 35px; margin-right: -50px; }
.banner .titre_main                  { margin: 0 0 15px 0;}
.banner .titre_main span             { font-size: 40px; margin: 0 0 15px 0;}
.banner .photo:after                 { display: none;}
}
@media (max-width:1000px) {
.banner .wrapper                     { grid-template-columns: 1fr; max-width: 750px;}
.banner .texte                       { grid-area: 2;  margin-right: 0;}
}
@media (max-width:600px) {
.banner                              { padding-top: 90px; position: relative;}
.banner .wrapper                     { width: 100vw; max-width: inherit; }
.banner .texte                       { padding: 40px 7.5vw; text-align: center;}
.banner .titre_main                  { font-size: 20px; margin-bottom: 15px;}
.banner .titre_main span             { font-size: 28px; margin-bottom: 5px;}
}



.intro                               { margin: 40px auto 50px; }
.intro img                           { margin-bottom: 20px; }
.intro p                             { margin-top: 20px; }
.intro ul                            { margin-top: 20px; }
.intro p:not(:first-of-type)         { margin-top: 0; }

.intro .hide						 { display: none;}
.intro .lire_plus,
.intro .lire_moins 				     { cursor: pointer;}
.intro .lire_plus.active			 { opacity: 0; cursor: default;}

@media (max-width:1200px) {
.intro                               { margin: 20px auto 30px; }
}
@media (max-width:1000px) {
}
@media (max-width:600px) {
.intro img                           { display: block; width: 110px; height: auto}
}




.about                               { background-color: #2d2d2d; color: #fff; position: relative; margin: 100px auto 200px;}
.about:after                         { content: ""; background: #f49640; position: absolute; left: calc(-100% + 100px); bottom: -100px; top: 100px; width: 100%; height: 100%; display: block; z-index: -1;}
.about .texte                        { padding: 0 80px;}
.about .texte p a                    { color: #fff; border-bottom: 1px solid #575757; }
@media (min-width:1201px) {
.about .texte p a:hover              { color: #f49640; border-bottom: 1px solid #f49640; }
}
@media (max-width:1200px) {
.about                               { margin: 80px auto 140px;}
.about .texte                        { padding: 60px 60px 60px 0;}
.about .photo                        { padding-left: 60px;}
.about:after                         { display: none;}
}
@media (max-width:1000px) {
.about                               { margin: 70px auto ;}
.about .texte                        { padding: 0 5vw 5vw;}
.about .photo                        { padding-left: 0;}
}
@media (max-width:600px) {
.about                               { margin: 50px auto ;}
.about .texte                        { padding: 0 7.5vw 7.5vw;}
}




.avantages .titre                    { text-align: center; margin-bottom: 30px;}
.avantages .grid                     { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; }
.avantages .grid .item               { background-color: #f4f4f4; padding: 0 30px; position: relative;}
.avantages .grid .item a             { display: grid; grid-template-columns: 50px 1fr; height: 70px; position: relative; color: #2d2d2d; align-items: center;}
.avantages .grid .item a:after       { content: ""; position: absolute; right: 0; width: 40px; height: 100%; display: inline-block; background: url("../images/arrow_long_orange.svg") 50% no-repeat; z-index: 70;}
@media (min-width:1201px) {
.avantages .grid .item a:hover:after   { right: 20px;}
    
}
@media (max-width:1200px) {

}
@media (max-width:1000px) {
.avantages .titre                    { margin-bottom: 20px;}
.avantages .grid                     { grid-template-columns: 1fr;}
.avantages .grid .item               { padding: 0 20px;}
.avantages .grid .item a             { height: 60px;}
}
@media (max-width:600px) {
.avantages .grid .item a             { grid-template-columns: 1fr;}
.avantages .grid .item p             { padding-right: 60px;}
.avantages .grid .item img           { display: none;}
}




.carte                                { position: relative; margin: 100px auto 75px; min-height: 550px; background-color: #f4f4f4; }
.carte:after                          { content: ""; background: #f49640; position: absolute; right: calc(-100% - 20px); bottom: 0; top: 0; width: 100%; height: 100%; display: block; z-index: 70;}               
.carte .nombre                        { background-color: #2d2d2d; color: #fff; text-align: center; padding: 25px 30px;}
.carte .titre                         { color: #fff;}
.carte .titre span                    { color: #f49640;}
@media (max-width:1200px) {
.carte                                { margin: 80px auto; min-height: 550px; }
.carte:after                          { display: none;}               
.carte .nombre                        { padding: 20px;}
}
@media (max-width:1000px) {
.carte                                { margin: 70px auto; }
}
@media (max-width:600px) {
.carte                                { margin: 50px auto; }
.carte .titre                         { font-size: 15px; }
}


/***** biens vendus *****/
.carte .map #gmap 					  { width: 100%; min-height: 450px; height: 50vh; overflow: hidden;}
.carte .map .mapInfoBox				  { padding: 10px; background-color: #fff; border-radius: 5px; border: 1px solid #ccc;}
.carte .map .mapInfoBox img			  { width:100%;}
@media (min-width:1201px) {
.carte .map #gmap 					  { min-height: 600px; }
}



.contact.bloc_grid                    { grid-template-columns: 600px 1fr; margin: 75px auto 100px }
.contact.bloc_grid.reverse .texte     { background-color: #2d2d2d; text-align: center; margin-right: -80px; z-index: 50; padding: 70px;}
.contact .texte .sous_titre a         { color: #f49640;}
.contact .texte .titre                { color: #fff;}
.contact .texte .link                 { margin: 15px auto 25px;}
.contact .texte .link.tel             { display: none;}
.contact .texte .sous_titre           { color: #fff;}
@media (min-width:1201px) {
.contact .texte .link:hover           { background-color: #000; }
}
@media (max-width:1200px) {
.contact.bloc_grid                    { grid-template-columns: 540px 1fr; }
.contact.bloc_grid.reverse .texte     { margin-right: -60px; padding: 60px;}
.contact .texte .link                 { margin: 20px auto 30px;}
}
@media (max-width:1000px) {
.contact.bloc_grid                    { grid-template-columns: 1fr; grid-gap: 0;}
.contact.bloc_grid.reverse .texte     { margin-right: 0px; padding: 50px 5vw;}
}
@media (max-width:600px) {
.contact.bloc_grid.reverse .texte     { padding: 40px 7.5vw;}
.contact .texte .link                 { margin: 15px auto 0; display: block; width: 100%; max-width: 250px;}  
.contact .texte .link.tel             { display: block;}
.contact .photo                       { display: none;}
.contact .texte .titre span           { color: #fff;}
.contact .texte .sous_titre           { display: none;}
}