body#page       { background: var(--colorBeige);}
.bloc-faq       { padding-top: 0; padding-bottom: 0; margin: var(--marginBloc);}
.red            { color: var(--colorRed); }
.anchor         { top: -120px; position: relative;}

/***** top *****/
.top_page                           { display: block; width: 90vw; max-width: 1200px; margin: 220px auto 40px auto;}
.top_page h1                        { color: var(--colorBlue); font-weight: 500; margin-bottom: 20px;}
.top_page h1 span                   { color: var(--colorRed);}
.top_page a.back                    { margin-bottom: 10px; display: block;}

.breadcrumb                         { margin-bottom: 40px;}
.breadcrumb a                       { color: var(--colorBlue); font-size: 13px;}
.breadcrumb li 						{ display: inline-block; line-height: 30px; letter-spacing: 1.2px; margin-right: 30px; position: relative;}
.breadcrumb li:after				{ width: 1px; height: 9px; position: absolute; right: -16px; top: 11px; background: var(--colorBody); content: "";}
.breadcrumb li:last-child a       	{ color: var(--colorLinkHover);}
.breadcrumb li:last-child:after 	{ display: none;}

@media (min-width:1201px) {
.top_page a.back:hover               { color: var(--colorRed);}
}

@media (max-width:1200px) {
.top_page                           { margin: 120px auto 40px auto;}
}
@media (max-width:1000px) {
.breadcrumb         { display: none;}
}
@media (max-width:800px) {
.top_page                           { margin: 100px auto 40px auto;}
}
@media (max-width:600px) {
.top_page                           { margin: 80px auto 40px auto;}
}

/***** top *****/
.top_page .bloc-search              { width: 90vw; max-width: 1200px; margin:40px auto;}
.top_page .bloc-search .tabs label  { cursor: pointer; border-radius: 10px; background: #ffffff; padding: 20px; font-weight: 600; margin-right: 7px; display: inline-block;}
.top_page .bloc-search .tabs label.active        { color: var(--colorRed);}
.top_page .bloc-search .tabs label.active:before { content: ''; border-right: solid 10px transparent;  border-left: solid 10px transparent;  border-top: solid 10px #ffffff; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); }

.top_page .bloc-search form                        { display: grid; grid-template-columns: 1fr 1fr 1fr auto; grid-gap: 10px; background: #ffffff; border-radius: 10px; padding: 30px; margin-top: 20px;}
.top_page .bloc-search form .SelectBox, 				
.top_page .bloc-search form select, 				
.top_page .bloc-search form input[type=text]       { width: 100%; padding: 0 25px; height: 50px; margin: 0; border-radius: 5px; appearance: none; padding-bottom: 0; background: url("../images/arrow_select.svg") right+20px center no-repeat #f8f4f0; border: none; font-size: 15px; font-weight: 500; cursor: pointer;}
.top_page .bloc-search form .SelectBox             { line-height: 50px;} 				
.top_page .bloc-search form .SelectBox option      { line-height: 50px; height: 50px;} 
.top_page .bloc-search form .launch                { width: 50px; height: 50px; border-radius: 50%; position: relative; background: url("../images/icone-loupe.svg") 50% no-repeat var(--colorRed); border: 0; padding: 0; cursor: pointer; font-size: 0; transition: all 300ms ease-in-out;}


@media (min-width:1201px) {
.top_page .bloc-search .tabs label:hover       { color: var(--colorRed);}
.top_page .bloc-search form .launch:hover      { background: url("../images/icone-loupe.svg") 50% no-repeat var(--colorBlue);}
}

@media (max-width:1024px) {
.top_page .bloc-search form         { grid-template-columns: 1fr 1fr; grid-gap: 10px; padding: 20px; margin-top: 20px;}  
.top_page .bloc-search form .launch { width: 100%; border-radius: 5px;}  
}
@media (max-width:600px) {
.top_page .bloc-search form         { grid-template-columns: 1fr;}     
}

/***** class / ID / tag *****/
h3          { color: var(--colorBlue); font-weight: 500; margin-bottom: 20px;}
h3 span     { color: var(--colorRed);}
h2.titre    { color: var(--colorBlue); font-weight: 500;}

.bloc-cta { background: #ffffff;}

/***** bloc grid *****/
.bloc_texte         { width: 90vw; max-width: 1200px; margin: var(--marginBloc); }
.bloc_texte.full    { width: 90vw; max-width: 1620px; margin: var(--marginBloc); }
.bloc_texte p       { margin-bottom: 20px;}

.bloc_grid               { width: 90vw; max-width: 1200px; margin: var(--marginBloc); display: grid; grid-template-columns: repeat(2,1fr); align-items: center; grid-gap: 0 80px;}
.bloc_grid .photo        { line-height: 0; font-size: 0;}
.bloc_grid .photo img    { max-width: 100%; width: 100%; height: auto; border-radius: 30px;}
.bloc_grid .texte p      { margin-bottom: 20px;}
.bloc_grid .texte :last-child { margin-bottom: 0;}

.bloc_grid.reverse            { max-width: 1200px;}
.bloc_grid.reverse .texte     { grid-area: 1 / 1; padding-right: 0;}
.bloc_grid.reverse .photo     { grid-area: 1 / 2;}


.bloc_grid.full               {  max-width: 1620px;}
.bloc_grid.full .photo:before { content: ""; position: absolute; top: 100px; right: 90%; width: 200vw; height: 100%; background: #ffffff; z-index: -1;  border-radius: 0 0 5vw 0;}
.bloc_grid.full .texte        { padding-right: 210px;}
.bloc_grid.reverse.full .photo:before { content: ""; position: absolute; top: 100px; left: 90%; width: 200vw; height: 100%; background: #ffffff; z-index: -1;  border-radius: 0 0 0 5vw;}
.bloc_grid.reverse.full .texte        { padding-left: 210px; padding-right: 0;}

.bloc-team              { width: 100%; margin: 80px 0; text-align: center; display: grid; grid-template-columns: repeat(4,1fr); grid-gap:40px 40px;   border-radius: 5vw; background: #ffffff;} 
.bloc-team:before       { content: ""; position: absolute; top: -40px; left: -40px; width: calc(100% + 80px); height: calc(100% + 80px); background: #ffffff; z-index: -1;  border-radius:5vw;}
.bloc-team .item img    { border-radius: 50%; border: 20px solid var(--colorBeige); width: 100%; max-width: 250px; height: auto;}
.bloc-team .item h4     { font-weight: 600; color: var(--colorBlue);} 

.bloc-biens                 { width: 90vw; max-width: 1620px; margin: var(--marginBloc); text-align: center; display: grid; grid-template-columns: repeat(3,1fr); grid-gap:60px 40px;}

.bloc-biens .item_bien                                      { transition: all 400ms ease-in-out; border-radius: 30px; overflow: hidden; transform: translateY(0); cursor: pointer;}
.bloc-biens .item_bien .statut                              { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: 13px; color: var(--colorRed); font-weight: 700; text-transform: uppercase; z-index: 10; padding: 10px 20px 12px 20px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background: #ffffff;}
.bloc-biens .item_bien .statut.oblique                      { transform:translateX(40%) rotate(45deg); left: inherit; right: 30px; top: 30px; width: 300px;}
.bloc-biens .item_bien .link-bien                           { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2;}
.bloc-biens .item_bien .slider_photos img                   { width: 100%; height: 380px; object-fit: cover; display: block; filter: brightness(0.9); }
.bloc-biens .item_bien .slider_photos .portrait   			{ width: 100%; overflow: hidden; position: relative;}
.bloc-biens .item_bien .slider_photos .portrait img.photo	{ width: auto; height: 100%; margin: 0 auto; position: absolute; left: 0; right: 0; top: 0; z-index: 10;}

.bloc-biens .item_bien .informations                { background-color: #fff; padding: 30px;}
.bloc-biens .item_bien .informations .infos_breves  { text-align: left;}

.bloc-biens .item_bien .infos_breves h3             { font-weight: 600; font-size: 18px; line-height: 28px; color: var(--colorBody); margin-bottom: 0;}
.bloc-biens .item_bien .infos_breves h3 span        { display: block; font-size: 14px; font-weight: 500; color: var(--colorBody);}
.bloc-biens .item_bien .infos_breves .price         { color: var(--colorRed); font-weight: 700; }
.bloc-biens .item_bien .infos_breves .price img     { position: absolute; display: block; top: 10px; right: 0; }

.bloc-biens .item_bien .liste_infos                 { margin: 0 -30px; border-top: 1px solid var(--colorBeige); padding-top: 15px; margin-top: 15px;}
.bloc-biens .item_bien .liste_infos li              { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-right: 30px; }
.bloc-biens .item_bien .liste_infos li:last-child   { padding-right: 0;}

.bloc-biens .link                       { margin: 0 5px;}

.bloc-pagination            { width: 90vw; max-width: 1200px; margin: 40px auto; text-align: right;}
.bloc-pagination a          { font-size: 15px; display: inline-block; width: 50px; height: 50px; line-height: 48px; margin: 0 5px; background: var(--colorBlue); color: #ffffff; border-radius: 50%; text-align: center; font-weight: 500;}
.bloc-pagination a.active   { background:  var(--colorRed); color: #ffffff;}

@media (min-width:1201px) {
.item_bien:hover                { transform: translateY(-15px);}
.bloc-pagination a:hover        { background:  var(--colorRed); color: #ffffff;}
}

@media (max-width:1200px) {
.bloc-team              { grid-template-columns: repeat(2,1fr); grid-gap: 40px 20px; width: 80vw; margin: 60px auto; padding: 40px 0;} 
.bloc-team:before       { content: none;}   
}

@media (max-width:1400px) {
.bloc_grid                      { align-items: start; grid-gap: 0 40px;}   
.bloc_grid.full .texte          { padding-right: 0;} 
.bloc_grid.reverse.full .texte  { padding-left: 0;} 
.bloc_grid.full .photo:before   { top: 50px;}
}

@media (max-width:1024px) {
.bloc-biens                 { grid-template-columns: repeat(2,1fr); grid-gap:40px 20px;}  
.bloc-biens .item_bien      { border-radius: 20px;}  
}

@media (max-width:800px) {
.bloc-team                      { width: 90vw; padding: 40px 40px; border-radius: 10px;}  
.bloc-team .item img            { max-width: 200px; border: 10px solid var(--colorBeige);}
.bloc_grid, 
.bloc_grid.reverse              { grid-template-columns: 1fr; grid-gap: 40px 0; }  
.bloc_grid.full .photo:before   { content: none;}  
.bloc_grid.reverse.full .photo:before   { content: none;}  
.bloc_grid .photo img           { height: 55vh; object-fit: cover; border-radius: 20px;}    
.bloc_grid.reverse .photo       {grid-area: 1 / 1;}
.bloc_grid.reverse .texte       {grid-area: 2 / 1;}
.bloc_grid .photo img           { border-radius: 10px;}
}

@media (max-width:600px) {
.bloc-team, 
.bloc-biens                      { grid-template-columns: 1fr; }
}


/***** fiche *****/
.top_page .ref                  { font-size: 12px; margin-top: -10px; display: block;}
.bloc-fiche-photo               { width: 90vw; max-width: 1620px; margin: 20px auto 60px auto; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px;}
.bloc-fiche-photo .item.main    { grid-column: span 2; grid-row: span 2;}
.bloc-fiche-photo a             { display: block; height: 100%;} 
.bloc-fiche-photo img           { width: 100%; height: 100%; border-radius: 20px; object-fit: cover;} 
.bloc-fiche-photo .item.more .number { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);  font-weight: 500; color: #ffffff; z-index: 10; background: #00000070; width: 100%; height: 100%; border-radius: 20px; display: flex; justify-content: center; align-items: center;}

.bloc-fiche { width: 90vw; max-width: 1200px; margin: 40px auto 40px auto; display: grid; grid-template-columns: 1fr 280px; grid-gap: 0 80px; }

.bloc-fiche .item .statut        { color: var(--colorRed); font-weight: 600; text-transform: uppercase; background: #ffffff; padding: 10px 20px; border-radius: 10px; display: inline-block;}
.bloc-fiche .item .rs-partage    { display: flex; position: absolute; right: 0; top: 0;}
.bloc-fiche .item .rs-partage a  { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; margin-right: 10px; border-radius: 50%; background: #ffffff; cursor: pointer; }

.bloc-fiche .item .fiche-titre          { color: var(--colorBlue); margin: 20px 0 0 0;}
.bloc-fiche .item .fiche-description    {margin-top: 30px;}

.bloc-fiche .item .fiche-infos                 { border-top: 1px solid var(--colorBeige); padding-top: 15px; margin-top: 30px;}
.bloc-fiche .item .fiche-infos li              { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 20px; padding-right: 30px; font-weight: 500; }
.bloc-fiche .item .fiche-infos li:last-child   { padding-right: 0;}
.bloc-fiche .item .fiche-infos li img          { transform: scale(150%); }

.bloc-fiche .item .bloc-cta-top      { border-radius: 10px 10px 0 0; background-color: var(--colorBlue); text-align: center; color: #ffffff; font-weight: 500; padding: 20px 0; width: 280px;}
.bloc-fiche .item .bloc-cta-bottom   { border-radius: 0 0 10px 10px; background-color: #ffffff; text-align: center; padding: 20px 0; color: var(--colorBlue); font-size: clamp(1.4rem, 1.2814rem + 0.5186vw, 1.8rem); font-weight: 500; width: 280px;}
.bloc-fiche .item .bloc-cta-bottom a { margin: 5px 0;}
.bloc-fiche .item .bloc-cta-bottom a:nth-child(1) { margin-top: 20px;}

.bloc_texte .fiche-titre          { color: var(--colorBlue); margin: 20px 0 0 0;}

.content_form .fiche-titre        { color: var(--colorBlue); margin: 0 0 20px 0; font-weight: 500;}

.map            { grid-column: span 2;}
.map iframe     { border-radius: 10px; border: none;}

/***** onglets *****/
.onglets  							{ position:relative; z-index:10; margin: 60px auto;}
.onglets .nav_onglets 				{ margin-bottom:40px;}
.onglets .nav_onglets a             { background-color: #ffffff; height: 60px; line-height: 60px; display: inline-block; margin: 0 5px 15px 0 ; cursor:pointer; overflow: visible; transition: background-color 300ms ease-in-out; border-radius: 5px; padding: 0 30px;}
.onglets .nav_onglets a:after	    { width:12px; height: 12px; background:transparent; transform: rotate(45deg) translateX(-50%); content:""; position:absolute; left:50%; bottom: -10px; z-index: -1;}
.onglets .nav_onglets a.active			{ background-color: var(--colorRed); color: #ffffff;  }
.onglets .nav_onglets a.active:after	{ background-color: var(--colorRed); bottom: -10px; }

.onglets .item                   { background: #ffffff; border-radius: 10px; padding: 30px;}
.onglets .item ul                { margin-top: 15px; margin-bottom: 20px;}
.onglets .item ul li             { position: relative; padding-left: 20px; line-height: 25px; margin-bottom: 12px;}
.onglets .item ul li:before      { width: 6px; height: 10px; position: absolute; left: 0; top: 6px; background: url("../images/li-bullet.svg") 0 0 / contain no-repeat; content: "";}
.onglets .item ul li:last-child  { margin-bottom: 0;}

.onglets .item ul.fiche-list li         { display: grid; position: relative; grid-template-columns: 1fr 1fr; padding: 15px 0; border-bottom: 1px solid var(--colorBeige) }
.onglets .item ul.fiche-list li:before  { content: none;}
.onglets .item ul.fiche-list li span    { font-weight: 500; }

@media (min-width:1201px) {
.onglets  							        { margin: 50px auto;}    
.onglets .nav_onglets a:not(.active):hover  { background-color: var(--colorRed); color: #ffffff;}
.onglets .nav_onglets a.active:hover        { cursor: default;}
}
@media (max-width:1200px) {
.onglets .nav_onglets a:after   { content: none;}
}
@media (max-width:1000px) {
.bloc-fiche-photo                   { grid-template-columns: 1fr 1fr;}
.bloc-fiche-photo img               { border-radius: 20px;}
.bloc-fiche-photo .item.main img    { height: 55vh; width: 100%; object-fit: cover;}
.bloc-fiche                         { grid-template-columns: 1fr; grid-gap: 40px 0;}
.bloc-fiche .item .bloc-cta-top,
.bloc-fiche .item .bloc-cta-bottom  { width: 100%; border-radius: 10px;}
.bloc-fiche .item .bloc-cta-bottom span { display: block; margin-bottom: 20px; }
.map                                { grid-column: inherit;}
.onglets  						    { margin: 40px auto 0 auto;}    
}
@media (max-width:700px) {
.onglets  						{ margin: 30px auto;}    
.onglets .nav_onglets a			{ margin: 0 0 5px 0;}
.onglets .nav_onglets a:after	{ display: none}
}
@media (max-width:600px) {
.onglets .nav_onglets a			{ width: 100%; text-align: center;}
}


/***** description *****/
ul.list_details li					{ display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #404040; padding: 10px 0 12px 0; }
@media (max-width:1000px) {
ul.list_details li					{ grid-template-columns: 1fr auto; }
}


/***** PEB *****/
.peb  								{ margin-top: 40px; max-width: 420px; margin-bottom: 40px;}
.peb .peb_item						{ font-size: 14px; line-height: 30px; color: #000; margin-top: 10px; text-align: right; font-weight: 400; overflow: hidden; position: relative;}
.peb .peb_item b					{ height: 30px; display: block; padding: 0 12px; font-weight: 400; position: relative; border-radius: 8px; z-index: 10;}
.peb .peb_item span					{ height: 30px; display: block; padding: 0 12px; position: absolute; right: 0; top: 0; border-radius: 8px; z-index: 5;}
.peb .peb_item span:before			{ width: 500px; height: 2px; background: #ccc; position: absolute; right: 100%; top: 50%; margin-top: -1px; z-index: 0; content: "";}
.peb .peb_a b						{ width: 16%; background: #33a357;}
.peb .peb_a span, 
.peb .peb_a span:before				{ background: #33a357;}
.peb .peb_b b						{ width: 24%; background: #79b752;}
.peb .peb_b span, 
.peb .peb_b span:before				{ background: #79b752;}
.peb .peb_c b						{ width: 32%; background: #c3d545;}
.peb .peb_c span,					 
.peb .peb_c span:before				{ background: #c3d545;}
.peb .peb_d b						{ width: 40%; background: #fff12c;}
.peb .peb_d span, 
.peb .peb_d span:before				{ background:#fff12c;}
.peb .peb_e b						{ width: 48%; background: #edb731;}
.peb .peb_e span, 
.peb .peb_e span:before				{ background:#edb731;}
.peb .peb_f b						{ width: 56%; background: #d66f2c;}
.peb .peb_f span, 
.peb .peb_f span:before				{ background:#d66f2c;}
.peb .peb_g b						{ width: 64%; background: #cc232a;}
.peb .peb_g span, 
.peb .peb_g span:before				{ background: #cc232a;}

@media (max-width:1000px) {
.peb .peb_a b						{ width: 25%;}
.peb .peb_b b						{ width: 30%;}
.peb .peb_c b						{ width: 35%;}
.peb .peb_d b						{ width: 40%;}
.peb .peb_e b						{ width: 45%;}
.peb .peb_f b						{ width: 50%;}
.peb .peb_g b						{ width: 55%;}
}



/***** custom fancybox *****/
.fancybox-bg									{ background: #ffffff;}
.fancybox-is-open .fancybox-bg					{ opacity: 1;}
.fancybox-button,
.fancybox-infobar__body 						{ background: none; color: var(--colorBody); font: 400 14px/60px var(--fontBody); letter-spacing: 0.8px;}
.fancybox-infobar 							    { top: 30px; left: auto; right: 90px; margin-left: 0;}
.fancybox-button--right     				    { display: none;}
.fancybox-button--left      				    { display: none;}
.fancybox-toolbar 								{ top: 30px; right: 30px; opacity: 1!important;}
.fancybox-show-nav .fancybox-arrow 				{ opacity: 1; transition: all 400ms ease-in-out;}
.fancybox-button--close 						{ width: 54px; height: 54px; border-radius: 5px; background: var(--colorRed); transition: all 400ms ease-in-out;}
.fancybox-button--close:before					{ width: 24px; height: 2px; left: calc(50% - 12px); top: calc(50% - 1px); background: #fff;}
.fancybox-button--close:after					{ width: 24px; height: 2px; left: calc(50% - 12px); top: calc(50% - 1px); background: #fff;}    
.fancybox-arrow 								{ width: 50px; height: 50px; border-radius: 5px; background: url("../images/arrow_next-white.svg") 54% 50% no-repeat var(--colorRed); margin-top: -40px; }
.fancybox-arrow:after							{ display: none;}
.fancybox-arrow--right 							{ right: 30px;}
.fancybox-arrow--left 							{ left: 30px;}

.fancybox-navigation    { top: 50%;}

@media (min-width:1201px) { 
.fancybox-button:hover:not([disabled])          { background-color: var(--colorBlue);} 
.fancybox-button--close:hover:before			{ background: #fff;}
.fancybox-button--close:hover:after				{ background: #fff;}
.fancybox-arrow:hover:not([disabled])  			{ background-color: var(--colorBlue);}
}
@media (max-width:1200px) { 
.fancybox-arrow			 						{ border: none;}
}
@media (max-width:600px) { 
.fancybox-button,
.fancybox-infobar__body 						{ line-height: 40px;}
.fancybox-toolbar 								{ top: 0; right: 0;}
.fancybox-button--close 						{ width: 46px; height: 46px;}
.fancybox-button--close:before					{ width: 20px; left: calc(50% - 10px);}
.fancybox-button--close:after					{ width: 20px; left: calc(50% - 10px);}
.fancybox-arrow 								{ width: 40px; height: 50px; margin-top: -25px; background-size: 25% auto;}
.fancybox-arrow--right 							{ right: 0;}
.fancybox-arrow--left 							{ left: 0;}
}