/* BASE */
html { margin: 0px; overflow-x: hidden; }
body { margin: 0px; overflow: hidden; background-color: var(--color-projet-corpo); }

html::-webkit-scrollbar, body::-webkit-scrollbar  { display: none !important; }
html, body { -ms-overflow-style: none !important; scrollbar-width: none !important; }

/* MOBIL */
.mobilSupr { display: default !important; }
.justMobil { display: none !important; }
.mobilSuprTable { display: table !important; }
.justMobilTable { display: none !important; }

/* P */

p {
  font-family: 'SansRegular', sans-serif;
  color: var(--color-gris-fonce);
}

sup {
  font-size: 60%;
  line-height: 0px;
}

/* MENU PRINCIPAL */

#menu-principal {
  position: relative;
  width: 94%;
  margin: 0 auto;
}

#menu-principal ul {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin: 5vh 0 2vh 0;
}

#menu-principal ul li {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  padding: 0 4vw;
}

#menu-principal ul li:nth-child(1) { width: 10%; border-right: 1px solid var(--color-projet-tonique); }
#menu-principal ul li:nth-child(2) { width: 30%; }
#menu-principal ul li:nth-child(3) { width: 10%; border-right: 1px solid var(--color-projet-tonique); border-left: 1px solid var(--color-projet-tonique); }
#menu-principal ul li:nth-child(4) { width: 50%; border-left: 1px solid var(--color-projet-tonique);}

#menu-principal ul li p,
#menu-principal ul li p img {
  display: inline-block;
  vertical-align: middle;
}

#menu-principal ul li p img {
  width: 100%;
}

#menu-principal ul li h1 {
  display: inline-block;
  vertical-align: middle;
  font-family: 'Serif';
  color: var(--color-projet-tonique);
  font-size: 2.8vw;
  line-height: 3.0vw;
  letter-spacing: -0.05vw;
}

#menu-principal ul li p.sous-titre {
  font-family: 'SansMedium';
  color: var(--color-projet-tonique);
  font-size: 0.6vw;
  line-height: 1vw;
  letter-spacing: 0.1vw;
  text-transform: uppercase;
}

#menu-principal ul li.bouton-retour,
#menu-principal ul li.bouton-contact { cursor: pointer; }

#menu-principal ul li.bouton-retour p img,
#menu-principal ul li.bouton-contact p img {
  position: absolute;
  top: 0%;
  left: 50%;
  width: auto;
  height: 55%;
  transform: translate(-50%, 0%);
  transition-duration: 0.4s;
}

#menu-principal ul li.bouton-retour p span,
#menu-principal ul li.bouton-contact p span {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  font-family: 'SansMedium';
  color: var(--color-projet-tonique);
  font-size: 0.6vw;
  line-height: 1vw;
  letter-spacing: 0.1vw;
  text-transform: uppercase;
  transition-duration: 0.4s;
}

#menu-principal ul li.bouton-retour:hover p img { transform: translate(-50%, -10%); }
#menu-principal ul li.bouton-retour:hover p span { transform: translate(-50%, 0%); }

#menu-principal ul li.bouton-contact:hover p img { transform: translate(-50%, -10%); }
#menu-principal ul li.bouton-contact:hover p span { transform: translate(-50%, 0%); }

/* SELECTEUR */

#selecteur {
  display: flex;
  width: 100vw;
  height: 100vh;
}

#selecteur-gauche {
  width: calc( 2 * ( 100vw / 3 ) );
  overflow: scroll;
}

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

#selecteur-droite {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#image-haut, #image-bas {
  flex: 1;
  position: relative;
  background-color: var(--color-projet-corpo);
  overflow: hidden;
}

#image-haut { margin-bottom: 10px; }
#image-bas { margin-top: 10px; }

/* FILTRES */

#zone-filtres {
  position: relative;
  width: 94%;
  margin: 0 auto;
}

#zone-filtres ul {
  display: table;
  width: 100%;
}

#zone-filtres ul li {
  display: table-cell;
  vertical-align: bottom;
}

#zone-filtres table.filtre {
  float: right;
}

#zone-filtres table.filtre tr td {
  text-align: center;
}

#zone-filtres table.filtre tr td p {
  display: inline-block;
  vertical-align: middle;
  padding: 0.5vw 0.8vw;
  font-family: 'SansBold', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05vw;
  font-size: 80%;
  transition-duration: 0.4s;
}

#zone-filtres table.filtre tr:nth-child(1) td p {
  display: block;
  margin: 0 0.2vw;
  border-bottom: 1px solid var(--color-gris-fonce);
}

#zone-filtres table.filtre tr:nth-child(1) td p {
  font-size: 60%;
  letter-spacing: 0.1vw;
}

#zone-filtres table.filtre tr:nth-child(2) td p {
  margin: 0.4vw 0.2vw;
  box-shadow: inset 0 0 0 1px var(--color-gris-fonce);
  opacity: 0.5;
}

#zone-filtres table.filtre tr:nth-child(2) td.filtre p { cursor: pointer; }

#zone-filtres table.filtre tr:nth-child(2) td.active p {
  box-shadow: inset 0 0 0 1px var(--color-gris-fonce);
  opacity: 1;
  background-color:  var(--color-gris-fonce);
  color: var(--color-projet-corpo);
}

#zone-filtres table.filtre tr:nth-child(2) td.dispo.active p { background-color: var(--color-selecteur-dispo); box-shadow: inset 0 0 0 1px var(--color-selecteur-dispo); }
#zone-filtres table.filtre tr:nth-child(2) td.reser.active p { background-color: var(--color-selecteur-reser); box-shadow: inset 0 0 0 1px var(--color-selecteur-reser); }
#zone-filtres table.filtre tr:nth-child(2) td.vendu.active p { background-color: var(--color-selecteur-vendu); box-shadow: inset 0 0 0 1px var(--color-selecteur-vendu); }

/* TABLE COMPTE */

table.compte tr td {
  position: relative;
  vertical-align: middle;
}

table.compte tr td p {
  display: inline-block;
  vertical-align: middle;
  font-family: 'SansMedium', sans-serif;
  margin: 0.2vw 0.4vw;
}

table.compte tr td:nth-child(1) {
  padding-right: 10px;
}

table.compte tr td:nth-child(2) p {
  font-family: 'SansRegular', sans-serif;
  font-size: 2.4vw;
}

table.compte tr td:nth-child(3) p {
  font-size: 0.9vw;
  line-height: 1.1vw;
  text-transform: uppercase;
}

table.compte ul.graphique-disponibilite {
  position: relative;
  height: 2vw;
}

table.compte ul.graphique-disponibilite li {
  position: relative;
  display: table-cell;
  vertical-align: bottom;
  height: 100%;
}

table.compte ul.graphique-disponibilite li span {
  display: inline-block;
  vertical-align: bottom;
  width: 8px;
  height: 100%;
  margin: 0 2px;
}

table.compte ul.graphique-disponibilite li.graphique-dispo span { background-color: var(--color-selecteur-dispo); }
table.compte ul.graphique-disponibilite li.graphique-reser span { background-color: var(--color-selecteur-reser); }
table.compte ul.graphique-disponibilite li.graphique-vendu span { background-color: var(--color-selecteur-vendu); }

/* TABELAU DES LOTS */

#tableau-lot {
  position: relative;
  width: 94%;
  margin: 1.4vw auto;
}

#tableau-lot a {
  text-decoration: none;
}

ul.lot {
  display: table;
  width: 100%;
  table-layout: fixed;
  background-color: white;
  margin: 0 0 5px 0;
  transition-duration: 0.2s;
  cursor: pointer;
}

ul.lot:hover {
  margin: 10px 0px 10px 0px;
}

ul.lot.click {
  margin: 20px 0px 20px 0px;
  transform: translate(3% , 0);
}

ul.lot li {
  display: table-cell;
  padding: 0.6vw;
  border-right: 1px solid var(--color-projet-corpo);
}

ul.lot li.ligne {
  display: none;
  caption-side: bottom;
  padding: 0.6vw;
  border-right: 1px solid var(--color-projet-corpo);
  background-color: var(--color-gris-fonce);
}

ul.lot li.ligne p {
  color: var(--color-projet-corpo);
  font-size: 0.7vw;
  text-transform: uppercase;
}

ul.lot.click li.ligne {
  display: table-caption;
}



ul.lot li p {
  display: block;
  font-size: 1vw;
  line-height: 1.2vw;
  font-family: 'SansMedium', sans-serif;
}

ul.lot li p span {
  display: block;
  font-family: 'SansRegular', sans-serif;
  font-size: 0.4vw;
  line-height: 0.9vw;
  letter-spacing: 0.02vw;
  text-transform: uppercase;
}

ul.lot li:nth-child(3) { width: 5%; }
ul.lot li:nth-child(4) { width: 5%; }

ul.lot li:nth-child(12):hover { background-color: rgba(0,0,0,0.1);  transition-duration: 0.4s; }

ul.lot.disponible { opacity: 1; }
ul.lot.réservé { opacity: 0.6; }
ul.lot.loué { opacity: 0.6; }

ul.lot.disponible li:nth-child(8) { background-color: var(--color-selecteur-dispo); }
ul.lot.réservé li:nth-child(8) { background-color: var(--color-selecteur-reser); }
ul.lot.loué li:nth-child(8) { background-color: var(--color-selecteur-vendu); }

ul.lot.hideEtage { display: none; }
ul.lot.hidePiece { display: none; }
ul.lot.hideBat { display: none; }
ul.lot.hideOri { display: none; }
ul.lot.hideDispo { display: none; }


/* SELECTEUR GRAPHIQUE */

#image-haut,
#image-bas {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#image-haut img,
#image-bas img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}

#image-haut svg,
#image-bas svg {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  z-index: 2;
}

#image-haut svg { bottom: 0px; right: 0px; }
#image-bas svg { top: 0px; right: 0px; }

.cls-1 { opacity: 0; }
.cls-2 { opacity: 0; transition-duration: 0.2s; }
.cls-2.polyHover, .cls-2:hover { opacity: 0.5; cursor: pointer; }
.cls-2.polyClick { opacity: 0.75; }

polygon.polyDisponible { fill: var(--color-selecteur-dispo); }
polygon.polyReserve { fill: var(--color-selecteur-reser); }
polygon.polyVendu { fill: var(--color-selecteur-vendu); }