html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body.selecteur {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#selecteur {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#selecteur-complet {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

#selecteur-gauche {
  flex: 0 0 30%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 2vw;
  min-height: 0;
}

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

#selecteur-droite {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* SELECTEUR ILLUSTRATION */

#selecteur-visuel-illustration {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

#selecteur-visuel-fixe-appt {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

#selecteur-visuel-fixe-appt svg {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* SVG */

.cls-1 { fill: none; }
.cls-2, .cls-3 { opacity: .3; }
.cls-2, .cls-4 { fill: #6a6a6a; }
.cls-5 { fill: #939393; }
.cls-6, .cls-7, .cls-8 { fill: #d5db75; }
.cls-9 { fill: #dbd8d1; }
.cls-10 { fill: #1c1c1c; }
.cls-11 { fill: #f4f4f4; }
.cls-12 { fill: #979797; }
.cls-13 { fill: #5d7782; }
.cls-14 { fill: #898477; }
.cls-15 { fill: #405159; }
.cls-16 { isolation: isolate; }
.cls-17 { fill: #e8e6e3; }
.cls-18 { fill: #351dcc; } /* bleu face */
.cls-19 { fill: #303030; }
.cls-20 { fill: #afbc75; }
.cls-21 { fill: #321bc0; } /* bleu haut */
.cls-22 { fill: #211280; } /* bleu cote */
.cls-23 { fill: #b25b5b; }
.cls-24 { fill: #d1ccbf; }
.cls-26 { fill: #a39f96; }
.cls-27 { fill: #666; }
.cls-28 { fill: #bcbcbc; }
.cls-7, .cls-30 { opacity: .2; }
.cls-8, .cls-31 { opacity: .5; }
.cls-34 { opacity: .7; }
.cls-35 { fill: #c3d3db; }
.cls-36 { fill: #d5d5d5; }
.cls-39 { fill: #8da276; }
.cls-40 { fill: #ffdd92; } /* SELECTION */
.cls-42 { fill: #827e73; }
.cls-43 { fill: #989898; }
.cls-44 { fill: #d1d1d1; }
.cls-45 { fill: #e8e8e8; }
.cls-46 { fill: #2e393d; }
.cls-60 { fill: grey; }

/* TEINTES LOT */

g.lot.polyDisponible polygon.cls-18, g.lot.polyDisponible path.cls-18 { fill : rgba(197,228,194,1); }
g.lot.polyDisponible polygon.cls-21, g.lot.polyDisponible path.cls-21 { fill : rgba(174,202,170,1); }
g.lot.polyDisponible polygon.cls-22, g.lot.polyDisponible path.cls-22 { fill : rgba(147,173,145,1); }

g.lot.polyReserve polygon.cls-18, g.lot.polyReserve path.cls-18 { fill : rgba(252,217,177,1); }
g.lot.polyReserve polygon.cls-21, g.lot.polyReserve path.cls-21 { fill : rgba(226,197,168,1) ; }
g.lot.polyReserve polygon.cls-22, g.lot.polyReserve path.cls-22 { fill : rgba(196,164,130,1); }

g.lot.polyVendu polygon.cls-18, g.lot.polyVendu path.cls-18 { fill : rgba(242,155,153,1); }
g.lot.polyVendu polygon.cls-21, g.lot.polyVendu path.cls-21 { fill : rgba(216,132,132,1); }
g.lot.polyVendu polygon.cls-22, g.lot.polyVendu path.cls-22 { fill : rgba(191,107,107,1); }

g.lot { transition-duration: 0.4s; cursor: pointer; opacity: 1; }

g.lot.polyDisponible:hover, g.lot.polyDisponible.polyClic,
g.lot.polyReserve:hover, g.lot.polyReserve.polyClic,
g.lot.polyVendu:hover, g.lot.polyVendu.polyClic {
  transform: translate(0 , -14px);
  opacity: 1;
}

g.lot.polyDisponible.polyClic polygon.cls-18, g.lot.polyDisponible.polyClic path.cls-18 { fill : rgba(137,206,156,1); }
g.lot.polyDisponible.polyClic polygon.cls-21, g.lot.polyDisponible.polyClic path.cls-21 { fill : rgba(117,175,131,1); }
g.lot.polyDisponible.polyClic polygon.cls-22, g.lot.polyDisponible.polyClic path.cls-22 { fill : rgba(87,130,97,1); }

g.lot.polyDisponible:hover polygon.cls-18, g.lot.polyDisponible:hover path.cls-18 { fill : rgba(137,206,156,1); }
g.lot.polyDisponible:hover polygon.cls-21, g.lot.polyDisponible:hover path.cls-21 { fill : rgba(117,175,131,1); }
g.lot.polyDisponible:hover polygon.cls-22, g.lot.polyDisponible:hover path.cls-22 { fill : rgba(87,130,97,1); }

g.lot.polyReserve.polyClic polygon.cls-18, g.lot.polyReserve.polyClic path.cls-18 { fill : rgba(252,205,142,1); }
g.lot.polyReserve.polyClic polygon.cls-21, g.lot.polyReserve.polyClic path.cls-21 { fill : rgba(209,170,124,1) ; }
g.lot.polyReserve.polyClic polygon.cls-22, g.lot.polyReserve.polyClic path.cls-22 { fill : rgba(163,131,93,1); }

g.lot.polyReserve:hover polygon.cls-18, g.lot.polyReserve:hover path.cls-18 { fill : rgba(252,205,142,1); }
g.lot.polyReserve:hover polygon.cls-21, g.lot.polyReserve:hover path.cls-21 { fill : rgba(209,170,124,1); }
g.lot.polyReserve:hover polygon.cls-22, g.lot.polyReserve:hover path.cls-22 { fill : rgba(163,131,93,1); }

g.lot.polyVendu.polyClic polygon.cls-18, g.lot.polyVendu.polyClic path.cls-18 { fill : rgba(237,106,97,1); }
g.lot.polyVendu.polyClic polygon.cls-21, g.lot.polyVendu.polyClic path.cls-21 { fill : rgba(207,90,87,1); }
g.lot.polyVendu.polyClic polygon.cls-22, g.lot.polyVendu.polyClic path.cls-22 { fill : rgba(169,73,71,1); }

g.lot.polyVendu:hover polygon.cls-18, g.lot.polyVendu:hover path.cls-18 { fill : rgba(237,106,97,1); }
g.lot.polyVendu:hover polygon.cls-21, g.lot.polyVendu:hover path.cls-21 { fill : rgba(207,90,87,1); }
g.lot.polyVendu:hover polygon.cls-22, g.lot.polyVendu:hover path.cls-22 { fill : rgba(169,73,71,1); }

g.lot.hidePiece { display: none; }
g.lot.hideBatim { display: none; }
g.lot.hideEtage { display: none; }
g.lot.hideDispo { display: none; }

/* MASQUE */
g.masque .cls-40 { fill: #000000; opacity: 0; }
g.masque:hover .cls-40 { fill: #000000; opacity: 0.2; }

/* ETAGE */
g.etage { transform: translate(0px,0px); transition-duration: 1s;}
g.etage.etageSelect { transform: translate(0px,0px); }
g.etage.etagePlus { transform: translate(0px,-250px); }
g.etage.etageMoins { transform: translate(0px,0px); }

/* MASQUE LES ELEMENTS DE DECORATION */
.etageSelect g.decosvg,
.etageSelect g.masque { display: none; }

/* TABLEAU */

:root {
  --border-radius: 14px;
}

table.lot {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin: 0.5vh 0;
  transition-duration: 0.2s;
  cursor: pointer;
  border-radius: var(--border-radius);
  overflow: hidden;
  background-color: var(--color-gris-light);
}

table.lot:hover {
  margin: 1vh 0;
}

table.lot tr:nth-child(2), table.lot tr:nth-child(3), table.lot tr:nth-child(4) { display: none; }
table.lot.open tr:nth-child(2), table.lot.open tr:nth-child(3), table.lot.open tr:nth-child(4) { display: table-row; }

table.lot.open {
  margin: 1.5vh 0;
  box-shadow: 0 0 0 6px var(--color-gris-light);
}

table.lot tr {
  transition-duration: 0.4s;
}

table.lot tr td {
  border: 0px solid white;
  padding: 0.8vh 0.4vh 0.5vh 0.4vh;
}

table.lot tr {
  border-top: 2px solid white;
  border-bottom: 2px solid white;
}

table.lot tr:first-of-type {
  border-top: 0px solid white;
  border-bottom: 2px solid white;
}

table.lot tr:last-of-type {
  border-top: 2px solid white;
  border-bottom: 0px solid white;
}

table.lot tr td {
  border-left: 2px solid white;
  border-right: 2px solid white;
}

table.lot tr td:first-of-type {
  border-left: 0px solid white;
  border-right: 2px solid white;
}

table.lot tr td:last-of-type {
  border-left: 2px solid white;
  border-right: 0px solid white;
}

table.lot tr td p {
  display: inline-block;
  padding: 0.2vh;
  text-transform: uppercase;
  color: var(--color-gris-fonce);
  font-family: 'projetSansRegular', sans-serif;
  font-size: 0.85vw;
  line-height: 1.2vw;
  letter-spacing: 0.03vw;
  width: 100%;
  text-align: center;
}

table.lot tr td p i {
  display: block;
  font-size: 0.5vw;
  line-height: 0.8vw;
  color: var(--color-gris-moyen);
  letter-spacing: 0.05vw;
  font-family: 'projetSansBold', sans-serif;
}

table.lot tr td p sup { font-size: 60%; }

table.lot tr:first-of-type td:first-of-type p { font-family: 'projetSansBold', sans-serif; }

table.lot.disponible tr:first-of-type td:last-of-type p { color: var(--color-selecteur-dispo); }
table.lot.réservé tr:first-of-type td:last-of-type p { color: var(--color-selecteur-reser); }
table.lot.loué tr:first-of-type td:last-of-type p { color: var(--color-selecteur-vendu); }

table.lot.réservé.open tr:last-of-type { display: none; }
table.lot.loué.open tr:last-of-type { display: none; }

table.lot.hidePiece { display: none; }
table.lot.hideEtage { display: none; }
table.lot.hideBatiment { display: none; }
table.lot.hideType { display: none; }

g.lot.hidePiece { display: none; }
g.lot.hideEtage { display: none; }
g.lot.hideType { display: none; }

table.lot tr:last-child td:first-child, table.lot tr:last-child td:last-child {
  background-color: var(--color-gris-light);
  transition-duration: 0.6s;
}

table.lot tr:last-child td:first-child:hover, table.lot tr:last-child td:last-child:hover {
  background-color: var(--color-gris-clair);
}

/* BOUTON RETOUR */

a#retour-site {
  display: block;
  background-color: var(--color-projet-tonique);
  padding: 0.5vw 2vw 1vw 2vw;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  text-align: center;
  transition-duration: 0.4s;
  font-family: 'projetSansMedium', sans-serif;
  color: var(--color-white);
  font-size: 1vw;
  line-height: 1.4vw;
}

a#retour-site img {
  display: inline-block;
  vertical-align: middle;
  width: 1.3vw;
  margin-right: 1.5vw;
  padding-right: 1.5vw;
  border-right: 2px solid var(--color-white);
}

a#retour-site:hover {
  padding: 1.2vw 2vw;
}

/* MENU FILTRES */

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

#menu-filtres li {
  display: table-cell;
  text-align: center;
  border: 6px solid var(--color-gris-fonce);
  vertical-align: middle;
  cursor: pointer;
}

#menu-filtres li.separation { width: 1vw; border: none; }

#menu-filtres li p {
  display: inline-block;
  text-transform: uppercase;
  font-family: 'SansRegular', sans-serif;
  color: var(--color-gris-fonce);
  font-size: 1vw;
  line-height: 1.2vw;
  letter-spacing: 0.1vw;
  transition-duration: 0.4s;
  vertical-align: middle;
}

#menu-filtres li:last-of-type {
  transition-duration: 0.4s;
  cursor: pointer;
  background-color: white;
  border: 6px solid var(--color-selecteur-dispo);
  background-color: var(--color-selecteur-dispo);
}

#menu-filtres li:last-of-type:hover {
  border: 6px solid var(--color-gris-fonce);
  background-color: var(--color-gris-fonce);
}

#menu-filtres li:last-of-type p {
  padding: 0 1vw;
}

#menu-filtres li:last-of-type p img {
  display: inline-block;
  width: 1.6vw;
  vertical-align: middle;
}

#menu-filtres li.select-type p {
  display: table;
  width: 100%;
  padding: 0vw;
}

#menu-filtres li.select-type p span {
  display: table-cell;
  transition-duration: 0.4s;
  padding: 1vw 0.2vw;
  vertical-align: middle;
}

#menu-filtres li.select-type p span.active {
  background-color: var(--color-gris-fonce);
  color: white;
}

#menu-filtres li.select-type p span i {
  display: block;
  font-size: 60%;
  line-height: 130%;
  color: var(--color-selecteur-reser);
}

/* FILTRES */

#bloc-filtres {
  display: none;
  width: 100%;
  margin: 1vh auto;
} #bloc-filtres.active { display: block; }

p.titre-filtres {
  display: block;
  text-align: center;
  font-family: 'projetSansBold', sans-serif;
  text-transform: uppercase;
  font-size: 0.8vw;
  line-height: 1.4vw;
  letter-spacing: 0.1vw;
  margin: 1vh 0 0.4vh 0;
  color: var(--color-gris-moyen);
} p.titre-filtres.hide {
  display: none;
}

#bloc-filtres ul {
  display: flex;
  flex-direction: row;
}

#bloc-filtres ul li {
  flex: 1;
  text-align: center;
  padding: 0px;
}

#bloc-filtres ul li.filtre { cursor: pointer; }

#bloc-filtres ul li p {
  display: block;
  margin: 4px;
  padding: 18px 0;
  box-shadow: inset 0 0 0 2px var(--color-gris-clair);
  font-family: 'projetSansMedium', sans-serif;
  font-size: 0.8vw;
  line-height: 0.8vw;
  letter-spacing: 0.1vw;
  text-transform: uppercase;
  color: var(--color-gris-clair);
  opacity: 0.5;
  border-radius: var(--border-radius);
  overflow: hidden;
}

#bloc-filtres ul li p sup {
  font-size: 0.5vw;
}

#bloc-filtres ul li.active p {
  background-color: var(--color-gris-fonce);
  color: white;
  box-shadow: inset 0 0 0 2px var(--color-gris-fonce);
  opacity: 1;
}