/* CSS Document Belli6Mots  hexgonstag2 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

body
{
    padding: 0px;
    margin:  0px;
   /* position: static;       /* IMPORTANT et CAPITAL !!!!!! car cela bloque le body sur l'écran -> empêche le drag and drop automatique*/
                            /* fixed sur mobile et tablette: empêche de bouger l'écran */
    /*background-color:  rgb(30,144,255); */ 
    background-image: linear-gradient(rgb(1,144,223),rgb(1,144,223),rgb(65,171,231),rgb(65,171,231),rgb(102,188,236),rgb(102,188,236),rgb(121,196,238),rgb(150,209,241),rgb(197,228,246),rgb(203,232,248),rgb(203,232,248),rgb(14,96,2));  
  /*  
    background-color: green; /* fallback color if gradients are not supported */
  /*  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
 /*   background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */
 /*   background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */ 
 /*   background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */

    -moz-scrollbars-none;
    overflow : hidden;
    /*overflow: scroll;*/  
}   
#fond_coquelicots
{
    position: absolute;
    padding: 0px;
    margin:  0px;
    color: red;
    background-image: url('../sprites/fond_coquelicots_claude_monet.png');    
   /* background-size: 300px; */
}

#containerb6m_page1
{
    position: absolute;
    padding: 0px;
    margin: 0px;
    height: 100%;
    background-size:  100%;
    
    background-image: url('../sprites/b6m_fond_page1.png');
    /* background-image: url('sprites/b6m_fond_page1.png'); */
}  


#titre       /* titre page 1 BELLI6MOTS */
{
    position: absolute;
    font-family: Brush Script MT, Brush Script Std, cursive;
    font-size: 4em; /*400%; /* 60px;  */
    overflow : hidden;
    color: black;   
    padding: 0px;
    margin:  0px;
    border-radius: 25px;
    z-index:1002;
    user-select: none;
    text-align:center;
    vertical-align: middle;
   /* background-color:  red;*/   
}

#titre3       /* titre page 3 Professeur ZABAYE */
{
    position: absolute;
    font-size: 3em; 
    overflow : hidden;
    color: black;   
    padding: 0px;
    margin: 0px;
    left: 205px;
    top: 450px;
    width: 320px;
    height: 60px; 
    border-radius: 25px;
    z-index:1002;
    user-select: none;
    text-align:center;
    vertical-align: middle;
   /*     background-color:  red;   */
}

#containerb6m_page3
{
    position: absolute;
    padding: 0px;
    margin: 0px;
    height: 100%; 
    background-image: url('../sprites/b6m_fond_page3.png');
    background-size:  100%; 
}    

 
#containerb6m_page2
{

    padding: 0px;
    margin: 0px;
     height: 100%;  
    overflow: hidden;  

    
 /*   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 
    transition: all .3s linear;    */
   /* background-color: rgb(176,0,0) /*yellow; /* rgb(30,144,255);  */
}

.cursordrag
{
    cursor:drag;
};

.cursordragging
{
    cursor:dragging;
};

.zoome
{
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(2);
    zoom : 200%;           /*  1.83=42/23 rapport tailles alavéoles sur chevalet et sur le plateau   */
}

.zoomneg
{
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    zoom : 70%;           /*  1.83=42/23 rapport tailles alavéoles sur chevalet et sur le plateau   */
}

#pseudo
{
  position: absolute;
  top: 200px;
  left: 40px;
  z-index: -1;
}

/* score total du joueur1 ***************************************************************************** */
#coucou    /* abeille au coeur de la ruche*/ 
{
  margin: 0px;
  padding: 0px;
  position: absolute;
  background-image: url('../sprites/coeur_ruche_sans_fond.png');  
  z-index: 1199;
  user-select: none;
/* top: 200px;
  left: 212px;
  width: 48px;
  height: 48px;  
  background-size: 48px; 
*/

}

/* Avatar macotte de victoire */
#mascotte_victoire    
{
  margin: 0px;
  padding: 0px;
  position: absolute;
  background-image: url('../sprites/b6m_victoire_sans_fond.png');  
  z-index: 1200;
  user-select: none;
}

/* Avatar macotte perdu */
#mascotte_perdu    
{
  margin: 0px;
  padding: 0px;
  position: absolute;
  background-image: url('../sprites/b6m_perdu_sans_fond.png');  
  z-index: 1200;
  user-select: none;
}

 /* AVATAR sprite_mascotte1 Page1*/     
#sprite_mascotte1   
{
  position: absolute;
  margin: 0;

  background-image: url('../sprites/b6m_mascotte1_sans_fond.png');       /* url('../belli6mots/sprites/b6m_mascotte1_sans_fond.png'); */
  z-index: 1001;
  user-select: none;
}

 /* AVATAR Professeur Zabeye Page3*/     
#sprite_Prof_Zabeye   
{
  position: absolute;
  margin: 0;
 
  background-image: url('../sprites/b6m_professeur_zabeille_sans_fond.png');  
  z-index: 1001;
  user-select: none;
}

 /* AVATAR sprite_tableau   Page3*/     
#sprite_tableau  
{
  position: absolute;
  margin: 0;
 
  background-image: url('../sprites/b6m_page3_onglet_tableau_sans_fond.png');  
  z-index: 1001;
  user-select: none;
}

 /* AVATAR sprite_historique Page3*/     
#sprite_historique   
{
  position: absolute;
  margin: 0;
 
  background-image: url('../sprites/b6m_page3_onglet_historique_sans_fond.png');  
  z-index: 1001;
  user-select: none;
}

/* AVATAR score total du joueur*/ 
#sprite_score_joueur   
{

  position: absolute;
  margin: 0;
 
  background-image: url('../sprites/b6m_abeille_score_joueur_sans_fond.png'); /*abeille_score_b6m_sans_fond.png');   */
 
  z-index: 1001;
  user-select: none;
}

#espace_score1
{
    position: absolute;
    padding: 0px;

    font-family:  OCR A Std, monospace;
    font-weight : bold; 
    font-size: 13px; 
    text-align:center;
    vertical-align: middle;
    z-index:9;
    user-select: none;
}    

#score_tour_joueur1    /* score du joueur du tour courant dans div carrée à côté du mot posé*/
{
  position: absolute;
  padding-top: 0px;
  margin: 0px;
 /* top: 175px;
  left: 40px;      */
  height: 30px;
  width: 30px;
    font-family:  OCR A Std, monospace;
    font-weight : bold; 
    font-size: 13px;
    text-align:center;
    vertical-align: middle;
  background-color: yellow;
  color: black;
  border-radius: 10px;
  border: 4px solid white;
  z-index: 1200;
  user-select: none;
}

/* score total du Mobot ***************************************************************************** */

#sprite_score_mobot    /* score total de Mobot sprite_score_mobot_ailes*/ 
{
  margin: 0 auto;
  position: absolute;
  top: 355px;
  left: 15px;
  height: 100px;
  width: 100px; 
  background-image: url('../sprites/mobot_score_sans_fond_sans_ailes_yeux.png');  
  background-size: 100px;
  z-index: -2;
  user-select: none;
}

#sprite_score_mobot_ailes   
{
  margin: 0 auto;
  position: absolute;
  top: 355px;
  left: 5px;
  height: 100px;
  width: 120px; 
  background-image: url('../sprites/mobot_score_ailes_yeux_sans_fond.png');  
  background-size: 120px;
  z-index: -3;
  user-select: none;
}

#sprite_score_mobot_yeux    
{
  margin: 0 auto;
  position: absolute;
  top: 345px;
  left: 20px;
  height: 100px;
  width: 100px; 
  background-image: url('../sprites/mobot_score_yeux_sans_fond.png');  
  background-size: 100px;
  z-index: -1;
  user-select: none;
}

#espace_score_mobot
{
    position: absolute;
    padding: 0px;
/*    left: 10px;
    top: 46px;
    width: 90px;
    height: 25px;  */
    font-size: 13px;
    font-family:  OCR A Std, monospace;
    font-weight : bold; 
    text-align:center;
    vertical-align: middle;
    z-index:0;
    user-select: none;
 } 
#score_tour_Mobot   /* score du joueur de Mobot dans div carrée à côté du mot posé*/  
{

  position: absolute;
  padding-top: 0px;
  margin: 0px;
 /* top: 390px;
  left: 40px;  */
  height: 30px;
  width: 30px;
    font-family:  OCR A Std, monospace;
    font-weight : bold; 
    font-size: 14px;
    text-align:center;
    vertical-align: middle;
  background-color: navy;
  color: white;
  border-radius: 10px;
  border: 4px solid white;
  z-index: 1200;
  user-select: none;
};

 /* Boucle d'attente pendant chargement du DICO**************************************************  */
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
  
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ********************************************************************************* */
/*                 bouton ECHANGER puis Passer son Tour                              */
/* ********************************************************************************* */

/* fenêtre popup pour action du bouton ECHANGER********************************************************** */ 
.form-popup                               
{
    display: none;
    position: absolute;
    padding: 10px;
    padding-left: 10px;
    margin: 0px;
 /*   left: 10px;                      
    top: 475px;
    width: 485px;
    height: 105px;  */
    z-index: 1100;
}

.dashed                     /* cadre pointillé mouvant de la fenêtre popup du bouton ECHANGER */
{
  background: 
    linear-gradient(90deg, blue 50%, transparent 50%),
    linear-gradient(0deg, blue 50%, transparent 50%),
    linear-gradient(90deg, blue 50%, transparent 50%),
    linear-gradient(0deg, blue 50%, transparent 50%);   
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-size: 25px 7px, 7px 25px, 25px 7px, 7px 25px;
  background-position: left top, right top, left bottom, left top;
  padding: 4px;
  animation: border-dance 7s infinite linear;
  background-color: rgb(0,191,255,0.4);
}
	
@keyframes border-dance 
{
  0%
  {
    background-position: left top, right top, right bottom, left bottom;
  }
  100% 
  {
    background-position: right top, right bottom, left bottom, left top;
  }
}

/* bouton ECHANGER puis Passer son Tour */

#btn_popup_echange      
{
    position: relative;
    padding: 0px;
    left: 0px;
    top: 74px;
    width: 364px;
    height: 32px;
    border-radius: 25px;
    background-color: rgb(0,100,0); /*rgb(178,34,34,0.7); */   
    color: white;
    visibility: visible;
    z-index:1100;
} 

#btn_popup_echange  :active {     /* effet bouton très enfoncé */
     background-color: rgb(127,255,0);  
}


.btn_echange_lettre
{
    position: absolute;
    top: 47px;
    width: 46px;
    height: 30px;
    border-radius: 40px;
    background-color: rgb(173,255,47);    
    color: white;
    visibility: visible;
    z-index:1100;
    user-select: none;
}


#btn_popup_echange_lettre0 { left: 4px;}
#btn_popup_echange_lettre1 { left: 57px;}
#btn_popup_echange_lettre2 { left: 110px;}
#btn_popup_echange_lettre3 { left: 163px;}
#btn_popup_echange_lettre4 { left: 216px;}
#btn_popup_echange_lettre5 { left: 269px;}
#btn_popup_echange_lettre6 { left: 322px;}   


.goutte_joueur
{
    position: absolute;
    padding: 0px;
    margin: 0px;
  /*  left: 500px;                      
    top: 50px;    */
    width: 40px;
    height: 40px;
    border-radius: 0px;
    border: 0px solide grey; 
    visibility: visible;
    
    background-image: url('../sprites/b6m_goutte_score.png');  /* b6m_chevalet_sans-fond.png');   radial-gradient(circle at top left, rgb(216,191,216), rgb(255,153,255)); */
    background-size: 40px 40px;
    
    z-index:999;    
    user-select: none;
    

 /*    transform: translate(100px, 50px);   */ 
}

.goutte_10
{
    -moz-transition: transform 1s; 
    -webkit-transition: transform 1s;  
    -ms-transition: transform 1s;  
    -o-transition: transform 1s;  
    transition: transform 1s; 
}

.goutte_20
{
    -moz-transition: transform 2s; 
    -webkit-transition: transform 2s;  
    -ms-transition: transform 2s;  
    -o-transition: transform 2s;  
    transition: transform 2s; 
}
.goutte_12
{
    -moz-transition: transform 2.1s; 
    -webkit-transition: transform 1.2s;  
    -ms-transition: transform 1.2s;  
    -o-transition: transform 1.2s;  
    transition: transform 1.2s; 
}
.goutte_22
{
    -moz-transition: transform 2.2s; 
    -webkit-transition: transform 2.2s;  
    -ms-transition: transform 2.2s;  
    -o-transition: transform 2.2s;  
    transition: transform 2.2s; 
}
.goutte_14
{
    -moz-transition: transform 1.4s; 
    -webkit-transition: transform 1.4s;  
    -ms-transition: transform 1.4s;  
    -o-transition: transform 1.4s;  
    transition: transform 1.4s; 
}
.goutte_24
{
    -moz-transition: transform 2.4s; 
    -webkit-transition: transform 2.4s;  
    -ms-transition: transform 2.43s;  
    -o-transition: transform 2.4s;  
    transition: transform 2.4s; 
}
.goutte_16
{
    -moz-transition: transform 1.6s; 
    -webkit-transition: transform 1.6s;  
    -ms-transition: transform 1.6s;  
    -o-transition: transform 1.6s;  
    transition: transform 1.6s; 
}
.goutte_26
{
    -moz-transition: transform 2.6s; 
    -webkit-transition: transform 2.6s;  
    -ms-transition: transform 2.6s;  
    -o-transition: transform 2.6s;  
    transition: transform 2.6s; 
}
.goutte_18
{
    -moz-transition: transform 1.8s; 
    -webkit-transition: transform 1.8s;  
    -ms-transition: transform 1.8s;  
    -o-transition: transform 1.8s;  
    transition: transform 1.8s; 
}
.goutte_28
{
    -moz-transition: transform 2.8s; 
    -webkit-transition: transform 2.8s;  
    -ms-transition: transform 2.8s;  
    -o-transition: transform 2.8s;  
    transition: transform 2.8s; 
}

.goutte_mobot
{
    position: absolute;
    padding: 0px;
    margin: 0px;
/*    left: 580px;                      
    top: 50px;    */
    width: 40px;
    height: 40px;
    border-radius: 0px;
    border: 0px solide grey; 
    visibility: visible;
    
    background-image: url('../sprites/b6m_goutte_mobot.png');  /* b6m_chevalet_sans-fond.png');   radial-gradient(circle at top left, rgb(216,191,216), rgb(255,153,255)); */
    background-size: 40px 40px;
    
    z-index:999;    
    user-select: none;
}
/* CHEVALET JOUEUR *********************************************************************************** */

#chevalet_joueur1   
{
  /* background-color: rgb(16,128,255);  */
  
    position: absolute;
    padding: 0px;
    margin: 0px;
/*
    left: 5px;                      
    top: 520px;
    width: 500px;
    height: 280px;
    background-size: 500px 280px;
*/    
    border-radius: 0px;
    /* border: 1px solide grey; */
    visibility: visible;
    
    background-image: url('../sprites/b6m_btn_supportmobile_sans_fond.png');  /* b6m_chevalet_sans-fond.png');   radial-gradient(circle at top left, rgb(216,191,216), rgb(255,153,255)); */
    /*background-color: gray; */

    z-index:999;    
    user-select: none;
}

#btn_grille    /* b6m_btn_remet_sur_chevalet_sans_fond bouton pour remettre sur le chevalet les lettres posées dans le tour sur le plateau */
{
    position: absolute;
    padding: 0px;
    font-size: 16px;
    overflow : hidden;
    color: white;
    background-color: rgb(199,21,133); 
 
    border-radius: 4px;
    background-image: url('../sprites/b6m_btn_cadre_grille.png'); 
    background-size: 60px;
    background-color: rgb(65,105,225);   

    visibility: visible;
    outline: 0;            /* chrome: pour supprimer cadre du focus */    
    z-index:1000;
    user-select: none;
}

#btn_grille:active {     /* effet bouton très enfoncé */
     background-color: rgb(127,255,0);  
}
 
/* AVATAR score total du joueur*/      
#grille_plateau   
{
  position: absolute;
  margin: 0;
  background-image: url('../sprites/b6m_cadre_grille_sans_fond.png'); /*abeille_score_b6m_sans_fond.png');   */
  z-index: 1001;
  user-select: none;
}

#grille_sous_plateau_inactif   
{
  position: absolute;
  margin: 0;
  z-index: 1001;
  border-radius: 4px;
  background-color: blue;
  user-select: none;
}

#btn_zoome    /* b6m_btn_remet_sur_chevalet_sans_fond bouton pour remettre sur le chevalet les lettres posées dans le tour sur le plateau */
{
    position: absolute;
    padding: 0px;
    font-size: 16px;
    overflow : hidden;
    color: white;
    background-color: rgb(199,21,133); 

    border-radius: 4px;
    background-image: url('../sprites/b6m_btn_zoom_sans_fond.png');  /* radial-gradient(circle at top left, rgb(216,191,216), rgb(255,153,255)); */
    background-size: 60px;
    background-color: rgb(65,105,225);   

    visibility: visible;
    outline: 0;            /* chrome: pour supprimer cadre du focus */    
    z-index:1000;
    user-select: none;
}

#btn_zoome:active {     /* effet bouton très enfoncé */
     background-color: rgb(127,255,0);  
}

#btn_zoome_toggle
{
    position: absolute;
    padding: 0px;

    color: white;
 
    top: 100px; /* 77px;*/
    left: 463px;    
    height: 15px;
    width: 15px;
    z-index:1002;
    user-select: none;
}

.btn_niveaux
{
    position: absolute;
    display: block;
    margin-left: auto;
    margin-right: auto; 
    border-radius: 100%;
    outline: 0;            /* chrome: pour supprimer cadre du focus  b6m_btn_anagramme */    
    z-index:1000;
    user-select: none;
}

#btn_niveau1 {background-image: url('../sprites/b6m_niveau1_sans_fond.png');}  
#btn_niveau2 {background-image: url('../sprites/b6m_niveau2_sans_fond.png');}  
#btn_niveau3 {background-image: url('../sprites/b6m_niveau3_sans_fond.png');}  
#btn_niveau4 {background-image: url('../sprites/b6m_niveau4_sans_fond.png');}  
#btn_niveau5 {background-image: url('../sprites/b6m_niveau5_sans_fond.png');}  
#btn_niveau6 {background-image: url('../sprites/b6m_niveau6_sans_fond.png');}  
#btn_niveau7 {background-image: url('../sprites/b6m_niveau7_sans_fond.png');}  
#btn_niveau8 {background-image: url('../sprites/b6m_niveau8_sans_fond.png');}  
#btn_niveau9 {background-image: url('../sprites/b6m_niveau9_sans_fond.png');}  
#btn_niveau10 {background-image: url('../sprites/b6m_niveau10_sans_fond.png');}  

#btn_anagrammes
{
    position: absolute;
    font-size: 14px;
    overflow : hidden;
    color: white;
    background-color: rgb(25,25,112); 
    margin: 0px;   
    padding-left: 0px;
    padding-top: 0px;  
/*    top: 682px;
    left: 35px;  
     
    height: 35px;
    width: 35px;
    background-size: 10px;  */
        
    border-radius: 100%;
    background-image: url('../sprites/b6m_btn_anagramme_fleur_sans_fond.png');  /* radial-gradient(circle at top left, rgb(216,191,216), rgb(255,153,255)); */

    background-color: rgb(16,128,255);   

    visibility: visible;
    outline: 0;            /* chrome: pour supprimer cadre du focus  b6m_btn_anagramme */    
    z-index:1000;
    user-select: none;
}

#btn_motbot
{
    position: absolute;
    font-size: 14px;
    overflow : hidden;
    color: white;
    background-color: rgb(25,25,112); 
    margin: 0px;
    padding-left: 0px;
    padding-bottom: 0px;  
/*    top: 682px;
    left: 220px;
    height: 35px;
    background-size: 35px;   
    width: 35px;
*/    
    background-image: url('../sprites/b6m_btn_mobot_aide_sans_fond.png');  /* radial-gradient(circle at top left, rgb(216,191,216), rgb(255,153,255)); */

    background-color: rgb(16,128,255);   
    
    visibility: visible;
    border-radius: 100%;
    outline: 0;            /* chrome: pour supprimer cadre du focus */    
    z-index:999;
    user-select: none;
}

#btn_motbotKD_1
{
    position: absolute;
    font-size: 18px;
    overflow : hidden;
    color: white;
    background-color: rgb(199,21,133); 
    margin: 0px;
    padding: 0px;
    top: 682px;
    left: 100px;

    height: 35px;
    width: 35px;
    background-image: url('../sprites/b6m_btn_fleche_haut_sans_fond.png');  /* radial-gradient(circle at top left, rgb(216,191,216), rgb(255,153,255)); */
    background-size: 35px;
    background-color: rgb(16,128,255);   
        border-radius: 100%;
    visibility: visible;
    outline: 0;            /* chrome: pour supprimer cadre du focus */    
    z-index:999;
    user-select: none;
}
#btn_motbotKD0
{
    position: absolute;
    font-size: 18px;
    overflow : hidden;
    color: white;
    background-color: rgb(199,21,133); 
    margin: 0px;
    padding: 0px;
    top: 682px;
    left: 140px;
    
    height: 35px;
    width: 35px;
    background-image: url('../sprites/b6m_btn_fleche_horizontale_sans_fond.png');  /* radial-gradient(circle at top left, rgb(216,191,216), rgb(255,153,255)); */
    background-size: 35px;
    background-color: rgb(16,128,255);   
    
    visibility: visible;
    border-radius: 100%;
    outline: 0;            /* chrome: pour supprimer cadre du focus */
    z-index:999;
    user-select: none;
}

#btn_motbotKD1            
{
    position: absolute;
    font-size: 18px;
    overflow : hidden;
    color: white;
    background-color: rgb(199,21,133); 
    margin: 0px;
        padding: 0px;
    top: 682px;
    left: 180px;
    
    height: 35px;
    width: 35px;
    background-image: url('../sprites/b6m_btn_fleche_bas_sans_fond.png');  /* radial-gradient(circle at top left, rgb(216,191,216), rgb(255,153,255)); */
    background-size: 35px;
    background-color: rgb(16,128,255);   
    
    visibility: visible;
    border-radius: 100%;
    outline: 0;            /* chrome: pour supprimer cadre du focus */    
    z-index:999;
    user-select: none;
}
/* FIN CHEVALET JOUEUR *********************************************************************************** */


#btn_rotation       /* non utilsé */
{
    position: absolute;
    font-size: 18px;
    overflow : hidden;
    color: white;
    background-color: rgb(199,21,133); 
    margin: 0px;
    padding-left: 6px;
    padding-bottom: 2px;  
    top: 64px;
    left: 8px;
    width: 34px;
    height: 32px;
    visibility: visible;
    border-radius: 100%;
    z-index:998;
}

#tour
{
    position: absolute;
    font-family: Verdana, sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: white;
    background-color: rgb(0,0,128);
    margin: 0px;
    left: 408px;
    top:360px;
    width: 54px;
    height: 54px; 
   
    border-radius: 100%;
    z-index:4;
    user-select: none;
}

.border_tour {
    position: relative;
    border: 2px solid white;
    height: 14rem;
    width: 10rem;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.border_tour:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 100%;
  border: 2px dotted yellow;
  animation: rotate_tour 50s linear infinite;
  user-select: none;
}
  
@keyframes rotate_tour {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
}

/* espace plateau de jeu ********************************************************************************** */
 
#plateau
{
  /*  -webkit-filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.6) );  */  
  /*  filter : drop-shadow(7px 7px 7px rgba(0,0,0,0.6));   plateau_zoomable      */
  /*  position: absolute;   en enlevant cette ligne, Bootstrap centre le plateau*/
  /*   padding-left: 10px;  */
    position: absolute;     /* important pour bootstrap pour bloquer l'écran en scroll vert. et hor. ) */
    margin: 0px;
    left: 0px;
    right: 0px;
    top: 0px;
    padding:0px;

  /*  width: 478px;/411px;*/
  /*  height: 465px; 460px; 
    background-image: url('../sprites/b6m_cadre_ruche.png');  /* radial-gradient(circle at top left, rgb(216,191,216), rgb(255,153,255)); */
  /*  background-size: 35px;  */
    
    border-radius: 5px;
    border: 2px solid cyan;  
   /* overflow: hidden; */ 
}  

.zoomscroll
{
     /*overflow: scroll; /*none; /* scroll;*/
}

/*Hide=rend invisible les  scrollbar for Chrome, Safari and Opera */
.zoomscroll::-webkit-scrollbar {
    display: none;
}

/*Hide=rend invisible les scrollbar for IE, Edge and Firefox */
.zoomscroll {
  -ms-overflow-style: none; 
  scrollbar-width: none;  /* Firefox */
}   

.plateau_zoomable
{
    position: relative; /* TRES IMPORTANT pour que le plateau de jeu soit accessible via les scrollbars en mode Zoom++ */
    padding: 0px;
    margin: 0px;
    width: 000px;
    height: 000px;  
}

.plateau_zoom {                 /*  1.83=42/27 rapport tailles alavéoles sur chevalet et sur le plateau   */
-webkit-transform:scale(1.7);  /* Safari et Chrome */
-moz-transform:scale(1.7);     /* Firefox */
-ms-transform:scale(1.7);      /* Internet Explorer 9 */
-o-transform:scale(1.7);       /* Opera */
transform:scale(1.7);             
}    

#ejs_heure
{
      position: absolute;
      font-family: 'Orbitron', sans-serif;  
      font-weight : bold; 
      font-size: 13px;
      z-index:1000;
}

#btn_p2_p3
{
    position: absolute;
    padding: 0px;
    font-size: 16px;
    overflow : hidden;
    color: white;
    border-radius: 4px;
    background-image: url('../sprites/b6m_btn_page_G_D.png');  
    background-color: rgb(255,215,0); 
    visibility: visible;
    z-index:1002;
    user-select: none;
}
#btn_p2_p3:active {     /* effet bouton très enfoncé */
     background-color: rgb(127,255,0);  
}

#btn_p2_p1
{
    position: absolute;
    padding: 0px;
    top:500px;
    left:400px;
    font-size: 16px;
    overflow : hidden;
    color: white;
    border-radius: 4px;
    background-image: url('../sprites/b6m_btn_page_D_G.png');  
    background-color: rgb(255,215,0);  
    visibility: visible;
    z-index:1002;
    user-select: none;
}
#btn_p2_p1:active {     /* effet bouton très enfoncé */
     background-color: rgb(127,255,0);  
}

#btn_p1_p2
{
    position: absolute;
    padding: 0px;
    font-size: 16px;
    overflow : hidden;
    color: white;
    border-radius: 4px;
    background-image: url('../sprites/b6m_btn_page_G_D.png');  
    background-color: rgb(255,215,0);  
    visibility: visible;
    z-index:1000;
    user-select: none;
}
#btn_p1_p2:active {     /* effet bouton très enfoncé */
     background-color: rgb(127,255,0);  
}

#btn_p3_p2
{
    position: absolute;
    padding: 0px;
    font-size: 16px;
    overflow : hidden;
    color: white;
    border-radius: 4px;
    background-image: url('../sprites/b6m_btn_page_D_G.png');  
    background-color: rgb(255,215,0);  
    visibility: visible;
    z-index:1000;
    user-select: none;
}
#btn_p3_p2:active {     /* effet bouton très enfoncé */
     background-color: rgb(127,255,0);  
}
#btn_remet_lettres_sur_chevalet    /* b6m_btn_remet_sur_chevalet_sans_fond bouton pour remettre sur le chevalet les lettres posées dans le tour sur le plateau */
{
    position: absolute;
    padding: 0px;
    font-size: 16px;
    overflow : hidden;
    color: white;
    background-color: rgb(0,0,128); 
    border-radius: 4px;
    background-image: url('../sprites/b6m_btm_replace_lettres_sans_fond.png');  /* radial-gradient(circle at top left, rgb(216,191,216), rgb(255,153,255)); */
    background-color: rgb(0,0,128);   
    visibility: visible;
 /*     outline: 0;            /* chrome: pour supprimer cadre du focus */    
    z-index:1000;
    user-select: none;
}

#btn_remet_lettres_sur_chevalet:active {     /* effet bouton très enfoncé */
     background-color: rgb(127,255,0);  
}
    
#valider_joueur       /* bouton VALIDER */
{
    position: absolute;
    margin: 0px;
    padding: 0px;
 
    border-radius: 4px;
    background-image: url('../sprites/b6m_btn_butiner3_sans_fond.png');  /* radial-gradient(circle at top left, rgb(216,191,216), rgb(255,153,255)); */

    background-color: rgb(0,0,128);  

    visibility: visible;
  /*  outline: 0;            /* chrome: pour supprimer cadre du focus */
    z-index:1000;
    user-select: none;
} 

#valider_joueur:active {     /* effet bouton très enfoncé */

     background-color: rgb(127,255,0);    
}


#btn_tester    /* bouton TESTER */
{
    position: absolute;
    padding: 0px;
    left: 75px;
    top: 590px;
    width: 35px;
    height: 35px;
    border-radius: 4px;
    background-image: url('../sprites/b6m_btn_gouter_sans_fond.png');  /*radial-gradient(circle at top left, rgb(216,191,216), rgb(255,153,255));*/
    background-size: 35px;
    background-color: rgb(0,0,128);    
    visibility: visible;
 /*     outline: 0;            /* chrome: pour supprimer cadre du focus */
    z-index:1000;
    user-select: none;
} 

#btn_tester:active {     /* effet bouton très enfoncé */
     background-color: rgb(127,255,0);  
}

#pioche_echange      /* bouton ECHANGER */
{
    position: absolute;
    padding: 0px;
    left: 310px;
    top: 590px;
    width: 35px;
    height: 35px;
    border-radius: 4px;
    background-image: url('../sprites/b6m_btn_echanger_sans_fond.png'); /*radial-gradient(circle at top left, rgb(216,191,216), rgb(255,153,255));  */
    background-color: rgb(0,0,128);  
    color: rgb(0,0,139);
    visibility: visible;
  /*    outline: 0;            /* chrome: pour supprimer cadre du focus */
    z-index:1000;
    user-select: none;
} 

#pioche_echange:active {     /* effet bouton très enfoncé */
     background-color: rgb(127,255,0);  
}

/* espace chevalet où les hexagones et les lettres du chevalet s'affichent mais ne contient pas les boutons sinon Chrome plante *****   */
#espace_chevalet
{
    position: absolute;
    padding: 10px;
    padding-left: 30px;
    margin: 5px;
    left: 545px;                      
    top: 50px;
    width: 250px;
    height: 80px;
    border-radius: 15px;
    border: rgb(102,0,51) solid 1px;
    visibility: visible;
    background-image: radial-gradient(circle at top left, rgb(216,191,216), rgb(255,153,255,0.7));
    -webkit-filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.6) );        
    z-index:-1;
    user-select: none;   
} 
 
#nouveau_jeu
{
  position: absolute;
  /*top: 610px;
  left: 10px;   */
  width: 100px;
  height: 25px;
  z-index: 1000;
}

#MenuDifficulte
{
  position: absolute;
/*  top: 580px;
  left: 10px; /* 550px; */ 
  width: 100px;
  height: 25px;
  z-index: 1000;
  text-align: center;
}
            
 /* console ******************************************************************************************************   */
#espace_mots_trouves      
{
    /*display: block;*/
    position: absolute;
    padding-left: 30px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10 px;
    left: 20px;
    top: 170px;
    width: 400px;
    height: 400px;
    border-radius: 10px;
    border: rgb(255,69,0) solid 1px;
    font-size: 14px;
    /* background-image: radial-gradient(circle at top left, rgb(255,228,181,0.5),rgb(255,80,112));  fuschia */
    /* background-image: radial-gradient(circle at top left, rgb(0,191,255,0.5),rgb(30,144,255,0.9));   bleu */
    background-image: radial-gradient(circle at top left,rgb(255,228,225),rgb(205,92,92)); 

    visibility: visible;
    z-index:1000;
    overflow-y: scroll;
    -webkit-filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.6) ); 
    filter : drop-shadow(7px 7px 7px rgba(0,0,0,0.6));  
    user-select: none;
}

.consoleB6M     
{
   /* display: block; */
    position: absolute;
    margin: 0px;
    padding-left: 30px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10 px;  
/*    left: 20px;
    top: 170px;
    width: 400px;
    height: 400px; */
    border-radius: 10px;
    border: rgb(255,69,0) solid 1px;
    font-size: 14px;
    /* background-image: radial-gradient(circle at top left, rgb(255,228,181,0.5),rgb(255,80,112));  fuschia */
    /* background-image: radial-gradient(circle at top left, rgb(0,191,255,0.5),rgb(30,144,255,0.9));   bleu */
    /* background-image: radial-gradient(circle at top left,rgb(255,228,225),rgb(205,92,92));   */

    visibility: visible;
    z-index:1000;
    overflow-y: scroll;
    -webkit-filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.6) ); 
    filter : drop-shadow(7px 7px 7px rgba(0,0,0,0.6));  
    user-select: none;
}

.consoleB6M_histo_color     
{
    background-image: radial-gradient(circle at top left, rgb(0,191,255,0.5),rgb(30,144,255));   bleu */
}

.consoleB6M_tableau_color     
{
    background-image: radial-gradient(circle at top left,rgb(255,228,225),rgb(205,92,92)); 
}

.consoleB6M_aide_color     
{
    background-image: radial-gradient(circle at top left,rgb(153,204,153),rgb(0,204,51)); 
}

/* espace légende ******************************************************************************************************   */
#espace_legende
{
    position: absolute;
    padding-left: 30px;
    padding-right: 10px; 
    padding-top: 2px;
    left: 20px;
    top: 590px;
    width: 400px;
    height: 105px;
    font-size: 18px;
    border-radius: 10px;
    border: orange solid 1px;
    //box-sizing : content-box;
    background-image: radial-gradient(circle at top left, rgb(245,245,245,0.9),rgb(255,165,0)); 
    visibility: visible;
    z-index:2500;
    overflow:auto;
    -webkit-filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.6) );   
    filter : drop-shadow(7px 7px 7px rgba(0,0,0,0.6));  
    user-select: none;
}

/* espace chevalet MOBOT ******************************************************************************************   */
#espace_mobot
{
    position: absolute;
    padding-left: 30px;
    padding-right: 10px; 
    padding-top: 0px;
    left: 20px;
    top: 70px;
    width: 400px;
    height: 30px;
    font-family:  OCR A Std, monospace;
    font-size: 20px;    
    font-weight : bold; 
    border-radius: 10px;
    border: grey solid 1px;
    /*box-sizing : content-box;  */
    background-image: radial-gradient(circle at top left, rgb(245,245,245,0.9),rgb(135,135,135)); 
    /* background-color:   rgb(176,0,160,0.7); /* rgb(255,192,240,0.3);  */
    visibility: visible;
    z-index:1000;
    overflow:auto;
    -webkit-filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.6) );   
    filter : drop-shadow(7px 7px 7px rgba(0,0,0,0.6));  
    user-select: none;
}

/* alvéoles hexagonales du plateau***************************************************************************** */    
 
.hexacaseimg
{
  position : absolute;
  background-size: 27px;      /* très important: permet de redimensionner l'image dans un cadre de 25x25 px par expl */
 /*  height: 27px;  
   width: 27px;    */
  visibility: visible; 
  overflow : hidden;
  z-index: 998;
}

.hexacaseimg_chevalet      /*class des lettres sur le chevalet */
{
  position : absolute;
  background-size: 78px;    /*  très important: permet de redimensionner l'image dans un cadre de 65x65 px par expl    */
   height: 78px;            /*  VALEUR IDENTIQUE à VG_taillealveole_chevalet=60 du code JS !!!!!!!!!!!!!*/ 
   width: 78px; 
  visibility: visible; 
  overflow : hidden;
  user-select: text;
  z-index: 998;
}
    
.hexacase {          
  position : absolute;
  background-image: url('../lettres/b6m_caseV.png'); 
  background-size: 27px;      /* très important: permet de redimensionner l'image dans un cadre de 25x25 px par expl */
   height: 27px;  
   width: 27px; 
  visibility: visible; 
  overflow : hidden;
  user-select: none;
  z-index: 998;
}

.hexacase_chevalet {          
  position : absolute;
  background-image: url('../lettres/b6m_case_chevalet_sans_fond.png');
  /*background-size: 57px;      /* très important: permet de redimensionner l'image dans un cadre de 25x25 px par expl */
   height: 57px;  
   width: 57px;    */
  visibility: visible; 
  overflow : hidden;
  user-select: none;
  z-index: 998;
}

.indent { text-indent: 10%; }      /*indentation au départ du texte=alinéa pour une lettre dans l'hexagone */
.indent2 { text-indent: 2%;  }     /*indentation au départ du texte=alinéa pour deux lettres dans l'hexagone */
.pre { white-space: pre; }         /*Le texte passera à la ligne en fonction de son contenant*/
.nowrap { white-space: nowrap ;}   /*passage à la ligne */
.ombre_interne {  box-shadow: inset 0 0 1em gold, 0 0 2em red;}
.indice { vertical-align: bottom; color:red; font-size: 80%; font-weight : bold; } 
.marge {margin-left: 9px; }

.content {                       /* à laisser même vide, sinon on peut passer les data-content dans le :after */
  font-size: 19px;
 
 font-family:  OCR A Std, monospace; 
 /*   font-family: font_hexagonale ;   */
  font-weight : bold; 
}    

.content:after 
{ 
    padding-top: 7px;
    padding-left: 1px;
    /*font-family:  OCR A Std, monospace;  */
    /* font-size: 15px; */
    /*text-align: center;*/
       
    /* display: inline-flex;                /* permet de rendre zoomable les hexagones */
    content: attr(data-content);         /* récupère l'attribut date-content du div */
    overflow: hidden;                    /* évite que les écritures dépassent le périmètre de l'hexagone */    
}
              
/* add background images to :before pseudo-elements */
.content:before{
  /*  background-image: url("https://source.unsplash.com/random/150x150");    pour insérer une image dans l'hexagone */
}

.dropper {
    visibility: hidden;
   /* background-color: #555;   */
    border: 0px solid #111;    
    border-radius: 10%;
    transition: all 100ms linear;
}

.tenu:active
{
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
    cursor: grabbing;    
   /* background-color: red;    */
}

/*
==============================================
floating                               ****************************************************************************
==============================================
*/

.floating{
	animation-name: floating;
	-webkit-animation-name: floating;

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes floating {
	0% {
		transform: translateY(0%);	
	}
	50% {
		transform: translateY(7%);	
	}	
	100% {
		transform: translateY(0%);
	}			
}

@-webkit-keyframes floating {
	0% {
		-webkit-transform: translateY(0%);	
	}
	50% {
		-webkit-transform: translateY(7%);	
	}	
	100% {
		-webkit-transform: translateY(0%);
	}			
}

/*! * * * * * * * * * * * * * * * * * * * *\  
  CSShake :: shake-slow
  v1.5.0
  CSS classes to move your DOM
  (c) 2015 @elrumordelaluz
  http://elrumordelaluz.github.io/csshake/
  Licensed under MIT
\* * * * * * * * * * * * * * * * * * * * */
.shake-freeze {
  display: inherit;
  transform-origin: center center; 
  animation-play-state: running; }

@keyframes shake-freeze {
  2% {
    transform: translate(2px, 1px) rotate(-0.5deg); }
  4% {
    transform: translate(-5px, -9px) rotate(-2.5deg); }
  6% {
    transform: translate(5px, 3px) rotate(2.5deg); }
  8% {
    transform: translate(5px, 4px) rotate(1.5deg); }
  10% {
    transform: translate(-4px, -8px) rotate(-0.5deg); }
  12% {
    transform: translate(-2px, -9px) rotate(1.5deg); }
  14% {
    transform: translate(0px, 6px) rotate(3.5deg); }
  16% {
    transform: translate(8px, 2px) rotate(2.5deg); }
  18% {
    transform: translate(-4px, -1px) rotate(1.5deg); }
  20% {
    transform: translate(10px, 2px) rotate(-2.5deg); }
  22% {
    transform: translate(-2px, -4px) rotate(1.5deg); }
  24% {
    transform: translate(-8px, 5px) rotate(-0.5deg); }
  26% {
    transform: translate(-3px, -5px) rotate(3.5deg); }
  28% {
    transform: translate(6px, 2px) rotate(2.5deg); }
  30% {
    transform: translate(-5px, -2px) rotate(2.5deg); }
  32% {
    transform: translate(5px, -6px) rotate(-2.5deg); }
  34% {
    transform: translate(5px, -7px) rotate(-1.5deg); }
  36% {
    transform: translate(3px, -9px) rotate(0.5deg); }
  38% {
    transform: translate(6px, -2px) rotate(-0.5deg); }
  40% {
    transform: translate(-4px, -2px) rotate(0.5deg); }
  42% {
    transform: translate(7px, -8px) rotate(1.5deg); }
  44% {
    transform: translate(-4px, 10px) rotate(-1.5deg); }
  46% {
    transform: translate(-3px, 8px) rotate(-1.5deg); }
  48% {
    transform: translate(3px, 6px) rotate(-0.5deg); }
  50% {
    transform: translate(4px, -1px) rotate(-2.5deg); }
  52% {
    transform: translate(1px, 5px) rotate(-0.5deg); }
  54% {
    transform: translate(-3px, 7px) rotate(-2.5deg); }
  56% {
    transform: translate(3px, 3px) rotate(-2.5deg); }
  58% {
    transform: translate(-8px, -5px) rotate(-1.5deg); }
  60% {
    transform: translate(1px, -9px) rotate(3.5deg); }
  62% {
    transform: translate(0px, -3px) rotate(-0.5deg); }
  64% {
    transform: translate(4px, 2px) rotate(2.5deg); }
  66% {
    transform: translate(4px, 10px) rotate(1.5deg); }
  68% {
    transform: translate(1px, 2px) rotate(-2.5deg); }
  70% {
    transform: translate(-9px, 10px) rotate(0.5deg); }
  72% {
    transform: translate(-5px, -8px) rotate(0.5deg); }
  74% {
    transform: translate(-3px, -8px) rotate(3.5deg); }
  76% {
    transform: translate(-1px, 8px) rotate(3.5deg); }
  78% {
    transform: translate(-5px, -4px) rotate(0.5deg); }
  80% {
    transform: translate(-6px, 1px) rotate(1.5deg); }
  82% {
    transform: translate(-5px, -7px) rotate(1.5deg); }
  84% {
    transform: translate(1px, -6px) rotate(-0.5deg); }
  86% {
    transform: translate(-8px, -4px) rotate(3.5deg); }
  88% {
    transform: translate(-6px, 7px) rotate(-1.5deg); }
  90% {
    transform: translate(9px, 6px) rotate(-2.5deg); }
  92% {
    transform: translate(9px, -8px) rotate(3.5deg); }
  94% {
    transform: translate(3px, 3px) rotate(2.5deg); }
  96% {
    transform: translate(-6px, -7px) rotate(2.5deg); }
  98% {
    transform: translate(5px, -2px) rotate(-0.5deg); }
  0%, 100% {
    transform: translate(0, 0) rotate(0); } }

.shake-freeze {
  animation-name: shake-freeze;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; }
/*

/* rotation complète avec effet zoom */
.rotate-scale-up {
	-webkit-animation: rotate-scale-up 0.65s linear both;
	        animation: rotate-scale-up 0.65s linear both;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-8-31 17:2:8
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation rotate-scale-up
 * ----------------------------------------
 */
@-webkit-keyframes rotate-scale-up {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(2) rotateZ(180deg);
            transform: scale(2) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
  }
}
@keyframes rotate-scale-up {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(2) rotateZ(180deg);
            transform: scale(2) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
  }
}


/* class effet FLIP axe vertical droite */

.flip-vertical-right {
	-webkit-animation: flip-vertical-right 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: flip-vertical-right 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

  /* ----------------------------------------------
 * Generated by Animista on 2020-8-31 17:5:53
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-vertical-right
 * ----------------------------------------
 */
@-webkit-keyframes flip-vertical-right {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
}
@keyframes flip-vertical-right {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
}

/* Halo lumineux */
.light div {
	position: relative;
}
.light div::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(255,255,255,.2);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
};

.light div:hover::before {
	-webkit-animation: circle .75s;
	animation: circle .75s;
};

@-webkit-keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
};
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
};