/* AJUSTEMENT PAGE SELECTEUR */

body.selecteur {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* MENU */

ul#menu-selecteur {
  position: relative;
  display: table;
  width: 100%;
  table-layout: fixed;
}

ul#menu-selecteur li {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 20px 0px;
}

ul#menu-selecteur li:nth-child(2) {
  width: 25%;
  cursor: pointer;
  transition-duration: 0.4s;
}

ul#menu-selecteur li:nth-child(2):hover {
  background-color: var(--color-gris-light);
}

ul#menu-selecteur li:nth-child(2) p {
  font-size: 0.6vw;
  text-transform: uppercase;
  line-height: 130%;
  padding: 0px;
  margin: 0px;
}

ul#menu-selecteur li:nth-child(2) p img {
  width: 20%;
  margin: 4px;
}

/* SELECTEUR */

#selecteur-complet {
  display: block;
  height: auto;
  overflow: hidden;
}

#selecteur-gauche {
  position: fixed;
  display: block;
  right: 0px;
  width: 70vw;
  height: 100%;
  background-image: url('../image/image-fond-selecteur.jpg');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  float: left;
  vertical-align: middle;
  z-index: 0;
  background-color: var(--color-gris-fonce);
}

#selecteur-gauche svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#selecteur-droite {
  position: relative;
  display: block;
  width: 30vw;
  height: 100%;
  transition-duration: 0s;
  float: left;
  overflow: visible;
  z-index: 1;
}

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

/* TABLEAU */

#selecteur-droite table {
  position: relative;
  table-layout: fixed;
  width: 100%;
  background-color: white;
  margin: 10px 0;
  transition-duration: 0.4s;
  transform: translate(0 , 0);
}

#selecteur-droite table:hover {
  transform: translate(0.5vw, 0);
}

#selecteur-droite table.disponible { box-shadow: -2vw 0 0 0 var(--color-selecteur-dispo); }
#selecteur-droite table.réservé { box-shadow: -2vw 0 0 0 var(--color-selecteur-reser); }
#selecteur-droite table.vendu { box-shadow: -2vw 0 0 0 var(--color-selecteur-vendu); }

#selecteur-droite table tr td { border: 1px solid var(--color-gris-clair); }

#selecteur-droite table tr td p {
  display: inline-block;
  padding: 3px 10px;
  font-family: "SansMedium", sans-serif;
  font-size: 1vw;
  line-height: 1.2vw;
  text-transform: uppercase;
  color: var(--color-gris-fonce);
}

#selecteur-droite table tr td p i {
    font-family: "Sansregular", sans-serif;
    font-size: 0.5vw;
    line-height: 1vw;
    letter-spacing: 1px;
    color: var(--color-gris-fonce);

}

#selecteur-droite table tr td p span {
	display: block;
    font-family: "Sansregular", sans-serif;
    font-size: 0.5vw;
    line-height: 1vw;
    letter-spacing: 1px;
    color: var(--color-gris-fonce);
}

#selecteur-droite table tr:nth-child(1) td:nth-child(4) { text-align: center; vertical-align: middle; }
#selecteur-droite table tr:nth-child(1) td:nth-child(4) p { color: white; font-size: 70%; }
#selecteur-droite table.disponible tr:nth-child(1) { background-color: rgba(148,167,153,0.1); }
#selecteur-droite table.réservé tr:nth-child(1) { background-color: rgba(220,164,142,0.1); }
#selecteur-droite table.vendu tr:nth-child(1) { background-color: rgba(211,85,108,0.1); }
#selecteur-droite table.disponible tr:nth-child(1) td:nth-child(4) { background-color: var(--color-selecteur-dispo); }
#selecteur-droite table.réservé tr:nth-child(1) td:nth-child(4) { background-color: var(--color-selecteur-reser); }
#selecteur-droite table.vendu tr:nth-child(1) td:nth-child(4) { background-color: var(--color-selecteur-vendu); }

/* HIDE */
#tableau-selecteur table.hide { cursor: pointer; }
#tableau-selecteur table.hide tr:nth-child(2),
#tableau-selecteur table.hide tr:nth-child(3) { display: none; }

/* SHOW */
#tableau-selecteur table.show { cursor: default; transform: translate(2vw, 0); }
#tableau-selecteur table.show tr:nth-child(2),
#tableau-selecteur table.show tr:nth-child(3) { display: default; }

#selecteur-droite table tr:nth-child(3) td {
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
}

#selecteur-droite table tr:nth-child(3) td p {
  display: block;
  padding: 10px 10px;
  font-family: "SansMedium", sans-serif;
  font-size: 0.8vw;
  line-height: 1vw;
  letter-spacing: 0.05vw;
}

#selecteur-droite table.disponible tr:nth-child(3) { background-color: rgba(148,167,153,0.1); }
#selecteur-droite table.réservé tr:nth-child(3) { background-color: rgba(220,164,142,0.1); }
#selecteur-droite table.vendu tr:nth-child(3) { background-color: rgba(211,85,108,0.1); }
#selecteur-droite table tr:nth-child(3) { transition-duration: 0.4s; }
#selecteur-droite table tr:nth-child(3):hover { background-color: white; }

/* SVG */

/* contour */
.cls-1 {
  opacity: 0;
}

/* polygon */
.cls-2 {
  fill: #f8e938;
  opacity: 0;
}

.cls-2:hover {
  opacity: 0.8;
}

/* rectangle */
.cls-3 {
  fill: #6ab42d;
  opacity: 0;
}

.cls-3:hover {
  opacity: 0.8;
}

/* façe arrière */
.cls-4 {
  fill: #f73954;
  opacity: 0;
}

.hover {
  opacity: 0.8;
}

polygon, rect { transition-duration: 0.6s; }
.polyClick { opacity: 0.9; }
.polyOver { opacity: 0.6; }

rect.fond.polyClick { opacity: 0; }
rect.fond.polyOver { opacity: 0; }

.polyDispo { fill: var(--color-selecteur-dispo); }
.polyReser { fill: var(--color-selecteur-reser); }
.polyVendu { fill: var(--color-selecteur-vendu); }

/* FILTRES */

#selecteur-filtres {
  position: relative;
  width: 100%;
  background-color: white;
  margin-bottom: 20px;
}

#selecteur-filtres ul {
  position: relative;
  display: table;
  width: 100%;
  table-layout: fixed;
  text-align: center;
}

#selecteur-filtres ul li {
  display: table-cell;
}

#selecteur-filtres ul.disponibilite li p {
  display: block;
  text-transform: uppercase;
  font-size: 0.7vw;
  line-height: 1vw;
  letter-spacing: 1px;
  font-family: "sansMedium", sans-serif;
  color: var(--color-gris-fonce);
  padding: 10px 0;
}

#selecteur-filtres ul.disponibilite li p span {
  display: inline-block;
  margin: 0 10px 0 0;
  font-family: "sansMedium", sans-serif;
}

#selecteur-filtres ul.disponibilite li { cursor: pointer; transition-duration: 0.4s; }
#selecteur-filtres ul.disponibilite li:hover { background-color: var(--color-gris-clair); }
#selecteur-filtres ul.disponibilite li p img { width: 25px; vertical-align: middle;; }
#selecteur-filtres ul.disponibilite li.bouton-filtres { border-bottom: 10px solid var(--color-gris-fonce);  }
#selecteur-filtres ul.disponibilite li.bouton-filtres p { color: var(--color-gris-fonce); font-family: "sansMedium", sans-serif; }

#selecteur-filtres ul.disponibilite li.dispo.active { border-bottom: 10px solid var(--color-selecteur-dispo); }
#selecteur-filtres ul.disponibilite li.reser.active { border-bottom: 10px solid var(--color-selecteur-reser); }
#selecteur-filtres ul.disponibilite li.vendu.active { border-bottom: 10px solid var(--color-selecteur-vendu); }
#selecteur-filtres ul.disponibilite li.dispo.active p { color: var(--color-selecteur-dispo); }
#selecteur-filtres ul.disponibilite li.reser.active p { color: var(--color-selecteur-reser); }
#selecteur-filtres ul.disponibilite li.vendu.active p { color: var(--color-selecteur-vendu); }

#selecteur-filtres ul.disponibilite li.dispo { border-bottom: 10px solid var(--color-gris-clair); }
#selecteur-filtres ul.disponibilite li.reser { border-bottom: 10px solid var(--color-gris-clair); }
#selecteur-filtres ul.disponibilite li.vendu { border-bottom: 10px solid var(--color-gris-clair); }
#selecteur-filtres ul.disponibilite li.dispo p { color: var(--color-gris-clair); }
#selecteur-filtres ul.disponibilite li.reser p { color: var(--color-gris-clair); }
#selecteur-filtres ul.disponibilite li.vendu p { color: var(--color-gris-clair); }

#selecteur-filtres ul.filtre li {
  cursor: pointer;
  transition-duration: 0.4s;
}

#selecteur-filtres ul.filtre li.active {
  background-color: var(--color-gris-fonce);
}

#selecteur-filtres ul.filtre li p {
  display: block;
  text-transform: uppercase;
  font-size: 1vw;
  line-height: 1.7vw;
  letter-spacing: 1px;
  font-family: "sansMedium", sans-serif;
  color: var(--color-gris-fonce);
  padding: 5px 0;
  margin: 0;
}

#selecteur-filtres ul.filtre li.active p {
  color: white;
}

#selecteur-filtres p.titre-filtre {
  font-size: 0.7vw;
  line-height: 1vw;
  letter-spacing: 12px;
  font-family: "sansMedium", sans-serif;
  color: var(--color-gris-fonce);
  text-transform: uppercase;
  padding: 20px 0 1px 0;
}

a.validation-filtres {
  display: block;
  padding: 20px 0;
  text-align: center;
  font-family: "SansMedium", sans-serif;
  color: white;
  background-color: var(--color-gris-fonce);
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-top: 20px;
  cursor: pointer;
  transition-duration: 0.4s;
  font-size: 1vw;
  line-height: 1.7vw;
}

a.validation-filtres:hover {
  background-color: var(--color-selecteur-dispo);
}

.filtre-hide { display: default !important; }
.filtre-hide.hide { display: none !important; }

/*JQUERY UI*/

.ui-widget.ui-widget-content { border: 4px solid var(--color-gris-fonce); }
.ui-slider-horizontal { height: 1.6em; }
.ui-widget-content { background: var(--color-gris-clair); }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; border-top-right-radius: 0px; border-top-left-radius: 0px; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { background: var(--color-selecteur-dispo); border: none;}
.ui-slider .ui-slider-handle { z-index: 2; width: 1.6em; height: 1.6em; }

.ui-slider-horizontal .ui-slider-handle {
top: 0em;
margin-left: 0em;
}

.ui-slider-horizontal .ui-slider-handle:nth-child(3) {
  margin-left: -1.6em;
}

.ui-slider-horizontal .ui-slider-range { background-color: var(--color-selecteur-dispo); }

/* BOX UP */

#selecteur-box-up {
  position: absolute;
  display: block;
  top: 100px;
  left: 100px;
  opacity: 0;
  width: 20vw;
  z-index: 1000;
  border-radius: 2px;
  box-shadow: inset 0 0 0 2px var(--color-projet-vert-fonce);
  z-index: 100000;
}

#selecteur-box-up.hide {
  top: -800px !important;
  left: 800px !important;
  opacity: 0 !important;
}

#selecteur-box-up table {
  position: relative;
  table-layout: fixed;
  width: 100%;
  background-color: white;
  margin: 0;
  transition-duration: 0.4s;
}

#selecteur-box-up table tr td { border: 1px solid var(--color-gris-clair); }
#selecteur-box-up table tr:nth-child(2) { display: none; }
#selecteur-box-up table tr:nth-child(3) { display: none; }

#selecteur-box-up table tr td p {
  display: inline-block;
  padding: 3px 10px;
  font-family: "SansMedium", sans-serif;
  font-size: 1vw;
  line-height: 1.2vw;
  text-transform: uppercase;
  color: var(--color-gris-fonce);
}

#selecteur-box-up table tr td p i { font-size: 60%; letter-spacing: 1px; font-family: "SansLight", sans-serif; }

#selecteur-box-up table tr td p span {
  display: block;
  font-family: "SansLight", sans-serif;
  font-size: 0.5vw;
  line-height: 1vw;
  letter-spacing: 2px;
  color: var(--color-gris-moyen);
}

#selecteur-box-up table tr:nth-child(1) td:nth-child(4) { text-align: center; vertical-align: middle; }
#selecteur-box-up table tr:nth-child(1) td:nth-child(4) p { color: white; font-size: 70%; line-height: 110%; }
#selecteur-box-up table tbody.disponible tr:nth-child(1) td:nth-child(4) { background-color: var(--color-selecteur-dispo); }
#selecteur-box-up table tbody.réservé tr:nth-child(1) td:nth-child(4) { background-color: var(--color-selecteur-reser); }
#selecteur-box-up table tbody.vendu tr:nth-child(1) td:nth-child(4) { background-color: var(--color-selecteur-vendu); }

#selecteur-box-up::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  display: inline-block;
  height: 0;
  width: 0;
  border-top: 10px solid var(--color-gris-moyen);
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  transform: translate(-50%, 0px);
  z-index: 100;
}

.hidePiece { display: none !important; }
.hideEtage { display: none !important; }
.hideRangeBudget { display: none !important; }
.hideRangeSurface { display: none !important; }
.hideDispo { display: none !important; }

/* EN PLUS */

#selecteur-nord {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 5vw;
  height: 5vw;
  background-image: url('../svg/picto-nord.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
}

#selecteur-logo {
  position: absolute;
  top: 5%;
  right: 0px;
  width: 28%;
  height: 8%;
  background-color: rgba(0,0,0,0);
  background-image: url('../svg/logotype-cardis-blanc.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
}