@font-face {
    font-family: 'Gloria Hallelujah';
    src: url('font/cursif-webfont.eot');
    src: url('font/cursif-webfont.eot?#iefix') format('embedded-opentype'),
        url('font/cursif-webfont.woff2') format('woff2'),
        url('font/cursif-webfont.woff') format('woff'),
        url('font/cursif-webfont.ttf') format('truetype'),
        url('font/cursif-webfont.svg#cursif') format('svg');
    font-weight: normal;
    font-style: normal;
}

#imprimer {
    display: none;
}


math,
math[mode="inline"] {
    display: inline;
    font-family: Gloria Hallelujah, CMSY10, CMEX10, Symbol, Times;
    font-style: normal;
}

math[mode="display"] {
    display: block;
    text-align: center;
    font-family: Gloria Hallelujah, CMSY10, CMEX10, Symbol, Times;
    font-style: normal;
}

.fraction {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.2em 0.4ex;
    text-align: center;
}

.fraction>span {
    display: block;
    padding-top: 0.15em;
}

.fraction span.fdn {
    border-top: thin solid black;
}

.fraction span.bar {
    display: none;
}


.bouton {
    border: none;
    text-align: center;

    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 0 50px rgba(0, 0, 0, 0.1) inset;
    border-radius: 5px;
    /*
	color: #444444;
*/

    font: 100%/100% Gloria Hallelujah, Arial, Helvetica, sans-serif;
    height: 52px;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;

    padding-top: 10px;
    text-align: center;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 0 50px rgba(0, 0, 0, 0.1) inset;
    cursor: pointer;
    text-decoration: none;
}

.bouton:hover {
    text-decoration: none;
    background-color: #ffd34e;
}

#message {
    border: none;
    text-align: center;
    background-color: #e9d8ff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 0 50px rgba(0, 0, 0, 0.1) inset;
    border-radius: 5px;
    /*
	color: #444444;
*/

    font: 100% Gloria Hallelujah, Arial, Helvetica, sans-serif;
    margin: auto;

    margin-top: 10px;
    margin-bottom: 10px;
    /*width:400px;*/
    width: calc(100% - 300px);

    padding: 10px;
    text-align: center;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 0 50px rgba(0, 0, 0, 0.1) inset;
}

h1 {
    font: 150%/100% Gloria Hallelujah, Arial, Helvetica, sans-serif;
    font-weight: bold;
}

#aide {
    opacity: 0.8;
    border: none;
    text-align: center;
    background-color: #ebf9a9;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 0 50px rgba(0, 0, 0, 0.1) inset;
    border-radius: 5px;
    /*
	color: #444444;
*/
    font: 100%/100% Gloria Hallelujah, Arial, Helvetica, sans-serif;
    Line-Height: 2;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;

    width: 600px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 0 50px rgba(0, 0, 0, 0.1) inset;
}

.consigne {
    border: none;
    text-align: center;
    background-color: #edffe7;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 0 50px rgba(0, 0, 0, 0.1) inset;
    border-radius: 5px;
    /*
	color: #444444;
*/


    font: 120%/100% Gloria Hallelujah, Arial, Helvetica, sans-serif;
    margin: auto;
    margin-bottom: 20px;
    margin-top: 20px;
    padding: 10px;
    Line-Height: 2;
    text-align: center;
    /*width:400px;*/
    width: calc(100% - 300px);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 0 50px rgba(0, 0, 0, 0.1) inset;
    position: relative;
    user-select: text;

}



.reponse {
    border: none;
    text-align: center;
    background-color: #fffbc4;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 0 50px rgba(0, 0, 0, 0.1) inset;
    border-radius: 5px;
    /*
	color: #444444;
*/

    font: 120%/100% Gloria Hallelujah, Arial, Helvetica, sans-serif;
    margin: auto;
    margin-bottom: 20px;
    padding: 10px;
    Line-Height: 1.5;
    text-align: center;
    /*width:400px;*/
    width: calc(100% - 300px);
    min-height: 30px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 0 50px rgba(0, 0, 0, 0.1) inset;
    position: relative;
}

.etape {
    border: none;
    text-align: center;
    background-color: #eeede3;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 0 50px rgba(0, 0, 0, 0.1) inset;
    border-radius: 5px;
    color: #444444;

    font: 120%/100% Gloria Hallelujah, Arial, Helvetica, sans-serif;
    margin: auto;
    margin-bottom: 20px;
    padding: 10px;
    Line-Height: 1.5;
    text-align: center;
    width: 400px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 0 50px rgba(0, 0, 0, 0.1) inset;
    position: relative;
}

html {
    height: 100%;
    /*touch-action: none;désactive pool down refresh*/
    user-select: none;

}

body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    /*max-width:800px;*/
    min-width: 650px;
    user-select: none;


}

#auteur {
    bottom: 0px;
    position: relative;
    opacity: 0.8;

}

/*--------------*/
nav {
    width: 100%;
    background-color: #424558;
    font: 120%/100% Gloria Hallelujah, Arial, Helvetica, sans-serif;


}

nav>ul {
    margin: 0px;
    padding: 0px;
}

nav>ul>li {
    float: left;
    position: relative;
}

nav li {
    list-style-type: none;


}

.sousmenu {
    display: none;
}

nav li:hover .sousmenu {
    display: inline-block;
    position: absolute;
    top: 100%;
    left: 0px;
    padding: 0px;
    z-index: 100000;
}

nav>ul::after {
    content: "";
    display: block;
    clear: both;
}

nav a {
    display: inline-block;
    text-decoration: none;
}

nav>ul>li>a {
    padding: 20px 30px;
    color: #FFF;
}

.sousmenu li {
    border-bottom: 1px solid #CCC;

}

.sousmenu li a {
    padding: 15px 30px;
    /*font-size :13px;*/
    color: #222538;
    width: 250px;
    cursor: pointer;
}

.menu1:hover {
    border-top: 5px solid #e44d26;
    background-color: rgba(228, 77, 38, 0.15);
}

.menu2:hover {
    border-top: 5px solid #0070bb;
    background-color: rgba(000, 112, 192, 0.15);
}

.menu3:hover {
    border-top: 5px solid #f1dc4f;
    background-color: rgba(241, 211, 79, 0.15);
}

.menu4:hover {
    border-top: 5px solid #00fbff;
    background-color: rgba(16, 213, 216, 0.15);
    cursor: pointer;
}

nav>ul>li:hover a {
    padding: 15px 30px 20px 30px;

}

.menu4 {
    float: right;
}

.menu1 .sousmenu {
    background-color: rgb(230, 100, 40);
}

.menu2 .sousmenu {
    background-color: rgb(000, 160, 240);
}

.menu3 .sousmenu {
    background-color: rgb(251, 216, 99);
}

.sousmenu li:hover a {
    color: #EEE;
    font-weight: bold;
}

.menu1 .sousmenu li:hover {
    background-color: rgb(210, 77, 60);
}

.menu2 .sousmenu li:hover {
    background-color: rgb(000, 115, 200);
}

.menu3 .sousmenu li:hover {
    background-color: rgb(191, 187, 75);
}

.cadreforce {
    display: inline-block;
    width: 100px;

    padding: 20px 0px;

    left: 0px;
    text-align: center;
    position: absolute;
    font: 100%/100% Gloria Hallelujah, Arial, Helvetica, sans-serif;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25), 0 0 50px rgba(0, 0, 0, 0.1) inset;
    border-radius: 5px;
    margin-left: 5px;
}


.frac {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    letter-spacing: 0.001em;
    text-align: center;

}

.frac>span {
    display: block;
    padding: 0.1em;
}

.frac span.bottom {
    border-top: thin solid black;
}

.frac span.symbol {
    display: none;
}

#entree {
    display: none;
}


#reponsedonnee {
    font-size: 150%;
}


kbd {
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
    color: #333;
    display: inline-block;
    font-size: 180%;
    font-weight: 700;

    padding: 2px 4px;
    white-space: nowrap;
}


#keypad,
#keypad2 {
    margin: auto;
    margin-top: 20px;

}

#keypad tr td,
#keypad2 tr td {
    vertical-align: middle;
    text-align: center;
    border: 1px solid #000000;
    font-size: 32px;
    font-weight: bold;
    width: 80px;
    height: 60px;
    cursor: pointer;
    background-color: #666666;
    color: #CCCCCC;
    border-radius: 15px;
}

#tableaide {
    border-collapse: collapse;
    border: 1px solid black;
    vertical-align: middle;
}

#tableaide td {
    border-collapse: collapse;
    border: 1px solid black;
    vertical-align: middle;
    padding: 10px;
}


nav li:hover .sousmenu2 {
    display: inline-block;
    position: absolute;
    top: 100%;
    left: 0px;
    padding: 0px;
    z-index: 100000;
}

.sousmenu2 {
    display: none;
    padding: 15px 30px;
    width: 150px;
    line-height: 36px;
}

.sousmenu2 li {
    border-bottom: 1px solid #CCC;

}

.sousmenu2 li a {
    padding: 15px 30px;
    /*font-size :13px;*/
    color: #222538;
    cursor: pointer;
}

.sousmenu2 li:hover a {
    color: #EEE;
    font-weight: bold;
}

.menu4 .sousmenu2 {
    background-color: rgb(155, 99, 228);
}