@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;600;700&display=swap');

.locative{ background:rgb(169,186,160); }
.construction{ background:rgb(186,186,170); }
.cci{ background:rgb(175,138,131); }
.za{ background:rgb(109,126,120); }

:root {
    --locative: rgb(169,186,160);
    --construction: rgb(186,186,170);
    --cci: rgb(175,138,131);
    --za: rgb(109,126,120);

    --dlocative:rgb(109,126,120);
}


  

.color-solutions-locatives{ color:var(--locative); }
.color-solutions-de-constructions{ color:var(--construction); }
.color-carre-des-affaires{ color:var(--cci); }
.color-zone-dactivites{ color:var(--za); }

.bg-solutions-locatives{ background:var(--locative); }
.bg-solutions-de-constructions{ background:var(--construction); }
.bg-carre-des-affaires{ background:var(--cci); }
.bg-zone-dactivites{ background:var(--za); }


html{ height:100vh; width:100vw; }
body{ font-family: 'Fira Sans', sans-serif;font-weight:400; font-size:16pt; line-height:24pt; letter-spacing:-0.29pt  }

header{ display:flex; flex-direction: raw; justify-content: space-between; padding:2%; }
.home header{ position:relative }
header .site-branding img{ max-width:278pt }
header .main-navigation{ width:auto; }

a.back{ font-weight:300; font-size:14pt; line-height:14pt; letter-spacing:-0.25pt; color:#fff; text-decoration:none }

body.home{ height:100vh; width:100vw; background:url( ../img/bg.jpg ) no-repeat; background-size:cover; margin:0; padding:0 }
body.home #primary{ padding:40px 2%; max-width:1100px; display:flex; flex-direction:row; flex-wrap: wrap; }
body.home #primary .home-b{ width:445px; padding:6%; min-height:300px; background-image:url( ../img/home-arrow.png ); background-repeat:  no-repeat; background-position:90% 85%; margin-bottom:25px; margin-right:25px; line-height:32pt; letter-spacing:-0.5pt }
body.home #primary .home-b p,
body.home #primary .home-b p a{ font-size:28pt; margin:0; line-height:32pt; letter-spacing:-0.5pt; color:#fff; text-decoration:none }
body.home #primary .home-b p span{ font-weight:700 }

nav.main-navigation button.menu-toggle{ z-index:999; display:block; width:24pt; height:24pt; background:url( ../img/menu-w.png ) no-repeat; position:absolute; right:2%; }
nav.main-navigation button.menu-toggle{ background:url( ../img/menu.png ) no-repeat; border:none}
.page:not(.home) nav.main-navigation button.menu-toggle{ background:url( ../img/menu-w.png ) no-repeat; border:none}
.single-programme nav.main-navigation button.menu-toggle{ background:url( ../img/menu-w.png ) no-repeat; border:none}


#site-navigation.toggled .menu-menu-1-container{ position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 888; background:rgb(109,126,120) url( ../img/map.png ) no-repeat bottom left; }
#site-navigation.toggled  .menu-menu-1-container #primary-menu.menu{ display: flex; flex-direction: column; align-items: center; height: 100vh; justify-content: center; }
#site-navigation.toggled button.menu-toggle{ background:url( ../img/close.png ) no-repeat center center; width:16pt; height:16pt;  }
#site-navigation.toggled .nav-menu li,
#site-navigation.toggled .nav-menu li a{ color:#fff; font-size:28pt; font-weight:400; line-height:32pt; letter-spacing:-0.5pt; max-width:400pt; text-align:center; margin-bottom:20px }
#site-navigation.toggled .nav-menu li a span{ font-weight:700;  }


.home footer{ width:96%; margin-left:2%; position:relative; bottom:0;  line-height:45pt; letter-spacing: -0.07pt; }
footer,
    footer p,
    footer a{ font-size:13pt; color:rgb(109,126,120);  }
footer a{ text-decoration:none }
footer a:hover{ text-decoration:underline }

.page:not(.home) header{ width:100%; max-width:1592px; margin:auto; padding:2% 0 }
.page:not(.home) #primary{ width:92%; max-width:1592px; margin:auto; padding-bottom:80px}
.page:not(.home) .top-page h1{ font-weight:400; color:#fff; font-size:56pt;line-height:56pt;letter-spacing:-1pt }
.page:not(.home) .top-page h1 span{ font-weight:700 }
.page:not(.home) .top-page{ display:flex; flex-direction:row; justify-content:space-between;  }
.page:not(.home) .top-page div{ width:49% }
.page:not(.home) .top-page .contenu h2{ font-weight:600; color:#fff; font-size:28pt;line-height:32pt;letter-spacing:-0.5pt }
.page:not(.home) .top-page .contenu p{ font-weight:300; color:#fff }

.page:not(.home) .page-contenu{ position:relative; display:flex; flex-direction:row; justify-content:space-between; padding:40px 0 600px  }
.page:not(.home) .page-contenu div{ width:49% }
.page:not(.home) .page-contenu h2{ font-weight:600; color:#fff; font-size:28pt;line-height:32pt;letter-spacing:-0.5pt }
.page:not(.home) .page-contenu p{ font-weight:300; color:#fff }
.page:not(.home) .page-contenu .bottom-design{ position:absolute; bottom:-200px; left:-5% }

.page:not(.home) .programmes{ width:100%; padding-top:40px; background:#fff; }
.page:not(.home) .programmes .container{ width:96%; max-width:1592px; margin:auto; }
.page:not(.home).locative .programmes h2{ color:rgb(169,186,160); font-size:40pt; font-weight:700; line-height: 40pt; letter-spacing:-1.25pt}
.page:not(.home).construction .programmes h2{ color:rgb(186,186,170); font-size:40pt; font-weight:700; line-height: 40pt; letter-spacing:-1.25pt}
.page:not(.home).cci .programmes h2{ color:rgb(175,138,131);; font-size:40pt; font-weight:700; line-height: 40pt; letter-spacing:-1.25pt}
.page:not(.home).za .programmes h2{ color:rgb(109,126,120); font-size:40pt; font-weight:700; line-height: 40pt; letter-spacing:-1.25pt}
.page:not(.home) .programmes h2 span{ font-family: 'Fira Sans', sans-serif;font-weight:400 }
.page:not(.home) .programmes .programme{ position:relative; width:100%; max-width:520pt; height:330pt; background-size:cover; }
.page:not(.home) .programmes .programme p{ position:absolute; bottom:0; left:0; padding:20px 100px 20px 60px; margin:0; color:#fff; font-size:18pt;line-height:32pt;letter-spacing:-0.43pt }
.page:not(.home) .programmes .programme p a{ text-decoration:none; color:#fff }
.page:not(.home).locative .programmes .programme p{ background:rgb(169,186,160) url( ../img/home-arrow.png) no-repeat 90% center; }
.page:not(.home).construction .programmes .programme p{ background:rgb(186,186,170); }
.page:not(.home).cci .programmes .programme p{ background:rgb(175,138,131); }
.page:not(.home).za .programmes .programme p{ background:rgb(109,126,120); }

.page:not(.home) .metier-youtube{ background:#fff }
.page:not(.home) .metier-youtube .container{ width:96%; max-width:1592px; margin:auto; display:flex; flex-direction:column;  }
.page:not(.home) .metier-youtube .container h2{ margin:40px 0 }
.page:not(.home).locative .metier-youtube h2{ color:rgb(169,186,160); }
.page:not(.home).construction .metier-youtube h2{ color:rgb(186,186,170); }
.page:not(.home).cci .metier-youtube h2{ color:rgb(175,138,131);}
.page:not(.home).za .metier-youtube h2{ color:rgb(109,126,120); }


.page:not(.home) footer{ background:#fff; position:relative}
.page:not(.home) footer{  padding:40px 0;width:100%; margin:auto }
.page:not(.home) footer .site-info{ width:96%; max-width:1592px; margin:auto;  }

.page:not(.home) .map{ background:#fff; height:1000pt; padding-top:120pt }
.page:not(.home) .map .container{ width:100%; max-width:1592px; margin:auto; height:100%; position:relative; }
.page:not(.home) .map .container img.map-design{ position:absolute; bottom:0; left:0 }
.page:not(.home) .map .container .wpgmza_map{ position:absolute; bottom:0; left:0 }
.page:not(.home) .map .container div.grey{ height:820pt; width:924pt; background:rgb(245,245,241); position:absolute; top:0; right:0 }
.page:not(.home) .map .container div.grey h2{ text-align:right; font-weight:400; font-size:40pt; line-height:48pt; letter-spacing:-0.71pt; color:rgb(109,126,120); margin:80px}
.page:not(.home) .map .container div.grey h2 span{display:block;font-weight:700 }
.page:not(.home) .map .container .img-map{ position:absolute; top:245px; width:80%; left:10% }

.single-programme header{ position:relative }
.single-programme .container{ width:92%; max-width:1592px; margin:auto; position:relative }
.single-programme header .container{ width:100%; max-width:1592px; margin:auto; padding:0; position: initial; }
.single-programme.solutions-locatives header{ background:var(--locative)}
.single-programme.solutions-de-constructions header{ background:var(--construction)}
.single-programme.carre-des-affaires header{ background:var(--cci)}
.single-programme.zone-dactivites header{ background:var(--za)}


.single-programme #primary{ margin-top:-115px; padding-top:150px }
.single-programme.solutions-locatives #primary{ background:var(--locative); }
.single-programme.solutions-de-constructions #primary{ background:var(--construction); }
.single-programme.zone-dactivites #primary{ background:var(--za); }
.single-programme.carre-des-affaires #primary{ background:var(--cci); }
.single-programme .top-page h1{ font-weight:400; color:#fff; font-size:52pt;line-height:56pt;letter-spacing:-1pt }
.single-programme .top-page h1 span{ font-weight:700 }
.single-programme .top-page{ display:flex; flex-direction:row; justify-content:space-between;  }
.single-programme .top-page div{ width:49% }
.single-programme .container .youtube{ width: 100%; height:700px; position: absolute; bottom: 0; top: 32%; background-size: cover; background-position: center; background-repeat: no-repeat;box-shadow:0px 4px 22px rgb(227 227 227 / 50%);}
.single-programme .container .youtube img{ max-width:1542px; width:100%}
.single-programme .programme-contenu.contenu-1{ margin-top:200px }
.single-programme .programme-contenu.contenu-2{ margin-top:40px }
.single-programme .programme-contenu .container{ display:flex; flex-direction:row; align-items:center; align-items: flex-start }
.single-programme .programme-contenu .container div{ width:50% }
.single-programme .programme-contenu .container div:first-child{ padding:0 4% }
.single-programme .programme-contenu .container h2{ font-size:40pt; line-height:48pt; letter-spacing:-0.71pt; margin-top:0}
.single-programme .programme-contenu .container p{ font-size:12pt; line-height:18pt; }
.single-programme .programme-contenu .container p.introduction{ font-size:16pt; line-height:24pt; font-weight:600 }

.single-programme .localisation{ width:100vw; position:relative; margin:100px 0  }
.single-programme .localisation .desgn{ z-index:1; width:80vw; height:110%; position:absolute; top:0; left:0 }
.single-programme .localisation .container{ z-index:2; padding-top:40px  }
.single-programme .localisation .container h2{ z-index:2; position:relative; color:#fff; font-size:40pt; line-height:48pt; letter-spacing:-0.71pt;}
.single-programme .localisation .container img{ z-index:2; position:relative}
.single-programme .atouts{ padding:40px 0 }
.single-programme .atouts .container .les-atouts{ display:flex; flex-direction:row; }
.single-programme .atouts .container .les-atouts.nb-1 div{ width:100%; padding:0 2% }
.single-programme .atouts .container .les-atouts.nb-2 div{ width:calc( 100% / 2 ); padding:0 2% 0 0}
.single-programme .atouts .container .les-atouts.nb-3 div { width:calc( 100% / 3 ); padding:0 2% 0 0}
.single-programme .atouts .container .les-atouts.nb-4 div{ width:calc( 100% / 4 ); padding:0 2% 0 0}
.single-programme .atouts .container .les-atouts div p.titre{ font-size:16pt; line-height:24pt; margin-bottom:10px; font-weight:600 }
.single-programme .atouts .container .les-atouts div p{ font-size:16pt;line-height:24pt; margin-top:10px; font-weight:300 }
.single-programme .grid{ margin-top:40px; position:relative }
.single-programme .grid .container{ z-index:999 }
.single-programme .grid .container a{ margin:0; padding:0; line-height:0 }
.single-programme .grid .grid-green{ position:absolute; width:90%; height:200px; right:0; top:10%; height:105%;z-index:1 }

.single-programme .qr{ margin-top:200px;  }
.single-programme .qr .container div{ border:1px solid rgb(227,227,227); padding:20px 4%; margin-bottom:20px; box-shadow:0px 4px 22px rgb(227 227 227 / 50%); border-radius:15px; cursor:pointer }
.single-programme .qr h2{ font-size:40pt;  }
.single-programme .qr .question{ font-size:21pt; font-weight:600; }
.single-programme.solutions-locatives .qr .question svg path{ fill:var(--locative) !important }
.single-programme.solutions-de-constructions .qr .question svg path{ fill:var(--construction) !important }
.single-programme.carre-des-affaires .qr .question svg path{ fill:var(--cci) !important }
.single-programme.zone-dactivites .qr .question svg path{ fill:var(--za ) !important }
.single-programme .qr .question{ display:flex; justify-content:space-between}
.single-programme .qr .reponse{ display:none; font-size:16pt; color:rgb(33,34,34);  }
.single-programme .qr .container div.open .reponse{ display:block }
.single-programme .qr .container div.open svg{  transform: rotate(180deg); }

.single-programme .cta{ background:rgb( 245 245 241 ); padding:80px 0; margin:80px 0 20px; }
.single-programme .cta.no-qr{ background:rgb( 245 245 241 ); padding:80px 0; margin:200px 0 20px; }
.single-programme .cta p.title1{ color:rgb( 109,126, 120 ); font-size:40pt; line-height:40pt; font-weight:700; text-align:center }
.single-programme .cta .container div{ display:flex; flex-direction:row; justify-content:center; }
.single-programme .cta div.action a{ margin:0 10px; padding:20px 40px; border-radius:15px; text-decoration:none; font-size:16pt; border:1px solid rgb( 109,126, 120 ); color:rgb( 109,126, 120 ); }
.single-programme .cta div.action a:first-child{ background:rgb( 109,126, 120 ); color:#fff} 
.single-programme .cta p.title2{ color:rgb( 109,126, 120 ); font-size:28pt; font-weight:600; text-align:center; margin-top:80px }
.single-programme.solutions-locatives .cta svg path{ fill:var(--locative) !important }
.single-programme.solutions-de-constructions .cta svg path{ fill:var(--construction) !important }
.single-programme.carre-des-affaires .cta svg path{ fill:var(--cci) !important }
.single-programme.zone-dactivites .cta svg path{ fill:var(--za ) !important }
.single-programme .cta div.social a{ margin:0 10px; }
.single-programme .cta div.social svg path{ fill:var(--dlocative) !important; mask:none }

.single-programme .cta div.social .sharethis-inline-share-buttons > div{ width: 36pt !important; height: 36pt !important; min-width: inherit !important; display:inline-block !important; }
.single-programme .cta div.social .sharethis-inline-share-buttons span{ display:none !important }
.single-programme .cta div.social .sharethis-inline-share-buttons img{ display:none !important }
.single-programme .cta div.social .sharethis-inline-share-buttons div[data-network="facebook"]{ background-image:url( ../img/social_fb.png );background-repeat: no-repeat; background-size:cover; background-position:center; border:none !important }
.single-programme .cta div.social .sharethis-inline-share-buttons div[data-network="linkedin"]{ background-image:url( ../img/social_linkedin.png ); background-repeat: no-repeat; background-size:cover; background-position:center; border:none !important }



.single-programme .programmes{ width:100%; padding-top:40px; background:#fff; }
.single-programme .programmes .programme{ position:relative; width:100%; max-width:520pt; height:330pt; background-size:cover; }

.single-programme .programmes .container{ width:96%; max-width:1592px; margin:auto; }
.single-programme.solutions-locatives .programmes h2{ color:var(--dlocative); font-size:40pt; font-weight:700; line-height: 40pt; letter-spacing:-1.25pt}
.single-programme.solutions-de-constructions .programmes h2{ color:var(--dconstruction); font-size:40pt; font-weight:700; line-height: 40pt; letter-spacing:-1.25pt}
.single-programme.carre-des-affaires .programmes h2{ color:var(--dcci); font-size:40pt; font-weight:700; line-height: 40pt; letter-spacing:-1.25pt}
.single-programme.zone-dactivites .programmes h2{ color:var(--dza); font-size:40pt; font-weight:700; line-height: 40pt; letter-spacing:-1.25pt}
.single-programme .programmes h2 span{ font-family: 'Fira Sans', sans-serif;font-weight:400 }
.single-programme .programmes .programme{ position:relative; width:100%; max-width:520pt; height:330pt; background-size:cover; }
.single-programme .programmes .programme p{ position:absolute; bottom:0; left:0; padding:20px 100px 20px 60px; margin:0; color:#fff; font-size:18pt;line-height:32pt;letter-spacing:-0.43pt }
.single-programme .programmes .programme p a{ text-decoration:none; color:#fff }
.single-programme.solutions-locatives .programmes .programme p{ background:rgb(169,186,160) url( ../img/home-arrow.png) no-repeat 90% center; }
.single-programme.solutions-de-constructions .programmes .programme p{ background:rgb(186,186,170); }
.single-programme.carre-des-affaires .programmes .programme p{ background:rgb(175,138,131); }
.single-programme.zone-dactivites .programmes .programme p{ background:rgb(109,126,120); }



.single-programme .wpcf7 input[type="text"],
.single-programme .wpcf7 input[type="email"]{ width:100%; line-height:40px; border:none; text-indent:2% }
textarea{ border:none; text-indent:2% }
.single-programme .wpcf7 input[type="submit"]{ background: rgba( 109, 126, 120, 1.00 ); color: #fff; padding: 15px 40px; border-radius: 15px; }
.single-programme .pum-close{ border-bottom-left-radius:15px; }
.single-programme .popmake{ box-shadow: none !important; }
.single-programme footer{ background:#fff; position:relative}
.single-programme footer{  padding:40px 0;width:100%; margin:auto }
.single-programme footer .site-info{ width:96%; max-width:1592px; margin:auto;  }


.home-map {
    display:flex;
    flex-direction:row;
}

nav.main-navigation a.fullscreen-toggle{ z-index:999; display:block; width:26px; height:26px; background-image:url( ../img/fullscreen.svg );background-size: cover;background-repeat: no-repeat; position:absolute; right:6%; }

#fullscreen-tool {
    position: fixed;
    top: 0;
    right:0;
    background-color:white;
    padding: 10px 15px;
}

.btn {
    background-color: white; /* Green */
    border: none;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16pt;
    line-height: 28pt;
    margin: 4px 2px;
    cursor: pointer;
}

.top-page {
    flex-wrap: wrap;
}

.top-page .contenu {
    flex: 1 0 50%;
}

.top-page .image {
    flex: 1 0 50%;
}

.top-page .btn {
    margin: 0 auto;
}

/* BUTTON */
.page:not(.home).locative .btn{
    color:rgb(169,186,160)!important;
}

.page:not(.home).construction .btn{
    color:rgb(186,186,170)!important;
}

.page:not(.home).cci .btn{
    color:rgb(175,138,131)!important;
}

.page:not(.home).za .btn{
    color:rgb(109,126,120)!important;
}

/* AFFICHAGE */
.page-template-template-solutions-php #page #primary .top-page {
    display: block;
}

.page-template-template-solutions-php #page #primary .top-page .contenu {
    width: 100%;
}

.page-template-template-solutions-php #page #primary .top-page .image {
    position: absolute;
    top:100px;
    right: 0;
}

.page-template-template-solutions-php #page #primary .top-page .image img {
    opacity: 0.1;
}

img[usemap] {
    border: 0;
    height: auto;
    max-width: 100%;
    width: auto;
}