@font-face {
    font-family: 'AA Cursive';
    src: url('polices/AAcursive-Bold_2.11.ttf') format('truetype');
  }

  @font-face {
    font-family: 'OpenDyslexic';
    src: url('polices/OpenDyslexic-Regular.otf') format('truetype');
  }

  @font-face {
    font-family: 'Belle Allure';
    src: url('polices/BelleAllureCE-Gros.otf') format('truetype');
  }

html {
    user-select: none;
    overflow: hidden;
}

body,html {width:100% ; height:100%; background-color: #dfe5fe; padding: 0; margin: 0px;font-size: 0;
display: flex;
}

body {background-size: cover; background-position: center;}

input {cursor: url(images/auto.png), auto;}


#zone_1 {
font-size: 0;
vertical-align: top;
padding: 10px;
text-align: center;
width: 120px;
background: rgba(255, 255, 255, 0.59);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(6.1px);
-webkit-backdrop-filter: blur(6.1px);
left:0px;
top:0px;
transition: all 1s;
}



#zone_2 {
display: flex;
position: relative;
text-align: center;
align-items: center;
justify-content: center;
font-size: 10vw;
width: calc( 100% - 140px );
transition: all 1s;
}

.bouton_haut, .bouton_choix {
  height:38px;
  width: 38px;
  padding:0;
  border:0;
  background-color: transparent;  
  }

  .bouton_haut:hover, .bouton_choix:hover {
    background-position-x: -38px;  
    }

#bouton_consonnes {
  background-image: url(images/consonnes.png);
  margin-right: 2px;
}

#bouton_voyelles {
  background-image: url(images/voyelles.png);
  margin-left: 2px;
}

#bouton_options {
  background-image: url(images/options.png);
  margin-right: 2px;
}

#bouton_apropos {
  background-image: url(images/apropos.png);
  margin-left: 2px;
}



.menu_encadre {
  border: 1px outset rgba(255, 255, 255, 0.5);
  background-color:rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  padding: 4px;
  margin: 4px 0px 4px 0px;
  text-align: center;
  font-size: medium;
}

#bouton_syllabaire {background-size: contain;}


@media (orientation: portrait) {
  body {
    flex-direction: column;
}
  #zone_1 {
  width: calc(100% - 4px);
  height: 120px;
  padding-left: 2px;
  padding-right: 2px;
  }
  #zone_2 {
  width: 100%;
  height: calc( 100% - 120px );   
  top: 0px;
  margin-bottom: 0px; 
}
  #bouton_replier {
  top: 91px; 
  right: 0px; 
  }
  #bouton_options, #bouton_apropos, .bouton_choix {
    display: block;
  }
  .menu_encadre {   
    
    margin: 0px 1px 0px 1px;
    width: auto;
    height: calc(100% - 10px);
    align-items: center;
     
  }
  #bouton_replier {
    background-image: url(images/fleche_haut.png); 
    }
  #bouton_syllabaire {display: block;height: 67px; width: 60px;}

  .hide_mobile {display: none;}
}

#zone_mentions {
  position: absolute;
  bottom: 10px;
  opacity: 1;
  transition: all linear 1s;
}


#logo,#hebergeur {
  background: rgba(255, 255, 255, 0.59);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(6.1px);
  -webkit-backdrop-filter: blur(6.1px);
  border-radius: 10px;  
  background-repeat: no-repeat;
  background-position: left;
  background-position-x: 5px;
}

#logo {
  background-image: url(images/logo.png);
  font-family: 'OpenDyslexic';
  font-size: 4vh;
  border: 10px solid rgba(255, 255, 255, 0.59);
  padding: 5px 5px 5px 55px;
}

#hebergeur {
  margin-top: 5px;
  font-family: 'Arial';
  font-size: 2vh;
  border: 5px solid rgba(255, 255, 255, 0.59);
  padding: 5px;
}




@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
  #zone_1 {
  width: 130px;
  height: 100%;
  padding: 5px;
  }
  #zone_2 {
  width: calc( 100% - 140px );
  height: 100%;
  left: 0px;
  margin-right: 0px;    
  }
  #bouton_replier {
  left: 91px;
  bottom: 30px;  
  }
  .menu_encadre {
  width: 120px;  
  }
  #bouton_replier {
    background-image: url(images/fleche_gauche.png); 
    }
  #bouton_syllabaire {width: 100px;height: 67px;}
}

#zone_2 select {
  font-size: medium;
  font-weight: bold;
  background: rgba(255, 255, 255, 0.59);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(6.1px);
  -webkit-backdrop-filter: blur(6.1px);
  border-radius: 10px;
  border: 10px solid rgba(255, 255, 255, 0.59);
  padding: 5px;
}


#haut_parleur {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background-image: url(images/sound_on.svg);
  background-repeat: no-repeat;
  background-size: 75%;
  background-position: center;
  border-radius: 25%;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.5);
}

.bouton_transp {
  padding:0;
  border:0;
  background-size: contain;
  background-color: transparent;
  }

#bouton_replier {
z-index: 500;
transition: all 1s;  
}


.fenetre_choix {
position: absolute;
top:10%;
left:10%;
width: 70%;
height: 70%;
border: 10px solid white;
border-radius: 10px;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
background: rgba(255, 255, 255, 0.59);
backdrop-filter: blur(6.1px);
-webkit-backdrop-filter: blur(6.1px);
}

.defile{
  overflow-y: scroll;
  height: 80%;
  width: 90%;
  margin: auto;
}

#checkboxes {
margin: auto;
}

.option label {
  font-size: 5vmin;
}

.option input {display: none;}



.fenetre_choix input[type="button"] {
  font-size:5vmin;
  margin: 1vmin;
  }


.boutons_menu {
display: inline-block;
vertical-align: middle;

}

.fenetre_choix .bouton_quitter {
  background: none;
  border: none;
  height: 8vmin;
  width: 8vmin
  ;
}

#syllabe {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
border-radius: 1vmin;
padding: 2vmin 1vmin;
background: rgba(255, 255, 255, 0.463);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
border: 1px solid rgba(70, 163, 255, 0.3);
z-index: 1;
transition: left 1s;
font-feature-settings: "calt" 1;
}

#bouton_precedent {
  background-image: url("images/precedent.png");
}

#bouton_precedent:disabled {
  background-image: url("images/precedent_disabled.png");
}

#curseur_duree_diaporama {
  width: 100%;
}

.texte{color: #fff; font-size: 12px;}




.categorie {background-color: rgba(255, 255, 255,0.5); width: 96%;border-radius: 5px; padding: 1vmin; margin: 1vmin;}

.option {display: inline-block; border: 5px solid rgba(255, 255, 255, 0.3); border-radius: 5px; padding: 1vmin; margin: 1vmin;
   background-color: aquamarine;


}

#checkboxes_consonnes .option {background-color: aquamarine;}
#checkboxes_voyelles .option {background-color: rgb(118, 114, 230);}

.zoneMilieu {
  flex: 1;
  position: relative;
  width: 100%;
  height: 100%;
}

.colonne {
  top: 10px;
  height: calc(100% - 20px);
  background: rgba(255, 255, 255, 0.463);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(70, 163, 255, 0.3);
  font-size: 7vmin;
  overflow-y: scroll;
}

*#colonne_gauche {left: 1vw;}
*#colonne_droite {right: 1vw;}
*#colonne_milieu {right: 9vw;}


.etiquette {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(70, 163, 255, 0.3);
  margin: 1vmin;

}


.select {
  border: 2px solid red;

}


.lightbox {
  display: none;
  position: absolute;
  width: 50%;
  height: 50%;
  max-height: 50%;
  top: 25%;
  left: 25%;
  padding : 10px;
  background: rgba(255, 255, 255, 0.7);
  border: 10px solid white;
  backdrop-filter: blur(6.1px);
  -webkit-backdrop-filter: blur(6.1px);
  border-radius: 10px;
  overflow-y: auto;
  z-index: 9999;
  font-size: 16px;
  }
  


  .ombre-portee {
    filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.41));
    }

    .bouton {
      margin: 3px;
      background-repeat: no-repeat;
      background-position: center;
      width: 38px;
      height: 38px;
      background-size: contain;
      border-radius: 5px;
      vertical-align: middle;
      }

.bouton_fermer_graph {
  display: none;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 10px;
  height: 10px;
}

#syllabe span:hover .bouton_fermer_graph {
  display: block;
}

.selection_couleur {
  display: inline-block;
  margin-right: 20px;
}

.titre_couleur {padding: 5px;border-radius: 5px;}

#graph_1, #graph_2, #graph_3 {
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}

#graph_1:not(:empty)::before {
  content:'';
  display: inline-block;
  width: 0.1em;
}

.last-visible:not(:empty)::after {
  content:'';
  display: inline-block;
  width: 0.1em;
}

#graph_3:not(:empty) {
  padding-right: 0.2em;
  font-feature-settings: "calt" 1;
}