@font-face {
	font-family: 'Manga_temple';
	src: url('Applications/Random_picker/Fonts/manga_temple/mangat.ttf') format('truetype')

}
/***************************************************************************************************/
/******************************** RESET des propriétés du navigateur (ALL PAGES) *******************************/
/***************************************************************************************************/
*:not(p){
    margin: 0;
    padding: 0; 
    text-decoration: none;
    list-style: none;
}


:root {
    --mypink: #db3f02;
    --myblue:  #50159e;
  }
  

/***************************************************************************************************/
/********************************************* HTML (ALL PAGES) **********************************************/
/***************************************************************************************************/

html {min-height:100.1%;} /*Aindi la scrollbar apparait tout le temps et cela évite le décalage */



/***************************************************************************************************/
/********************************************* BODY (ALL PAGES) **********************************************/
/***************************************************************************************************/

body{
    background: url("Images/background2.jpg") no-repeat fixed center/cover;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 16pt;
    height: 100vh;
    overflow:hidden; 
    display:flex;
    flex-direction: column;
}



/***************************************************************************************************/
/*************************************** MAIN (ALL PAGES) ********************************************/
/***************************************************************************************************/

main{
    width: 100%;
    flex:1; /* le main rempli l'espace vertical restant*/
    overflow: scroll; 
    margin-left:auto;
    margin-right:auto; 
    overflow-x:hidden;
}



h1{
    font-style: italic;
}

/***************************************************************************************************/
/*************************************** BOX (ALL PAGES) ********************************************/
/***************************************************************************************************/


.mybox{
    margin-bottom:2vh;
    background: rgba(245, 245, 245, 0.623);
    padding: 10px; 
    border: 3px solid rgb(0, 0, 0);
    border-radius: 10px;
    box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, 0.205);
}


.mybox li{
    list-style:disc;
    margin-left: 5%;
    margin-bottom: 1%;
}


/***************************************************************************************************/
/********************************************* NAVBAR (ALL PAGES) **********************************************/
/***************************************************************************************************/

#navbar{
    width: 100%;
    height: 12vh; 
    background-image: linear-gradient(120deg, #2326f579 0%, #c4000079 100%);
    backdrop-filter: blur(3px);
    display: flex;
    justify-content:left;
    align-items: center;
    font-size: 1.2em;
}



#navbar div{
    color: black;
}


#mylogo{ 
    width: auto;
    max-height: 90%;
    margin-top:10px;
    margin-bottom: 10px;
    margin-left: 2.5%;
}

#hamburger{
    display: none;
    cursor: pointer;
}

#navlinks{
    display:block;
    width:80%;
    margin-left: 10%;
    margin-right:10%;
}

#navlinksUl{
    display: flex; 
    justify-content: space-between;
    align-items: center;

}


#navlinks li div {
    cursor:pointer;
    transition: all 0.2s ease-in-out;
}


#navlinks li div:hover{
    color: var(--mypink);
}


#navlinks .is-active{
    color: var(--mypink);
    font-weight: bold;
}



/*************************************************************************/
/*********************RESPONSIVE DE LA NAVBAR ****************************/

 #navbar.mobile{
     position: relative;
     display: block;
     font-size: 1.4em;  
     min-height: 13vh;
     height: auto;
 }

#mylogo.mobile{
    max-height: auto;
    margin: 0; 
    position: absolute;
    height: 11vh; 
    left:5%;
    top : 1vh;
    bottom : 1vh;
}

#hamburger.mobile{
    display: block;
    position: absolute;
    height: 5vh; 
    right:5%;
    top : 4vh;
    bottom : 4vh;
} 

#navlinks.mobile{
      display:none;
      margin-top:20vh;
      margin-bottom:20vh;
      height: 60vh;
    
}

#navlinksUl.mobile{
      height: 100%;
      flex-direction: column; 
      justify-content: space-between;
      align-items: center;
}
   


/***************************************************************************************************/
/************************************** FOOTER (ALL PAGES) ******************************************/
/***************************************************************************************************/


footer{
    font-size: 0.5em;
    width:95%;
    margin-top: 5vh;
    margin-left: auto;
    margin-right: auto;

}


/***************************************************************************************************/
/************************************ PDF ICON (ALL PAGES) ******************************************/
/***************************************************************************************************/

.pdf_icon{
    width: 1.5em;
}



/***************************************************************************************************/
/****************************************************************************************************/
/***************************************************************************************************/
/*************************************** FIN ALL PAGES ***********************************************/
/***************************************************************************************************/
/***************************************************************************************************/
/***************************************************************************************************/



/***************************************************************************************************/
/******************************************** PAGE ACCUEIL *************************************************/
/***************************************************************************************************/

#accueil{
    display:none;
    width:95%;
    margin-left: auto;
    margin-right: auto;
}



h1{
    width : 100%;
    margin-left: auto;
    margin-right: auto; 
    margin-top: 1vh;
    margin-bottom: 1vh;
}



#accueil_link_college, #accueil_link_lycee{
    cursor: pointer;
    color:rgb(109, 42, 216);
}



.accueil_infos{
    width: 100%;
    margin-left:auto;
    margin-right: auto;
    display: flex; 
    justify-content: space-between;
}


#accueil .mybox.eleves{
    width: 47%;
}

#accueil .mybox.profs{
    width: 47%;
}


#accueil .mybox{
    overflow:hidden;  /* la box s'agrandit pour accueillir l'image (qui est plus haute que le texte) */
    overflow-x:hidden;
} 

#accueil_hex_board{
    max-width: 20%;
    height: auto;
    float: right;
    transition : transform 0.25s ease;
}

#accueil_hex_board:hover{
    transform: scale(1.1);   
}


.logo_js, .logo_py, .logo_geo, .logo_scra{
    max-width:7%;
    max-height: 50px;
    float : right;
}


/*************************** RESPONSIVE DE LA PAGE ACCUEIL *******************************/
/*****************************************************************************************/


@media screen and (max-width: 850px) {

    .accueil_infos{
        display: block;
        width: 100%;
    
    }

    #accueil .mybox.eleves, #accueil .mybox.profs, #accueil .mybox.hex, #accueil .mybox.applications{
        width:90%;
        margin-left: auto;
        margin-right: auto;

    }


    #accueil_hex_board{
        max-width: 30%;
        min-height: 30%;
        height: auto;
        float: right;
    }
    
    .mybox.applications{
        margin-bottom:7vh; /* On augmente la marge inférieure de la dernière boite*/
    } 


}


/***************************************************************************************************/
/************************************ PAGES COLLEGE ET LYCEE ***************************************/
/***************************************************************************************************/


#college .contents, #lycee .contents{
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;  
    display: flex;
    justify-content: space-around; 
}


.les_chapitres_viewbox{
    position:relative;
    min-width: 45%;
    height: 68vh; 
    padding-top: 1%;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: rgba(148, 191, 247, 0.233);
    backdrop-filter: blur(3px);
    border-width: 3px;
    border-style: solid;
    border-radius: 10px;
    scrollbar-width: 10px;
    scrollbar-color: #003580 #FFFFFF;
}


.niveau{
    position: absolute;
    width:98%;
    top: 1%;
    left: 1%;
}


.slider{
    position: relative;
    transform: translateX(100%);
    transition: transform 0.5s ease-in-out;
}


.un_chapitre{
    background-color: whitesmoke;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    margin-bottom: 30px;
    padding: 2%;
    display: flex;
    flex-direction: column;
    justify-content: space-around; 
    align-items: center;

}

.un_chapitre:hover{
    transform: translate(-5px,-5px);
    box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, 0.205);
    
}

.nom_chapitre{
    margin: 2%;
    width:70%;
    display: flex;
    justify-content:space-around; 
    align-items: center;
    text-align: center;

}


.chap_rule{
    width: 10%;
    height: 2px;
    border: none;
    margin-left:auto;
    margin-right:auto;
    background-color: black;
}



.doc_chapitre{
    width: 100%;
    display: flex;
    justify-content: space-around; 
    align-items: center;
}


.doc_chapitre li a{
    color : white;
    animation: animate 2s linear infinite ;
}

@keyframes animate{
    0%{
        color: rgb(0, 0, 0);
    }

    30%{
        color: var(--myblue);
    }
    
    100%{
        color:  rgb(0, 0, 0);  
    }
}


.doc_chapitre li a:hover{
    font-weight: 900;
}




.informations_viewbox{
    position: relative;
    width: 45%;
    padding-top:1%;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: rgba(148, 191, 248, 0.185);
    backdrop-filter: blur(3px);
    border-width: 3px;
    border-style: solid;
    border-radius: 10px;
    scrollbar-width: 10px;
    scrollbar-color: #003580 #FFFFFF;
    font-size:1em;
}

/***************************************************************************************************/
/***************************************** PAGE COLLEGE **********************************************/
/***************************************************************************************************/

#college{
    display:none;
    width:95%;
    margin-left: auto;
    margin-right: auto;
}

#college h2{
    margin-left: 2%;
    text-align: left;
    margin-top: 1vh;
    font-size: 20pt;
    margin-right: 8%;
    font-style: italic;
}




#college .les_niveaux{
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2vh; 
    margin-top: 1vh;
    font-size: 1.2em;
    font-weight: bold;
}



#college .les_niveaux ul{
    background: #bec1e6;
    display:flex;
}


#college .les_niveaux li{ 
    background: #bec1e6;
    width: 25%; /* car il y a 4 niveaux */
    height: 7vh;
    border-color: black;
    border: solid;
    border-width: 1px;

    display: flex; /* aligner verticalement et horizontalement le contenu*/
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease-in-out;

}

#college .les_niveaux li:hover{ 
    background: #bec1e6;
    cursor: pointer;
}


#college .bouton.is-active{
    background:#bec1e6;
    color:  var(--mypink);
    transform : translate(-5px, -5px);
    box-shadow:  5px 5px 5px 2px rgba(0, 0, 0, 0.205);
    border-color: black;
}



/*****************************************************/


#sixieme_contents{
    margin-left:0%;
}
#cinquieme_contents{
    margin-left:100%;
}
#quatrieme_contents{
    margin-left:200%;
}
#troisieme_contents{
    margin-left: 300%;
}


#sixieme_infos{
    margin-left:0%;
    padding-left:1%;
    padding-right:1%;
}

#sixieme_infos ul{
    display: flex;
    justify-content:space-evenly;
}

#cinquieme_infos{
    margin-left:100%;
    padding-left:1%;
    padding-right:1%;
}
#quatrieme_infos{
    margin-left:200%;
    padding-left:1%;
    padding-right:1%;
}
#troisieme_infos{
    margin-left: 300%;
    padding-left:1%;
    padding-right:1%;
}




.six{
    transform: translateX(0%);

}
.five{
    transform: translateX(-100%);
}
.four{
    transform: translateX(-200%);
}

.three{
    transform: translateX(-300%);
}




/***************************************************************************************************/
/***************************************** PAGE LYCEE **********************************************/
/***************************************************************************************************/

#lycee{
    display:none;
    width:95%;
    margin-left: auto;
    margin-right: auto;
}


#lycee h2{
    position : relative;
    margin-left: 2%;
    text-align: left;
    margin-top: 1vh;
    font-size: 20pt;
    font-style: italic;
}

#lycee .les_niveaux{
    background: #bec1e6;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2vh; 
    margin-top: 1vh;
    font-size: 1.2em;
    font-weight: bold;
}


#lycee .les_niveaux ul{
    display:flex;
}


#lycee .les_niveaux li{ 
    background: #bec1e6;
    width: 33%; /* car il y a 4 niveaux */
    height: 7vh;
    border-color: black;
    border: solid;
    border-width: 1px;

    display: flex; /* aligner verticalement et horizontalement le contenu*/
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease-in-out;

}

#lycee .les_niveaux li:hover{ 
    background: #bec1e6;
    cursor: pointer;
}


#lycee .bouton.is-active{
    background:#bec1e6;
    color:  var(--mypink);
    transform : translate(-5px, -5px);
    box-shadow:  5px 5px 5px 2px rgba(0, 0, 0, 0.205);
    border-color: black;
}


/*****************************************************/

#seconde_contents{
    margin-left:0%;
}
#premiere_contents{
    margin-left:100%;
}
#terminale_contents{
    margin-left:200%;
}

#seconde_infos{
    margin-left:0%;
    padding-left:1%;
    padding-right:1%;
}
#premiere_infos{
    margin-left:100%;
    padding-left:1%;
    padding-right:1%;
}
#terminale_infos{
    margin-left:200%;
    padding-left:1%;
    padding-right:1%;
}


.two{
    transform: translateX(0%);
}
.one{
    transform: translateX(-100%);
}
.zero{
    transform: translateX(-200%);
}






/*************************** RESPONSIVE DES PAGES COLLEGE ET LYCEE *******************************/
/*************************************************************************************************/







/***************************************************************************************************/
/***************************************** PAGE APPLICATIONS **********************************************/
/***************************************************************************************************/

#applications{
    display:none;
    width:95%;
    margin-left: auto;
    margin-right: auto;
}


#applications .mybox{
    margin-top: 2vh;
    overflow: auto;  /* la box s'agrandit pour accueillir l'image (qui est plus haute que le texte) */
    overflow-x: hidden;
} 


#hex_board{
    max-width: 20%;
    height: auto;
    float: right;
    transition : transform 0.25s ease;
}

#hex_board:hover{
    transform : scale(1.1);    
}



#woodpecker{
    width: 10%;
    height: auto;
    float: right;
    transition : transform 0.25s ease;
}

#woodpecker:hover{
    transform : scale(1.1);    
}

#white_queen{
    width: 10%;
    height: auto;
    float: right;
    transition : transform 0.25s ease;
}

#white_queen:hover{
    transform : scale(1.1);    
}


#random_picker_help{
    margin-left: 5%;
}

#random_picker_help .help_item{
    margin: 10px;
}



#random_picker_help .list_number{
    margin-right: 10px;
    font-size: 16pt;
    font-weight: 900;
}

.texte_a_droite{
    text-align: right;
}



.accordéon_handle{
    display: flex;
    align-items:center;
    cursor:help;
}

.help-icon{
    margin-left:2px;
    padding-bottom:20px;
    width: 40px;
}

.accordéon{
    width: 100%;
    max-height: 0px;
    overflow: hidden;
    transition: all 1s ease-in-out;   
}


/*************************** RESPONSIVE DE LA PAGE APPLICATIONS *******************************/
/*********************************************************************************************/


@media screen and (max-width: 850px) {


    #applications .mybox{
        width:90%;
        margin-left: auto;
        margin-right: auto;

    }

    #hex_board{
        max-width: 30%;
        min-height: 30%;
    }


    #woodpecker{
        width: 20%;
    }

    #white_queen{
        width: 20%;
    }

    
    #applications .mybox.echec{
        margin-bottom:7vh; /* On augmente la marge inférieure de la dernière boite*/
    } 


}



/***************************************************************************************************/
/***************************************** PAGE ENIGMES **********************************************/
/***************************************************************************************************/

#enigmes{
    display:none;
    width:95%;
    margin-left: auto;
    margin-right: auto;
}

#enigmes_presentation{
    margin-top : 2vh;
    margin-bottom:10vh;
}

.criteres_enigmes li{
    margin-top:1px;
    margin-bottom:1px
}


#enigmes h2{
    text-align: left;
    margin-top: 1vh;
    margin-bottom : 2vh;
    font-size: 20pt;
    font-style: italic;
}


.une_enigme{
    width:80%;
    display:flex;
    align-items: center;
    margin-top:0;
    margin-bottom: 8vh;
}

#chiffres_sym_texte{
    width:50%;
}

#chiffres_sym_img{
    display: block;
    width:40%;
    margin:auto;
}

@media screen and (max-width: 850px) {
    #chiffres_sym_texte{
        width:35%;
    }

    #chiffres_sym_img{
        width:60%;
    }
}


#cubicubo_img{
    display: block;
    width: 25%;
    margin:auto;  
}

#cubicubo_texte{
    width:50%;
}

@media screen and (max-width: 850px) {
    #cubicubo_texte{
        width:35%;
    }

    #cubicubo_img{
        width:40%;
    }
}


#kapla_img1{
    display: block;
    width: 70%;
    margin-left :10%;
    margin-top : 2%;
    margin-bottom : 2%;    
}

#kapla_img2{
    display: block;
    width: 50%;
    margin:auto;
    margin-bottom:3vh;  
}

#kapla_texte{
    width:55%;
}


#mastermind1_texte{
    width:50%;
}

#mastermind2_texte{
    width:50%;
}

#mastermind1_img{
    display: block;
    width: 43%;
    margin-left:auto;  
}

#mastermind2_img{
    display: block;
    width: 45%;
    margin-left:auto;  
}


#musee_texte{
    width:50%;
}

#musee_img{
    display: block;
    width: 45%; 
    margin:auto;  
}


@media screen and (max-width: 850px) {
    #musee_texte{
        width:35%;
    }

    #musee_img{
        width:60%;
    }
}








/***************************************************************************************************/
/****************************** RESPONSIVE DE LA PAGE ENIGMES ***************************************/
/***************************************************************************************************/

@media screen and (max-width: 900px) {

    .une_enigme{
        width:100%;
    }

}



/***************************************************************************************************/
/***************************************** PAGE INFOS **********************************************/
/***************************************************************************************************/

#infos{
    display:none;
    width:95%;
    margin-left: auto;
    margin-right: auto;
}