html {
  background-color: rgb(9, 9, 9);
  color: white;
  width: 100%;
}

#SALLE

body {
  color: black;
  font-family: Verdana;
  margin: 0;
}

#room {
  width: 47cm;
  height: 22.5cm;

  position:relative;
  margin: auto;
}

#main_img {
  display: block;
  margin: auto;
  width: 85%;
}

/* TOOLTPIS */

.tooltip {
  background-color: black;
  color: white;
  opacity: 0.5;
  padding: 0.1cm;
  border: white 0.01cm solid;

  position: absolute;
}

.tooltip_container .tooltip {
  visibility: hidden;
}

.tooltip_container:hover .tooltip {
  visibility: visible;
}


/* COUCH - POP UP ELT */
.popup {
  visibility: hidden;
  color:white;

  position: absolute;

  --popup-body-height: 10cm;
  --popup-body-min-width: 10cm;
  --popup-body-max-width: 27cm;
  --popup-body-min-height: 5cm;
  --popup-body-max-height: 15cm;

  --banner_height: 1.3cm;
  --banner-border-height: 0.07cm;

  width: calc(var(--popup-body-max-width) - 7cm);
  height: calc(var(--popup-body-height) + var(--banner_height));
  
  min-width: var(--popup-body-min-width);
  max-width: var(--popup-body-max-width);
  min-height: calc(var(--popup-body-min-height) + var(--banner_height));
  max-height: calc(var(--popup-body-max-height) + var(--banner_height));;

  overflow-wrap: break-word;
}

.popup_body {
  position: absolute;
  top: calc(var(--banner_height) + var(--banner-border-height));

  min-width: var(--popup-body-min-width);
  max-width: var(--popup-body-max-width);
  min-height: var(--popup-body-min-height);
  max-height: var(--popup-body-max-height);

  width: 100%;
  height: var(--popup-body-height);
  
  background-color: rgb(255, 147, 165);

  overflow: scroll;
}


/* popup banner */
.popup_banner {
  background-color: white;
  border: solid grey var(--banner-border-height);

  color: black;
  padding-left: 0.4cm;
  padding-right: 0.4cm;

  height: var(--banner_height);

  cursor: grab;

  overflow: clip;
  text-overflow: ellipsis;
}

.popup_close_button {
  display: inline;

  height:var(--banner_height);
  aspect-ratio: 1;

  position: absolute;
  right: 0;

  border: none;
  background-color: rgb(206, 215, 226);

  cursor: pointer;
}

.popup_banner h1 {
  display: inline;

  margin-right: 1cm;
}

/* expansion bar */
.expansion_bar {
  position: absolute;
}

.right_expansion_bar {
  height: 100%;
  width: 0.5cm;

  top: 0;
  right: 0;

  cursor: col-resize;
}

.down_expansion_bar {
  width: 100%;
  height: 0.5cm;

  bottom: 0;

  cursor: row-resize;
}

/* DOORS */
.door {
  position: absolute;

  opacity: 0;
}

.up_door {
  cursor: url(../ressources/images/curseur_poucepouce_haut.png) 20 10, auto;
}

.left_door {
  cursor: url(../ressources/images/curseur_poucepouce_gauche.png) 20 10, auto;
}

.right_door {
  cursor: url(../ressources/images/curseur_poucepouce_droite.png) 20 10, auto;
}

.down_door {
  cursor: url(../ressources/images/curseur_poucepouce_bas.png) 35 10, auto;
}