body#selecteur {
	display: flex;
  flex-direction: column;
  height: 100vh;
}

#selecteur-complet {
	position: relative;
	top: 0px;
	background-color: rgba(0, 0, 0, 0);
	width: 100vw;
	flex-grow: 1;
}

/* DROIT */

#selecteur-droit {
	position: absolute;
	left: 500px;
	background-color: white;
	width: calc(100% - 500px);
	height: 100%;
	box-shadow: inset 0 0 0 0px yellow;
}

#selecteur-visuel-fixe-appt-0 {
	position: absolute;
	width: 100%;
	height: 100%;
}

#selecteur-visuel-fixe-appt-0 svg {
	position: absolute;
	width: 100%;
	height: 100%;
}

#selecteur-visuel-fixe-etage-0 {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url('../svg/fond-selecteur.svg');
	background-size: contain;
	background-position: center;
}

/* GAUCHE */

#selecteur-gauche {
	position: absolute;
	width: 500px;
	height: calc(100% - 40px);
	padding: 20px 0;
	box-shadow: inset 0 0 0 0px red;
	overflow: scroll;
}


#selecteur-gauche::-webkit-scrollbar  { display: none !important; }
#selecteur-gauche { -ms-overflow-style: none !important; scrollbar-width: none !important; }


/* SVG */

polygon { transition-duration: 0.6s; cursor: pointer; }
polygon.polyClick { opacity: 0.8; }

.cls-2 { fill: #00538B; opacity: 0.3; }
.cls-3 { fill: none; }

/* TABLEAU */

#selecteur-gauche div {
	position: relative;
	border-radius: 0px;
	display: table;
	width: calc(100% - 40px);
	background-color: var(--color-white);
	margin: 20px;
	padding: 2px 0;
	overflow: hidden;
	overflow: visible;
	box-shadow: inset 0 0 0 2px var(--color-gris-fonce);
}

#selecteur-gauche div:hover { cursor: pointer; }


#selecteur-gauche div ul.ligne1,
#selecteur-gauche div ul.ligne2,
#selecteur-gauche div ul.ligne3,
#selecteur-gauche div ul.ligne4,
#selecteur-gauche div ul.ligne4b,
#selecteur-gauche div ul.ligne5 {
	display: table;
	table-layout: fixed;
	width: calc(100% - 0px);
	margin: 0;
}



#selecteur-gauche div ul.ligne1 li,
#selecteur-gauche div ul.ligne2 li,
#selecteur-gauche div ul.ligne3 li,
#selecteur-gauche div ul.ligne4 li,
#selecteur-gauche div ul.ligne4b li,
#selecteur-gauche div ul.ligne5 li {
	display: table-cell;
	padding: 12px;
	text-align: center;
	vertical-align: middle;
	box-shadow: inset 0 0 0 0.5px var(--color-gris-fonce);
}

#selecteur-gauche div ul li p {
	font-family: "regular";
	font-size: 14px;
	line-height: 10px;
	text-transform: uppercase;
}

#selecteur-gauche div ul li.numLot p { font-family: "medium"; }

#selecteur-gauche div ul li i,
#selecteur-gauche div ul li sup {
	font-family: "regular";
	font-size: 8px;
	opacity: 0.7;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-style: normal;
}

#selecteur-gauche div.hide ul.ligne1,
#selecteur-gauche div.hide ul.ligne2,
#selecteur-gauche div.hide ul.ligne3,
#selecteur-gauche div.hide ul.ligne4,
#selecteur-gauche div.hide ul.ligne4b {
	border-bottom: 0px solid white;
}

li.disponible p { color: var(--color-selecteur-dispo); }
li.reservé p { color: var(--color-selecteur-reser) }
li.loué p { color: var(--color-selecteur-vendu); }

/* HIDE */

#selecteur-gauche div.hide.disponible::before,
#selecteur-gauche div.hide.reservé::before,
#selecteur-gauche div.hide.loué::before {
	content: "";
	position: absolute;
	left: calc(50% - 15px);
	top: calc(0% - 15px);
	width: 30px;
	height: 30px;
	border-radius: 0%;
	opacity: 0;
	transition-duration: 0.6s;
	background-image: url('../svg/picto-selecteur-open.svg');
	background-size: 20px;
	background-position: center;
	background-repeat: no-repeat;
}

#selecteur-gauche div.hide.disponible:hover::before,
#selecteur-gauche div.hide.reservé:hover::before,
#selecteur-gauche div.hide.loué:hover::before {
	top: calc(100% - 20px);
	opacity: 1;
}

#selecteur-gauche div.hide.reservé:hover::before,
#selecteur-gauche div.hide.loué:hover::before {
	display: none;
}

#selecteur-gauche div.hide.disponible:hover::before { background-color: var(--color-selecteur-dispo); }
#selecteur-gauche div.hide.reservé:hover::before { background-color: var(--color-selecteur-reser); }
#selecteur-gauche div.hide.loué:hover::before { background-color: var(--color-selecteur-vendu); }

#selecteur-gauche div.hide ul.ligne2,
#selecteur-gauche div.hide ul.ligne3,
#selecteur-gauche div.hide ul.ligne4,
#selecteur-gauche div.hide ul.ligne4b,
#selecteur-gauche div.hide ul.ligne5 {
	display: none;
}


#selecteur-gauche div.hide ul.ligne2,
#selecteur-gauche div.hide ul.ligne3,
#selecteur-gauche div.hide ul.ligne4,
#selecteur-gauche div.hide ul.ligne4b,
#selecteur-gauche div.hide ul.ligne5 {
	display: none;
}

/* SHOW */

#selecteur-gauche div.show ul.ligne2,
#selecteur-gauche div.show ul.ligne3,
#selecteur-gauche div.show ul.ligne4,
#selecteur-gauche div.show ul.ligne4b,
#selecteur-gauche div.show ul.ligne5 {
	display: table;
}

#selecteur-gauche div ul li a img { transform: rotate(0deg); transition-duration: 1s; }
#selecteur-gauche div ul li:hover a img { transform: rotate(360deg); }

/* FILTRES */

#bloc-filtres {
  display: block;
	position: fixed;
	height: 100%;
	width: 500px;
	z-index: 1000000;
	left: -100vw;
	transition-duration: 1s;
	background-color: white;
	padding: 0px 0vw 0 0vw;
}

#bloc-filtres.open {
	left: 0vw;
}

#bloc-filtres p.titre-filtres {
	display: block;
	text-align: center;
	font-size: 24px;
	line-height: 24px;
	padding: 15px 0px 25px 0px;
}

#bloc-filtres p.filtre-legende {
	display: block;
	font-family: 'regular', sans-serif;
	font-size: 16px;
	line-height: 20px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#bloc-filtres p.filtre-legende-small {
	display: block;
	position: relative;
	top: 0px;
	font-family: 'regular', sans-serif;
	font-size: 14px;
	line-height: 18px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#bloc-filtres .tableau-filtres {
	display: table;
	position: relative;
	width: 100%;
	table-layout: fixed;
	margin: 1vh 0;
}

#bloc-filtres .tableau-filtres ul.vertical {
	display: table-cell;
	position: relative;
}

#bloc-filtres .tableau-filtres ul.vertical li {
	display: block;
	position: relative;
	margin: 10px 20%;
	background-color: var(--color-white);
	vertical-align: middle;
	cursor: pointer;
}

#bloc-filtres .tableau-filtres ul.vertical li p {
	display: block;
	position: relative;
	padding: 12px 18px 10px 18px;
	text-transform: uppercase;
	font-family: 'regular', sans-serif;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 2px;
	text-align: center;
	color: var(--color-gris-clair);
	box-shadow: inset 0 0 0 2px var(--color-gris-clair);
	text-transform: uppercase;
}

#bloc-filtres .tableau-filtres ul.vertical li.active { box-shadow: inset 0 0 0 2px var(--color-gris-moyen); }
#bloc-filtres .tableau-filtres ul.vertical li.active p { color: var(--color-gris-moyen); }

#bloc-filtres .tableau-filtres ul.vertical li p sup {
	font-size: 50%;
	font-family: 'black', sans-serif;
}

#bloc-filtres .tableau-filtres ul.vertical li::after,
#bloc-filtres .tableau-filtres ul.horizontal li p::after,
#bloc-filtres .tableau-filtres ul.horizontal-final li p::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: 0%;
	width: 20px;
	height: 20px;
	box-shadow: inset 0 0 0 var(--border) var(--color-gris-moyen);
	border-radius: 50%;
	background-color: var(--color-white);
	transform: translateX(-50%) translateY(-50%) rotate(180deg);
	background-image: url('../svg/picto-etoile.svg');
	background-size: 70%;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition-duration: 0.6s;
}

#bloc-filtres .tableau-filtres ul.vertical li.active::after,
#bloc-filtres .tableau-filtres ul.horizontal li.active p::after,
#bloc-filtres .tableau-filtres ul.horizontal-final li.active p::after {
	opacity: 1;
	transform: translateX(50%) translateY(-50%) rotate(0deg);
}



#bloc-filtres .tableau-filtres ul.horizontal,
#bloc-filtres .tableau-filtres ul.horizontal-final {
	display: table;
	position: relative;
	width: 100%;
}

#bloc-filtres .tableau-filtres ul.horizontal li,
#bloc-filtres .tableau-filtres ul.horizontal-final li {
	position: relative;
	display: table-cell;
	vertical-align: middle;
}

#bloc-filtres .tableau-filtres ul.horizontal li:nth-child(1),
#bloc-filtres .tableau-filtres ul.horizontal-final li:nth-child(2) { width: calc(100% / 3); }
#bloc-filtres .tableau-filtres ul.horizontal li:nth-child(2),
#bloc-filtres .tableau-filtres ul.horizontal-final li:nth-child(1) { width: calc(2*(100% / 3)); }

#bloc-filtres .tableau-filtres ul.horizontal li p.bouton,
#bloc-filtres .tableau-filtres ul.horizontal-final li p.bouton {
	display: block;
	margin: 10px 20%;
	position: relative;
	padding: 14px 20px 10px 20px;
	text-transform: uppercase;
	font-family: 'regular', sans-serif;
	font-size: 16px;
	line-height: 16px;
	letter-spacing: 2px;
	text-align: center;
	box-shadow: inset 0 0 0 2px var(--color-gris-moyen);
	text-transform: uppercase;
	background-color: var(--color-white);
	cursor: pointer;
}

#bloc-filtres .tableau-filtres ul.horizontal li.bouton p { box-shadow: inset 0 0 0 2px var(--color-gris-clair); }
#bloc-filtres .tableau-filtres ul.horizontal li.bouton.active p { box-shadow: inset 0 0 0 2px var(--color-gris-moyen); }

#bloc-filtres .tableau-filtres ul.horizontal-final li p.bouton {
	margin: 10px 10%;
}

/* GALERIE */

#galerie-situation {
	position: fixed;
	top: -100vh;
	left: 0px;
	width: 100vw;
	height: 100vh;
	background-color: white;
	z-index: 1000000000;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition-duration: 0.6s;
}

#galerie-situation.active {
	top: 0px;
}

#galerie-situation .fermeture-pop {
	width: 50px;
	height: 50px;
	background-image: url('../svg/picto-menu-close.svg');
	position: absolute;
	right: 0px;
	top: 0px;
	margin: 20px 20px 0 0;
	background-color: rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	background-size: 30%;
	background-position: center;
	cursor: pointer;
	transition-duration: 1.2s;
}

#galerie-situation .fermeture-pop:hover {
	transform: rotate(360deg);
}

.hidePiece { display: none !important; }
.hideEtage { display: none !important; }
.hideOrien { display: none !important; }
.hideRange { display: none !important; }
.hideDispo { display: none !important; }