/*********************************************
  * Media Queries
  *********************************************/

html, body {
  touch-action: manipulation; /* For touch devices */
  -webkit-user-select: none;  /* For Chrome, Safari, and Opera */
  -moz-user-select: none;     /* For Firefox */
  -ms-user-select: none;      /* For Internet Explorer/Edge */
  user-select: none;          /* Non-prefixed version, currently supported by Chrome, Opera, and Firefox */
}

@media screen and (orientation: portrait) {
  body {
      transform: rotate(-90deg);
      transform-origin: left top;
      width: 100vh;
      height: 100vw;
      overflow-x: hidden;
      position: absolute;
      top: 100%;
      left: 0;
  }
}
@media (min-width: 768px) {
  /* Styles pour les tablettes et les ordinateurs de bureau */
}

/* En rapport avec l'algo de Office.html pour les petits ecran de pc */
/* Ajustez la valeur du zoom selon vos besoins */
/* body.zoom-small {
  zoom: 0.75; 
} */
/* @media (max-width: 1450px) {
  body {
      zoom: 0.9;
  }
}
@media (max-width: 1350px) {
  body {
      zoom: 0.8;
  }
}
@media (max-width: 1250px) {
  body {
      zoom: 0.7;
  }
} */


.pivotPortrait{
  width: 100vh;
  height: 100vw;
}
.pivotLandscape{
  width: 100vw;
  height: 100vh;
}

/*********************************************
  * Body
  *********************************************/

/* pour que les padding et border ne modifient pas la taille des éléments */
* { box-sizing:border-box; }

body {
  /* background: #333; */
  font-family: Helvetica, sans-serif;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}
#appPage{
  /* background noir dégradé au centre grey-900 */
  /* background: linear-gradient(180deg, var(--grey-900) 0%, var(--grey-800) 100%); */
  background: rgb(92,91,91);
  background: radial-gradient(circle, rgba(92,91,91,1) 21%, rgba(58,58,58,1) 75%, rgba(0,0,0,1) 100%);
}


/*********************************************
  * Variables
  *********************************************/
  :root {
    --border-color: #291D4D;
    --dialog-background: #FFF3B4;
  
    --menu-background: #FFE8D2;
    --menu-border-color: #A48465;
    --menu-font-color: #3A160D;
    --menu-selected-background: #7fc2ff;
  
    --primary-color: #00b0ff;
    --secondary-color: #ebd024;
    --tertiary-color: #a1887f;
    --grey-100: #f5f5f5;
    --grey-200: #eeeeee;
    --grey-300: #e0e0e0;
    --grey-400: #bdbdbd;
    --grey-500: #9e9e9e;
    --grey-600: #757575;
    --grey-700: #616161;
    --grey-800: #424242;
    --grey-900: #212121;

    /* validation, error, attention colors */
    --error-color: #f44336; 
    --warning-color: #ff9800;
    --success-color: #4caf50;
  
    --pixel-size: 2px;
    --tileset-size: 16;
    --grid-cell: calc(var(--pixel-size) * var(--tileset-size));
    
  }

  

/*********************************************
  * Fonts
  *********************************************/




/*********************************************
  * Utility Classes
  *********************************************/

.hidden {
  display: none !important;
}