html,body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* pas de « tirer pour rafraichir » sur telephone (Chrome Android, Safari
     iOS) : un balayage vers le bas rechargeait la page en plein parcours.
     Le defilement des zones qui defilent reste normal (27 septembre 2026). */
  overscroll-behavior: none;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

::-webkit-scrollbar {
  width: 0;  /* Remove scrollbar space */
  background: transparent;  /* Optional: just make scrollbar invisible */
}

#map {
  height: calc(100% - 50px);
  /*width: calc(100% - 150px);*/
  width: 100%;
  position : absolute;
  right:0;
  bottom:0;
}

div.dialog {
  z-index: 0;
  position : absolute;
  right:0;
  bottom:0;
  background-color: #FFFFFF;
  pointer-events: auto;
  overflow: auto;
}

div.dialogtitle {
  line-height: 25px;
  width: 100%;
  background-color: #FFFFFF;
  color: #600000;
  text-align: center;
  font-weight: bold;
}

div.dialogbottom {
  width : 100%;
  height: calc(100% - 25px);
  display: flex;
  flex-direction: row;
  overflow: auto;
}

div.dialogbottomfull {
  width : 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  overflow: auto;
}

div.dialogsameline {
  width : 100%;
  display: inline-block;
}

img.poi {
  width: 95%;
  height: 200px;
  margin-top: 2px;
  margin-left: 10px;
  object-fit: scale-down;
}

embed.poi {
  width: calc(100% - 20px);
  height: 200px;
  margin-top: 2px;
  margin-left: 10px;
}

iframe.poi {
  width: calc(100% - 20px);
  height: 200px;
  margin-top: 2px;
  margin-left: 10px;
}

img.visu {
  width: 100px;
  height: 200px;
  margin-top: 0px;
  margin-left: 0px;
  position : absolute;
  object-fit: scale-down;
}


video.visu {
  width: 100px;
  height: 200px;
  margin-top: 0px;
  margin-left: 0px;
  position : absolute;
  object-fit: scale-down;
}

div.visu {
  width: 100px;
  height: 200px;
  margin-top: 0px;
  margin-left: 0px;
  position : absolute;
}

iframe.visu {
  width: 100px;
  height: 200px;
  margin-top: 0px;
  margin-left: 0px;
  position : absolute;
  border-width: 0px;
}

input.visu {
  width: 100px;
  height: 200px;
  margin-top: 0px;
  margin-left: 0px;
  position : absolute;
}

::placeholder {
    color:white;
}

/* Les ecrans du noyau (#screens) : le texte d'aide d'un champ en gris, comme
   le hint d'un EditText Android ; en blanc il etait invisible dans la boite
   de saisie du code, une fois le soulignement retire (10 octobre 2026). */
#screens ::placeholder {
    color: #9e9e9e;
}

textarea.visu {
    width: 100px;
    height: 200px;
    margin-top: 0px;
    margin-left: 0px;
    resize: none;
    border: none;
    outline: none;
    position: absolute;
}

input[type=text] {
  width: 100%;
  padding: 2px 2px;
  font-size: 14px;
  display: inline-block;
  border: 0px solid #ccc;
}

input[type=text]:focus {
  outline: none;
}

textarea:focus {
  outline: none;
}

/* The Modal (background) */
/* Les ecrans du noyau. Sous #popups, qui reste reserve au moteur de jeu. */
#screens {
  position: fixed;
  z-index: 40;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none;
}

#popups {
  position:fixed;
  z-index: 50; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgb(0,0,0); /* Fallback color */
  pointer-events : none;
  overflow-y: auto;
}

.modal-popup {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 50; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
  pointer-events: auto;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

#loading {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  background-image: url("assets/pictos/wait1.gif");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50px 50px;
  text-align: center;
  vertical-align: middle;
  line-height: 120vh;  
  color: #fff; /* White text color */
  font-size: 20px;
}