html { 
	overflow-x: visible;
}
body {
	position: relative;
	height: 100vw;
	width: 100vw;
	min-width: 600px;
}

/* ///////////// */
/* PARTIE GAUCHE */
/* ///////////// */

#left { 
	position: absolute;
	top: 0px; 
	left: 0px; 
	width: 100vw;
	height: auto; 
	overflow: hidden;
	border-right: 0px solid rgba(0,0,0,0.8);
	z-index: 10;
}

/* ///////////// */
/* PARTIE CENTRE */
/* ///////////// */

#centre { 
	display: none;
	position: absolute; 
	top: 1000px; 
	width: 100vw;
	left: 0px;
	height: 550px; 
	overflow: hidden; 
}


#centre-etape-1 { background-image: url('../svg/fond-etape-1.svg'); }
#centre-etape-2 { background-image: url('../svg/fond-etape-2.svg'); }

#centre-etape-1, #centre-etape-2 {
	position: absolute;
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

#centre-selecteur-menu-etage {
	position: absolute;
	width: 100vh;
	bottom: 0px;
	left: 100%;
	table-layout: fixed;
	transform: rotate(-90deg);
	transform-origin: left bottom;
}

#centre-selecteur-menu-etage { display: none; }
#centre-selecteur-menu-etage.active { display: none !important; }


#centre-selecteur-menu-etage li { 
	display: table-cell; 
	text-align: center;
	padding: 20px 0 26px 0;
	cursor: pointer;
	transition-duration: 0.4s;
}

#centre-selecteur-menu-etage li p {
	font-family: 'light';
	letter-spacing: 1px;
	font-size: 10px;
	line-height: 16px;
	color: rgba(0, 0, 0, 0.8);
	text-transform: uppercase;
}

#centre-selecteur-menu-etage li { box-shadow: inset 0px -8px 0px 0px rgba(0,0,0,0.3); }
#centre-selecteur-menu-etage li:hover { box-shadow: inset 0px -8px 0px 0px rgba(0,0,0,0.7); }
#centre-selecteur-menu-etage li.active { box-shadow: inset 0px -8px 0px 0px rgba(0,0,0,0.7); }

#centre-top {
	display: none;
}

/* /////////// */
/* ZONE ETAPES */
/* /////////// */

#zone-switch {
	position: relative;
	display: table;
	width: 90%;
	margin: 20px 5% 10px 5%;
}

#selecteur-zone-switch,  #selecteur-zone-switch-titre { 
	display: inline-table; width: 100%;
}

#selecteur-zone-switch li {
	display: table-cell;
	/*width: 50%;*/
	transition-duration: 0.2s;
	cursor: pointer;
	padding: 20px 10px 5px 10px;
}

#selecteur-zone-switch-titre li {
	display: table-cell;
	width: calc(100% - 20px);
	transition-duration: 0.2s;
	padding: 20px 10px 15px 10px;
}

#selecteur-zone-switch li p, #selecteur-zone-switch-titre li p {
	font-family: 'light';
	text-transform: uppercase;
	font-size: 10px;
	line-height: 14px;
	letter-spacing: 1px;
}

#selecteur-zone-switch-titre li p, #selecteur-zone-switch-titre2 li p {
	padding: 15px 0;
	border-top: 1px solid rgba(0, 0, 0, 0.8);
	border-bottom: 1px solid rgba(0, 0, 0, 0.8);
}

#selecteur-zone-switch li p { border: 1px solid rgba(0,0,0,1); padding: 5px 10px; color: black; opacity: 1; transition-duration: 0.4s; }
#selecteur-zone-switch li:hover p { border: 1px solid rgba(0,0,0,1); padding: 5px 10px; color: black; opacity: 0.5; }
/*
#selecteur-zone-switch li { box-shadow: inset -10px 0px 0px 0px white, inset 10px 0px 0px 0px white, inset 0px 8px 0px 0px rgba(0,0,0,0.3); }
#selecteur-zone-switch li.active { box-shadow: inset -10px 0px 0px 0px white, inset 10px 0px 0px 0px white, inset 0px 8px 0px 0px rgba(0,0,0,0.75); }
*/

.forEtape1 { display: none !important; }
.forEtape1.active { display: block !important; }
.forEtape2 { display: none !important; }
.forEtape2.active { display: block !important; }

/* //////////// */
/* ZONE FILTRES */
/* //////////// */

#zone-filtre-etape1, #zone-filtre-etape2 {
	position: relative;
	display: table;
	width: 90%;
	margin: 20px 5% 10px 5%;
}

#selecteur-menu-etage, 
#selecteur-menu-dispo, 
#selecteur-menu-division,
#selecteur-menu-division-option {
	display: inline-table; width: 100%;
}


#selecteur-menu-etage li,
#selecteur-menu-dispo li,
#selecteur-menu-division li,
#selecteur-menu-division-option li {
	display: table-cell;
	width: 20%;
	transition-duration: 0.2s;
	cursor: pointer;
}

#selecteur-menu-etage li { padding: 15px 10px; }
#selecteur-menu-dispo li, #selecteur-menu-division li, #selecteur-menu-division-option li { padding: 20px 10px 15px 10px; }

#selecteur-menu-etage li p, #selecteur-menu-dispo li p, #selecteur-menu-division li p, #selecteur-menu-division-option li p {
	font-family: 'light';
	text-transform: uppercase;
	font-size: 10px;
	line-height: 14px;
	letter-spacing: 1px;
}

#zone-filtre-etape1 ul li p, #zone-filtre-etape2 ul li p { color: rgba(0, 0, 0, 0.4); transition-duration: 0.4s; }
#selecteur-menu-division-option li p { color: rgba(0, 0, 0, 0.8) !important; }
#zone-filtre-etape1 ul li.active p, #zone-filtre-etape2 ul li.active p { color: rgba(0, 0, 0, 0.8); }

#selecteur-menu-etage li { box-shadow: inset -10px 0px 0px 0px white, inset 10px 0px 0px 0px white, inset 0px 4px 0px 0px rgba(0,0,0,0.3); }
#selecteur-menu-etage li.active { box-shadow: inset -10px 0px 0px 0px white, inset 10px 0px 0px 0px white, inset 0px 4px 0px 0px rgba(0,0,0,0.75); }

#selecteur-menu-dispo li { box-shadow: inset -10px 0px 0px 0px white, inset 10px 0px 0px 0px white, inset 0px 8px 0px 0px rgba(0,0,0,0.3); }
#selecteur-menu-dispo li.dispo-disp.active { box-shadow: inset -10px 0px 0px 0px white, inset 10px 0px 0px 0px white, inset 0px 8px 0px 0px rgba(151,190,161,1); }
#selecteur-menu-dispo li.dispo-loue.active { box-shadow: inset -10px 0px 0px 0px white, inset 10px 0px 0px 0px white, inset 0px 8px 0px 0px rgba(238,173,148,1); }

#selecteur-menu-division li { box-shadow: inset -10px 0px 0px 0px white, inset 10px 0px 0px 0px white, inset 0px 8px 0px 0px rgba(0,0,0,0.3); }
#selecteur-menu-division li.active { box-shadow: inset -10px 0px 0px 0px white, inset 10px 0px 0px 0px white, inset 0px 8px 0px 0px rgba(0,0,0,0.8); }

.hideEtage0 { display: none; }
.hideEtage1 { display: none; }
.hideEtage2 { display: none; }
.hideEtage3 { display: none; }
.hideEtage4 { display: none; }

.hideLoue { display: none; }
.hideDisponible { display: none; }

/* ////////// */
/* LISTE LOTS */
/* ////////// */

#liste-lots {
	position: relative;
	display: table;
	width: 90%;
	margin: 20px 5% 10px 5%;
}

#liste-lots div.lot {
	border-top: 1px solid rgba(0, 0, 0, 0.8);
	border-bottom: 0px solid rgba(0, 0, 0, 0.8);
	margin: 0 10px;
	cursor: pointer;
	transition-duration: 0.4s;
}

#liste-lots div.lot:hover, #liste-lots div.lot.active { 
	border-top: 5px solid rgba(0, 0, 0, 0.8);
	border-bottom: 4px solid rgba(0, 0, 0, 0.8); 
}

#liste-lots ul { display: inline-table; width: 100%; padding: 15px 0px; }
#liste-lots ul li { display: table-cell; vertical-align: middle; }

#liste-lots div.lot ul li p {
	font-family: 'regular';
	text-transform: uppercase;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 1px;
}

#liste-lots div.lot ul li p span {
	font-family: 'light';
	font-size: 8px;
	color: rgba(0, 0, 0, 0.6);
}


#liste-lots div.lot ul li.case-lot { width: 20%; }
#liste-lots div.lot ul li.case-etage { width: 25%; }
#liste-lots div.lot ul li.case-surface { width: 35%; }
#liste-lots div.lot ul li.case-disponibilite { width: 30%; filter: grayscale(0); transition-duration: 0.4s; }
#liste-lots div.lot ul li.case-disponibilite:hover { width: 30%; filter: grayscale(100); }


#liste-lots div.lot ul li.case-disponibilite p { text-align: center; border: 1px solid black; padding: 5px 10px; }
#liste-lots div.lot ul li.case-disponibilite a { color: unset; text-decoration: none; }

#liste-lots div.lot.loué ul li.case-disponibilite { color: rgba(238,173,148,1); width: 100%; }
#liste-lots div.lot.configurer ul li.case-disponibilite { color: rgba(151,190,161,1); width: 100%;}
#liste-lots div.lot.loué ul li.case-disponibilite p { border: 1px solid rgba(238,173,148,1); display: inline-block; text-align: center;
width: calc(100% - 20px); }
#liste-lots div.lot.configurer ul li.case-disponibilite p { border: 1px solid rgba(151,190,161,1); display: inline-block; text-align: center;
width: calc(100% - 20px); }

#liste-lots div.lot ul li.case-lot p { font-size: 18px; }


#liste-lots div.lot ul.ligne1 { display: none; }
#liste-lots div.lot.active ul.ligne1 { display: inline-table; }


/* ///////////// */
/* LISTE DVISION */
/* ///////////// */

#liste-decoupe {
	position: relative;
	display: table;
	width: 90%;
	margin: 20px 5% 10px 5%;
}

#liste-decoupe div.lot {
	border-top: 1px solid rgba(0, 0, 0, 0.8);
	border-bottom: 0px solid rgba(0, 0, 0, 0.8);
	margin: 0 10px;
	cursor: pointer;
	transition-duration: 0.4s;
}

#liste-decoupe div.hide {
	display: none !important;
}

#liste-decoupe div.lot:hover, #liste-decoupe div.lot.active { border-top: 5px solid rgba(0, 0, 0, 0.8);
	border-bottom: 4px solid rgba(0, 0, 0, 0.8); }

#liste-decoupe ul { display: inline-table; width: 100%; padding: 15px 0px; }
#liste-decoupe ul.fixe { border-bottom: 0px solid rgba(0, 0, 0, 0.3); }
#liste-decoupe ul.ligne1 { border-bottom: 1px solid rgba(0, 0, 0, 0.3); }
#liste-decoupe ul li { display: table-cell; vertical-align: middle; }


#liste-decoupe div.lot ul li p {
	font-family: 'regular';
	text-transform: uppercase;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 1px;
}

#liste-decoupe div.lot ul li p span {
	font-family: 'light';
	font-size: 9px;
	color: rgba(0, 0, 0, 0.7);
}

#liste-decoupe div.lot ul li.case-lot p { font-size: 18px; }

#liste-decoupe div.lot ul.ligne1 { display: none; }
#liste-decoupe div.lot ul.ligne2 { display: none; }
#liste-decoupe div.lot.active ul.ligne1, #liste-decoupe div.lot.active ul.ligne2 { display: inline-table; }

#liste-decoupe div.lot.active ul.fixe { border-bottom: 1px solid rgba(0, 0, 0, 0.3); }

#liste-decoupe div.lot ul.fixe li:nth-child(4) { width: 35% ;}