:root{
    --color_1:#004264;
    --color_2:#82B0D2;
}
html,body{
    min-height: 100vh;
}
.m-t-30{margin-top: 30px;} 
.m-b-30{margin-bottom: 30px;}
.p-l-30{padding-left: 30px;}
.p-r-30{padding-right: 30px;}
body{
display: flex;
margin: 0;

}
/*Barre de navigation*/
#navbar{
    display: flex;
    flex-direction: column;
    background: var(--color_1);
    width: 200px;
    justify-content: space-between;
    transition: all 0.25s linear;
}
#navbar.small{
    width: 50px;
}

#navbar .lien_section{
    color: var(--color_1);
    text-decoration: none;
    height: 80px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: var(--color_2);
    border:1px solid #333;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
}
#navbar.small .lien_section .texte{
    display: none;
}

#navbar .lien_section .picto{
    width: 30px;
}
#navbar .lien_section.active .picto,
#navbar .lien_section .picto_active{
display: none;
}
#navbar .lien_section .picto,
#navbar .lien_section.active .picto_active{
display: block;
width: 30px;
}
#navbar .lien_section.active{
    color: #fff;
    font-weight: 900;
    /* font-size: 1.25em; */
    background-color: var(--color_1);
}
#navbar .lien_section.logo,
#navbar .lien_section.logo img{
    padding: 0;
    height: 70px;
    max-width: 100%;
    max-height: 100%;
}

#navbar #burger{
    width: 50px;
    align-self: center;
    margin-bottom: 20px;
    cursor: pointer;
}

#navbar.small #burger{
    width: 30px;
}
/*Fin barre navigation*/

#wrapper_main{
    display: flex;
    flex-direction: column;
    width: 100%;
}
#wrapper_main header{
    height: 70px;
    box-shadow: 3px 3px 3px #ccc;
    background: #004264;
    color: white;
    text-align: center;
}
#main{
    padding: 20px;
}

.action-button{
    width: 200px;
    height: 50px;
    cursor: pointer;
    border: 0;
    color: white;
    font-family: roboto;
    font-size: 1.1em;
}


.action-button.dark{
    background: var(--color_1);
    box-shadow: 3px 3px 3px var(--color_2);
}
.action-button.light{
    background: var(--color_2);
    box-shadow: 3px 3px 3px var(--color_1);
}


.button_generator { 
    width: 100px;
    height: 100px;
    border: 0;
    background: #004264;
    color: white;
    font-size: 3em;
    cursor: pointer;

}

.button_generator img{
    width: 70%;
    margin-left: auto;
    margin-right: auto;

}


/*On gère l'affichage des fractions*/
.fraction{
    display: flex;
    flex-direction: column;
    padding-left: 5px;
    padding-right: 5px;
}
.fraction .denominateur{
    border-top: 1px solid black;
  text-align: center;
}
#resultat.hidden{
    display: none;
}
.resultat{
    width: fit-content;
}

.placeholder{
    font-style: italic;
    color: #777;
}

#navbar-secondary{
    display: flex;
    height: 85px;
    margin-top: 0;
    border-top: 2px solid #333;
    background-color: var(--color_2);
}
#navbar-secondary > a {
    padding: 10px;
    text-decoration: none;
    color: #004264;
    font-family: Roboto;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border:2px solid #333 */
}
#navbar-secondary > a.active{
    background-color: var(--color_1);
    color: #fff;
}
section.section.hidden{
    display: none;
}
section.section{
    display: flex;
}
section.section-column{

    flex-direction: column;
}

.hidden{
    display: none;
}