/* ---------------------- Body ----------------------- */
body {
    font-size: 1.2em;
}


/* ---------------- Bandeau menu ---------------------*/
 /* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  /*color: #f2f2f2;*/
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav_active {
  background-color: #ffdd88;
  color: black;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon_bars {
  display: none;
}

 /* When the screen is less than 800 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width:800px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon_bars {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon_bars {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}



/*------------------------ Menu principal ------------------ */
.menu {
    display:inline-block;
    padding : 0px ;
}
.menu li {
    list-style-type: none ;       /* Suppression des puces */
}


.menu a {
    display:block;                /* Transformation en block */
    width : 15em;

    margin: 0.5rem;               /* Marges externes (1 valeurs = 4 directions) */
    padding: 0.4rem 0;            /* Marges internes (2 valeurs = haut/bas et gauche/droite)*/
    text-align: center;           /* Centrage du texte */

    color: #323437;             /* Couleur du texte */
    text-decoration: none;        /* Suppression du soulignement */
    border: 1px solid #323437;  /* Ajout d'une bordure */
    border-radius: 4px;           /* Arrondis des bordures */
}



.menu a:hover {
  background-color: #ddd;
  color: black;
}

.icon_left {
    float: left;
    margin-left: 20px;
    background-color: tomato;
}


#level {
    padding: 12px 15px;
    margin-left : 25% ;
    margin-right : 25%;
    margin-top : -30px;
    margin-bottom: 30px;
    text-align: left;
    background-color: white;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 16px 24px 2px rgba(100,100,100,0.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.2);
    text-align: center;
} 



/*----------------------- Interfaces --------------------------*/
.main {
    background: #fff;
    margin: 0px 30px 0;
    padding-top: 30px;
    padding-bottom: 30px;
    border-radius: 0 0 6px 6px;
    /*-webkit-box-shadow: 0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.2);*/
    box-shadow: 0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.2);
}

/*----------------------- Chrono, calculs et réponses --------------------------*/

#instructions{
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

#consigne{
    text-align: center;
    font-style: italic;
    margin-top: 20px;
}

#calcul{
    display: flex;                /* Transformation en flexbox */
    align-items: center;
    justify-content: center;
}

#operation {
    font-family: "Times New Roman", serif;
}

#solution {
    text-align: center;
    font-style: italic;
    font-family: "Times New Roman", serif;
}

.icon{
    height : 30px;
    margin-right: 0.2em;
    vertical-align:middle;
}

.reponse {
    margin-right: 15px;
}

#chrono_div {
    width : 10rem ;
    margin-top : 0.5rem ;
    margin-bottom: 1rem;
    padding: 0.4rem 0;            /* Marges internes (2 valeurs = haut/bas et gauche/droite)*/
    text-align: center;           /* Centrage du texte */
    border: 1px black solid;
    border-radius: 4px;
    color : black ;
}

#chrono_malus {
    z-index: 1;                     /* Passer au dessus des autres */
    position: absolute;             /* Se cale sur le parent en relatif le plus proche */
    border: 1px red solid;          /* Bordure */
    background-color: red;          /* Couleur du fond */
    opacity: 0.8;                   /* Opacité */
    border-radius: 1.2rem;          /* Bords ronds */
    width : 2.4rem ;                /* Largeur */
    height: 2.4rem;                 /* Hauteur */
    line-height: 2.4rem;            /* Hauteur de la ligne de texte */
    top: -1.2rem;                   /* Décalage haut   par rapport au parent relatif */
    right: -1.2rem;                 /* Décalage droite par rapport au parent relatif */
}

#user_div {
    width : 10rem ;
    margin-top : 0.5rem ;
    margin-bottom: 1rem;
    padding: 0.4rem 0;            /* Marges internes (2 valeurs = haut/bas et gauche/droite)*/
    text-align: center;           /* Centrage du texte */
    color : black ;
}


/*---------------- Messages d'erreur et score-------------------*/
#bandeau_inf{
    display: flex;                /* Transformation en flexbox */
    margin-left: 20%;
    margin-right: 20%;
    margin-top: 50px;
    justify-content: center;
}

#message{
    vertical-align: middle;
    padding:20px;
    width : 50%;
    border-radius: 6px ;
    border: 1px solid black;
    margin-right: 1%;
}

#message p{
    margin : 0
}

.erreur{
    background-color: tomato;
}

.success {
    background-color: greenyellow;
}

.warning {
    background-color: lightyellow;
}

.default {
   background-color: white;
}

#div_icon_message {
    display:inline-block;
    vertical-align:middle;
    background: none ;
    margin-right: 0.2em;

}

#score{
    margin-left: 1%;
    width : 20%;
    padding:20px;
    border-radius: 6px ;
    border: 1px solid black;
    text-align: center;
    vertical-align:middle;
    display: table-cell;
}

#score p{
    margin: 0;
}

.bouton{
    margin : auto ;
    /*width : 30% ;*/
    margin-top : 0.5rem ;
    margin-bottom: 0.5rem;
    padding: 0.4rem 0;            /* Marges internes (2 valeurs = haut/bas et gauche/droite)*/
    text-align: center;           /* Centrage du texte */
    border: 1px black solid;
    border-radius: 4px;
    color : black ;
    cursor: pointer;
}

.bouton:hover {
  background-color: #ddd;
  color: black;
}


/* ===================== Graphics ===================== */
canvas {
    /*border : 1px solid black;*/
    display: block;
    margin: auto ;
}
#explication {
    border : solid black 1px ;
}

.nav {
    width : 40% ;
    height : 1em;
    text-align : center;
    font-size: 2em;
    vertical-align: top;
    padding : 5px;
}

.nav_actif {
    color : black
}

.nav_inactif {
    color : #dddddd;
}

#texte_explication{
    /*vertical-align: top;*/
    height: 300px;
    margin : 20px;
    padding: 20px;
    border: 1px black solid;
    border-radius: 6px 6px 6px 6px;
}


/* Style de la table */
#table_explication {
  width: 90%;
  border-collapse: separate; /* Pour espacer les cellules */
  border-spacing: 20px; /* Espacement les cellules */
  font-family: 'Segoe UI', Arial, sans-serif;
  border-radius: 10px;
  overflow: hidden; /* Pour masquer les débordements des ombres */
}


/* Style des cellules (td) */
#table_explication td {
  padding: 12px 15px;
  text-align: left;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 10px 10px 2px rgba(0,0,0,.14),0 6px 10px 5px rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.2);
  margin: 5px 0; /* Espacement vertical */
}

/* Style des lignes (tr) */
#table_explication tr {
  padding: 0 px; 
}

/* Licence creative commons et version */
#licence_version {
    text-align: center ;
    color: darkgray;
    margin-top: 20px;
}

#licence_version a{
    color: darkgray ;
}
/* ===================== Interface 3 : message ================== */
.container-img-texte {
    text-align: left;
}
#img-texte  {
    color: black;
    width : 400px;
}
#image_interface_message {
    margin-right:15px;
    vertical-align: middle;
}

a {
    color : #ffdd88;
}