@font-face{
    font-family: Nunito;
    src: url(Nunito.ttf);
}

body{
    margin: 0;
    padding: 0;
    /* background: linear-gradient(to right, #8c52ff, #ff914d); */
    background-color: #262A49;
    /* background-image: url("../IMG/pile_livres.png");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 90% 90%; */
    color: white;
    font-size: 1.1em;
}

body, button {
    font-family: "Nunito", Arial, Helvetica, sans-serif;
}

/* La taille du texte des boutons ne réagit pas pareil que pour le reste */
/* button{
    font-size: 1.1em;
} */

body,header,main,footer,div{
    display: flex;
    flex: 1;
}

header{
    flex: none;
    max-height: 15vh;
    color: white;
    /* background-color: #31365c;
    border-bottom: solid 3px white;
    box-shadow: 0px 4px 10px black; */
    text-shadow: 2px 2px 4px #000000;
}

footer{
    justify-content: center;
    font-size: 0.8em;
    height: 7vh;
    flex: none;
}

a{
    color: white;
}

.banniere{
    justify-content: center;
}

.banniere img{
    object-fit: contain;
    max-width: 100%;
}

.contenu{
    background-color: #31365c;
    border-radius: 1em;
    padding: 1em;
}

.contenu h1:first-child{
    margin-top: 0;
}

#selectBoites, button{
    background-color: #262A49;
    color: white;
}

#selectBoites{
    height: 2em;
    border-radius: 0.5em;
    min-width: 15em;
}

.entete{
    background-color: #262A49;
    font-weight: bold;
    padding: 0.5em;
}

.bgcBleu{
    background-color: #262A49;
}

.ligneLivre{
    padding: 0.5em;
}

.livre{
    flex: 3;
}

.etat img{
    height: 1.2em;
    cursor: pointer;
}

.etat div{
    justify-content: center;
}

.historique{
    font-size: 0.8em;
    margin-top: 0.5em;
}

.divMenu{
    position: fixed;
    bottom: 0;
    width: 100%;
}

.barreMenu{
    flex: 2;
    background-color: #31365c;
    border-top: 1px solid white;
    height: 5vh;
    padding: 0.5em 0;
}

.barreMenu div a{
    width: 100%;
}

.barreMenu a img{
    object-fit: contain;
    height: 100%;
}

.divCircuit{
    padding: 0.5em;
    margin: 0.2em 0;
    border-radius: 0.5em;
}

.aCircuit{
    text-decoration: none;
}

#messageEtat{
    padding: 1em;
    font-weight: bold;
    margin-bottom: 1em;
    justify-content: center;
    display: none;
}

.etatTrue{
    background-color: rgb(134, 201, 33);
}

.etatFalse{
    background-color: rgb(255, 110, 110);
}

#fondNoir{
    background-color:rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: absolute;
}

#fenetreSuppression{
    position: fixed;
    bottom: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    padding: 1em;
    background-color: #262A49;
}

/* Outils */

.justifyContentCenter{
    justify-content: center;
}

.textAlignCenter{
    text-align: center;
}

.alignItemsCenter{
    align-items: center;
}

.displayNone{
    display: none;
}

.colonne, .colonneGrandEcran{
    flex-direction: column;
}

.flexNone{
    flex: none;
}
.flex05{flex: 0.5;}
.flex1{flex: 1;}
.flex2{flex: 2;}
.flex3{flex: 3;}
.flex4{flex: 4;}
.flex5{flex: 5;}
.flex6{flex: 6;}
.flex7{flex: 7;}
.flex8{flex: 8;}
.flex9{flex: 9;}
.flex10{flex: 10;}
.espaceH1{
    flex: none;
    height: 1vh;
}
.espaceH2{
    flex: none;
    height: 2vh;
}
.espaceH3{
    flex: none;
    height: 3vh;
}
.espaceH5{
    flex: none;
    height: 5vh;
}
.espaceH7{
    flex: none;
    height: 7vh;
}
.espaceH10{
    flex: none;
    height: 10vh;
}

/* Smartphone */

@media screen and (max-width: 1220px) {
    .bordsGrandEcran{
        display: none;
    }

    .contenu{
        margin: 0 0.7em;
    }

    .colonneSmartphone{
        flex-direction: column;
    }

    /* .banniere{
        flex: 2;
    } */

    /* header, .cadreCroixMenu{
        max-height: 12vh;
    } */

    /* .cadreHamburger{
        display: flex;
    } */

    /* .menuMobile{
        height: 100vh;
        width: 100vw;
    } */
    
    /* @media (orientation: landscape) {
        header {
            max-height: 30vh;
        }
    } */
}