/*---------------------Body---------------------*/
html{
    height: 100%;
}

body{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family:Bahnschrift Light;
    background-color:#e8e7e2;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

img{
    margin: 0;
    padding: 0;
    max-height: 100%;
    max-width: 100%;
}

/*---------------------Header---------------------*/
header{
    margin: 0;
    padding: 0 25px;
    background-color: #596d80;
}


/*logo*/
header .logo {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    display: inline-block;
    height: max(11.5vh, 80px);
}

.logo-quizz{
    position: absolute;
    left: 25px;
    top: 0;
}

.logo-ensat{
    position: absolute;
    right: 25px;
    top: 0;
}


/*Header milieu*/
header .milieu{
    margin: max(1vh, 7px) auto;
    padding: 0;
    display: inline-block;
    vertical-align: top;
    min-height: max(9.5vh, 66px);
    width: 100%;
    text-align: center;
}

header .milieu h1{
    box-sizing: border-box;
    margin: 0;
    padding: 0 max(calc(9.5vh + 25px), 91px);
    display: inline-block;
    height: max(9.5vh, 66px);
    width: fit-content;
    font-family:Maiandra GD;
    font-size: max(6vh, 42px);
    line-height: max(9.5vh, 66px);
    color: #e8e7e2;
    text-align: left;
}

header .milieu nav{
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    padding: 0  max(calc(9.5vh + 25px), 91px);
    min-height: max(9.5vh, 66px);
    width: calc(100% - max(70vh, 487.2px));
    min-width: fit-content;
    vertical-align: top;
    line-height: max(9.5vh, 66px);
}

header .milieu nav ul{
    box-sizing: border-box;
    list-style-type: none;
    text-align: center;
    margin: 0 0 0 auto;
    margin-top: max(2vh, 14px);
    padding: 0;
    line-height: max(7vh, 49px);
    vertical-align: bottom;
    width: fit-content;
}

header .milieu nav ul li{
    display: inline-block;
}

header .milieu nav ul li a{
    text-decoration: None;
    margin: 0 2px;
    padding: max(1vh, 7px) max(1.5vh, 10px);
    border: 1px solid #a4b2be;
    border-radius: 2px;
    background-color: #596d80;
    color: #e8e7e2;
    font-size: max(4vh, 28px);
}

header .milieu nav ul li a:hover, header .milieu nav ul li #actuel{
    background-color: #f3f2ef; 
    color: #34647c;
}

/*---------------------Main---------------------*/

.main{
    flex-grow: 1;
    box-sizing: border-box;
    margin: 0;
    padding: max(2vh, 7px) 0;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
}

.main .photo{
    box-sizing: border-box;
    padding: 1%;
    max-height: max(75vh, 270px);
    width: 25%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;

}

.main .milieu{
    width: 50%;
    height: fit-content;
    box-sizing: border-box;
}

.main .hist{
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.main .hist .graph{
    width: min(70vw, calc(1.618 * 70vh));
    min-width: 322px;
    height: min(70vh, calc(70vw / 1.618));
    min-height: 200px;
    margin: 0 auto;
    text-align: center;
    z-index: 1;
}

/*texte*/

.main h1{
    margin: 0;
    font-size: max(15vh, 54px);
}

.main h2{
    margin: 0;
    font-size: max(10vh, 36px);
}

.main h3{
    margin: 0;
    font-size: max(5vh, 18px);
}

.main h4{
    margin: 0;
    font-size: max(4vh, 14px);
}

.main p{
    margin: 0;
    font-size: max(3vh, 11px);
}

.errorMessage{
    color: red;
    font-size: max(3vh, 11px);
    margin: 0;
}

/*boutons*/
.bouton-1{
    cursor: pointer;
    text-decoration: none;
    margin: max(2vh, 7px) max(1vh, 3px) max(4vh, 14px) max(1vh, 3px);
    padding: max(0.5vh, 2px) max(2vh, 7px);
    background-color: #596d80;
    border: 1px solid #596d80;
    border-radius: 20px;
    font-size: max(5vh, 18px);
    color: white;
}

.bouton-1:hover, .bouton-1:checked{
    background-color: white;
    color: #596d80;
}

.bouton-com{
    cursor: pointer;
    text-decoration: none;
    margin: max(2vh, 7px) max(1vh, 3px) 0 max(1vh, 3px);
    padding: max(0.5vh, 2px) max(2vh, 7px);
    background-color: #6986a3;
    border: 1px solid #596d80;
    border-radius: 20px;
    font-size: max(2vh, 8px);
    color: white;
}

.bouton-com:hover, .bouton-com:checked{
    background-color: white;
    color: #596d80;
}

.bouton-hist{
    cursor: pointer;
    text-decoration: none;
    margin: max(2vh, 7px) max(1vh, 3px) 0 max(1vh, 3px);
    padding: max(0.5vh, 2px) max(2vh, 7px);
    background-color: #596d80;
    border: 1px solid #596d80;
    border-radius: 20px;
    font-size: max(3vh, 11px);
    color: white;
}

.bouton-hist:hover, .bouton-hist:checked, .choix-graph #blanc{
    background-color: white;
    color: #596d80;
}

input[type="radio"]{
    display: none;
}


input[type="radio"] + label{
    cursor: pointer;
    display: inline-block;
    margin: max(1vh, 3px);
    padding: max(0.5vh, 2px);
    border: 1px solid rgb(71, 71, 71);
    border-radius: 2px;
    background-color: #e8e7e2;
    color: black;
}

input[type="radio"]:hover + label, input[type="radio"]:checked + label{
    background-color: #7e95aa;
    color: white
}

input[type="radio"].bouton-2 + label{
    font-size: max(5vh, 18px);
    width: max(40vh, 144px);
}

input[type="radio"].rep + label{
    display: table-cell;
    vertical-align: middle;
    border-collapse: separate;
    border-spacing: 10px;
    font-size: max(4vh, 14px);
    width: max(30vh, 108px);
    height: max(10vh, 36px);
}

.espace{
    display: table-cell;
    width: max(1vh, 3px);
}

input[type="radio"].rouge + label{
    color: black;
    background-color: rgb(233, 62, 62);
}

input[type="radio"].vert + label {
    color: black;
    background-color: rgb(78, 173, 78);
}

input[type="text"], input[type="password"]{
    margin: max(2vh, 7px) 0 0 0;
    font-size: max(3vh, 11px);
}


/*quizz*/

.main .enonce{
    box-sizing: border-box;
    height: fit-content;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: max(8vh, 29px);
}

.main .question{
    box-sizing: border-box;
    height: fit-content;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-wrap: wrap-reverse;
}

.main .question .proposition{
    box-sizing: border-box;
    margin: 0;
    padding: max(2vh, 7px);
    flex-grow: 1;
    min-width: fit-content;
    height: fit-content;
}

.carre_bleu{
    background-color: rgba(52, 100, 124, 0.14);
    box-sizing: border-box;
    width: fit-content;
    max-width: max(80vh, 288px);
    margin: 0 auto;
    padding: max(2vh, 7px);
}

.main .question .photo_question{
    box-sizing: border-box;
    padding: max(2vh, 7px);
    margin: 0 auto;
    width: max(50%, 75vh);
    height: max(60vh, 216px);
}


/*Déroulant*/

.zone-deroulant{
    height: max(20vh, 72px);
    margin: max(2vh, 7px) 0 0 0;
    width: 100%;
    z-index: 2;
    position: relative;
    color: white;
}

.deroulant{
    margin: max(2vh, 7px) auto 0 auto;
    border: 1px solid rgba(89, 109, 128, 0.8);
    border-radius: 10px;
    background-color: rgba(89, 109, 128, 0.8);
    position: inherit;
    height: fit-content;
    width: max(25vh, 90px);
}

.sous-deroulant{
    overflow: hidden;
    display: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: rgba(126, 149, 170, 0.8);
    width: max(25vh, 90px);
    font-size: max(2vh, 7px);
}

.titre-deroulant{
    font-size: max(3vh, 11px);
}

.titre-deroulant:hover + .sous-deroulant, .sous-deroulant:hover{
    display: inline-block;
}

.deroulant .sous-deroulant .choix-deroulant{
    border: none;
    border-top: 1px dotted rgba(0, 0, 0, 0.5);
    cursor: pointer;
    display: block;
    width: max(25vh, 90px);
    padding: 5px 0;
    background-color: rgba(0,0,0,0);
    font-size: max(2.5vh, 8px);
}

.choix-deroulant:hover, .sous-deroulant #blanc{
    color: white;
    font-size: max(3vh, 11px);
}

/*---------------------Footer---------------------*/

footer{
    margin: 0;
    padding: max(0.1vh, 1px) 25px;
    background-color: #596d80;
}

footer p{
    font-size: max(2vh, 14px);
}



/*-----------------------------------------------Reponsive Design------------------------------------------*/
/*taille hauteur min : 360px*/
/*ecran de 1365px de large*/
/*ecran de 656px de hauteur*/

@media all and (max-width: 120vh) {
    .main .photo{
        display: none;
    }

    .main .milieu{
        width: 100%;
        padding: 0 25px;
    }
}

@media all and (max-width: 100vh) {

    /*logo*/
    header .logo {
        height: 15vw;
    }


    /*Header milieu*/
    header .milieu{
        margin: 1.312vw auto;
        min-height: 12.5vw;
    }

    header .milieu h1{
        padding: 0 calc(12.5vw + 25px);
        height: 12.5vw;
        font-size: 7.9vw;
        line-height: 12.5vw;
    }

    header .milieu nav{
        padding: 0  calc(12.5vw + 25px);
        min-height: 12.5vw;
        width: calc(100% - 91.8vw);
        line-height: 12.5vw;
    }

    header .milieu nav ul{
        margin-top: 2.6vw;
        line-height: 9.2vw;
    }

    header .milieu nav ul li a{
        padding: 1.312vw 2vw;
        font-size: 5.2vw;
    }

    /*---------------------Main---------------------*/

    .main{
        padding: 2.6vw 0;
    }

    .main .photo{
        max-height: 98.4vw;

    }

    /*texte*/

    .main h1{
        font-size: 19.7vw;
    }

    .main h2{
        font-size: 13.12vw;
    }

    .main h3{
        font-size: 6.56vw;
    }

    .main h4{
        font-size: 5.2vw;
    }

    .main p{
        font-size: 3.9vw;
    }

    .errorMessage{
        font-size: 3.9vw;
    }

    /*boutons*/
    .bouton-1{
        margin: 2.6vw 1.312vw 5.2vw 1.312vw;
        padding: 0.6vw 2.6vw;
        font-size: 6.56vw;
    }

    input[type="radio"] + label{
        margin: 1.312vw;
        padding: 0.656vw;
    }


    input[type="radio"].bouton-2 + label{
        font-size: 6.56vw;
        width: 52.5vw;
    }

    input[type="radio"].rep + label{
        font-size: 5.2vw;
        width: 39.4vw;
    }

    input[type="text"], input[type="password"]{
        margin: 2.6vw 0 0 0;
        font-size: 3.9vw;
    }

    /*quizz*/

    .main .enonce{
        font-size: 10.5vw;
    }

    .main .question .proposition{
        padding: 2.6vw;
    }

    .carre_bleu{
        padding: 2.6vw;
    }

    .main .question .photo_question{
        padding: 2.6vw;
        width: max(50%, 98.4vw);
        height: 78.7vw;
    }
    /*---------------------Footer---------------------*/

    footer{
        padding: 0.13vw 25px;
    }

    footer p{
        font-size: 2.6vw;
    }
}