@font-face {
    font-family: "scool";
    src: url("../../font/letters_for_learners-webfont.woff");
}
/* ****************** VARIABLE ******************  */
:root{
    --pad-h:60px;
    --pad-l:5%;
    
    --color1:#E6720D;
    --color2:#1c5244;
    --color3:#fff;
    --color4:#000;
    --color5:#747577;
    --color6:#c2c2c2;
    --font:'scool', sans-serif;
}
/* timer caché */
header div:nth-child(4){
    display: none;
}

body{
    margin:0;
    font-size: 1.2rem !important;
}
*{
    padding: 0;
    margin: 0;
}
li{
    list-style-type: none;
}
/* mise en page */
 header,#left,#left_revise,#left_dash{
    background: url(../img/tableau.webp) no-repeat center;
    background-size: cover;
    background-attachment: fixed;
}
header{
    width: 100%;
    min-height: 15vh;
    top: 0;
    z-index: 2;
   
}

#left,#left_dash,#left_revise{
    position: relative;
    top:15vh; 
    left: 0;
    width: 15%;
    /* height: calc(100vh - 15vh);  */
    min-height: 100vh;
    z-index: 1;
}
.left_test{
    min-height: 114.2vh !important ;
}
#right,#right_revise,#right_dash{
    background: url(../img/tableaugéometrie.webp) no-repeat center;
    background-size: cover;
}
#right label,#right_revise label{
    font-size: 1.5rem;
}
#right input,#right_revise input{
    vertical-align: super;
    
}
#right,#right_dash,#right_revise{
    left: 15%;
    top: 15vh;
    /* height: calc(max-content - 15vh);
    min-height:calc(100vh - 15vh) ; */
    min-height: 100vh;
    width: calc(100% - 15% );
    z-index: 0;
    padding-top: 7vh;
    color: var(--color5); 
    box-shadow: inset 1px 0 22px var(--color3)
}
menu a,#ctn_title_filtre_left a{
    border-radius: 10px;
}
/* #start_table{
    height: 100vh;
} */
#start_table label{
    font-size: 2rem;
}
#start_table form{
    padding: 0 1%;

}
#start_table form input[type="submit"]{
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 5px;
    border: solid 1px var(--color3);
    background: content-box;
    color: var(--color3);
   
}
#start_table form input[type="submit"]:hover{
    transition: all .3s;
    cursor: pointer;
    border-radius: 5px;
    border: solid 1px var(--color2);
    background: var(--color3);
    color: var(--color2);
}
#prenom{
    width: 100%;
    padding: 15px 0;
    margin: 5px 0; 
    border-radius: 5px;
    border: none;
    margin-bottom: 30px;
    font-size: 2rem;
}
input[type="submit"]{
    font-weight: bold;
    text-transform: uppercase;
    margin: 10px auto;
    cursor: pointer;
    border-radius: 5px;
    border: solid 1px var(--color2);
    background: content-box;
    color: inherit;
}

select{
    padding: 15px;
    border: none;
    border-radius: 10px;
    color: var(--color2);
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 50px;
    
}
select option {
 
  border-radius: 12px;
  background-color: rgb(238, 238, 238);
  white-space: pre-wrap;
  cursor: pointer;
  color:var(--color2);
  font-size: 1.5rem;
  font-weight: bold;
  text-transform: uppercase;
  
}
/* image des résultat */
.ctn_img_result {
    height: 400px;
    width: 400px;
}

.img_nul{
    background:url(../img/perdu.webp) no-repeat center;
    background-size: contain;
    animation: apparition 2s linear ;
    
}
.img_mini{
    background:url(../img/coupebronze.webp) no-repeat center;
    background-size: contain;
    animation: apparition 2s linear ;
   
}
.img_medium{
    background:url(../img/coupeargent.webp) no-repeat center;
    background-size: contain;
    animation: apparition 2s linear ;
    
}
.img_top{
    background:url(../img/coupeor.webp) no-repeat center;
    background-size: contain;
    animation: apparition 2s linear ;
    
}
.img_exelent{
    background:url(../img/coupewinner.webp) no-repeat center;
    background-size: contain;
    animation: apparition 2s linear ;
    
}

/* fin mise en page */

/* header */
    #menu_header a{
        padding: 10px 20px;
        width: 100%;
    }
    #menu_header li{
        margin: 0px 10px;
    }
    header label{
        top: 10px;
        right: 50px;
        font-size: .8rem;
    }
    header form{
        height: 47px;
    }
    #ctn_setting{
        padding: 5px;
        width: 132px;
        top: 45px;
        right: 10px;
        transform: translate(120%);
        transition: all .2s;
        opacity: 0;
        border-radius: 5px;
    }
    
/* fin header */

/* menu de gauche  */
    #left li,#left_revise li{
        margin: 1% 0;
    }
    .select_table::after {
        content: "";
        width: 30px;
        height: 30px;
        background: var(--color2);
        background: url(../img/crayon.webp) no-repeat center;
        background-size: cover;
        position: absolute;
        right: -15px;
        z-index: -1;
        top: 50%;
        margin-top: -15px;
        transform: rotate(45deg);
    }
    #ctn_title_filtre_left{
        padding: 60px 0 10px;
        align-items: center;
    }
    #left li>a,#ctn_title_filtre_left a,header li a,#left_revise a{
        padding: 10px 20px ;
        width: 90%;
        background :url(../img/tableauvert.webp);
        border-radius: 10px;
    }
    #left li>a:hover,header li a:hover,#ctn_title_filtre_left a:hover,#left_revise li a:hover{
      
        background: var(--color6) !important; 
        transition: all  .1s;
        color: var(--color2);
    }
    .select_table>a{
        background:var(--color6) !important;
        color: var(--color2);
    }
    .select_category>a{
        background: var(--color6) !important;
        color: var(--color2);
    }
    #ctn_title_filtre_left span{
        padding: 15px 30px;
    }
/* fin menu de gauche  */






/* content (droite)   */
    #right h1{
        margin-bottom: 20px;
    }
    form{
        margin: 0 auto;
        /* display: flex;
        flex-direction: column; */
    }
    form div{
        text-align: center;
        padding: 5px 0;
        margin: 6px 0;
    }
    .table_revise div>li{
        text-align: center;
        /* margin-bottom: 10px; */
        padding: 5px 0;
        letter-spacing: 8px;
        /* font-size: 1.2rem; */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    input{
        text-align: center;
        width: 75px;
         margin: 0 10px; 
    }
    .size_result{
        width: 10%;
    }

    /* /////////////////////// SUPPRIME LES FLECHES DU INPUT TYPE NUMBER  /////////////////////// */
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    input[type="number"] {
        -moz-appearance: textfield; /* Firefox */
    }
    input[type="number"] {
        color: var(--color2);
        font-weight: bold;
        background: #ffffff9e;
        padding: 2px;
        border: none;
        font-size: 1.5rem;
    }
    /* ////////////////////////////////////////////// */
    input[type="submit"] {
        /* margin: 0 auto; */
        padding: 15px;
        width: 150px;
    }
    #right input[type="submit"]:hover {
        transition: ease-in-out .3s;
        border: solid 1px var(--color6);
        background:var(--color2);
        color: var(--color6);
    }
    /* couleur des champs si il ne sont pas remplis */
    .color_champ{
        background-color: rgba(255, 0, 0, 0.169);
    }
    #form_contact .color_champ{
        background-color: rgb(255, 147, 147);
    }
    
    .alerte_vide{
        color: rgba(255, 0, 0, 0.553);
        text-align: center;
        display: block;
        margin: 0 auto;
        padding-bottom: 17px;
    }
   
    .message_score{
        opacity: 0;
        text-align: center;
        font-size: 1.2rem;
        color: var(--color1);
        animation: apparition_txt 2s linear ;
        animation-delay: 2.5s;
        animation-fill-mode: forwards; /* maintient l'état final de l'animation */
        padding-bottom: 50px;
        
    }
    .none{
        display: none;
    }
    ul>li a{
        padding: 15px 30px;
        margin: 0 10px;
        border-radius: 5px;
        background: url(../img/tableauvert.webp);
        transition: all  .1s;
        color: var(--color6) !important;
      
    }
    ul>li a:hover{
        background:var(--color6);
        color: var(--color2) !important; 
    }
    
    .table_revise,.table_test{
        box-shadow: 0px 0px 10px var(--color5);
        padding: 2%;
        border-radius: 10px;
        margin:23px auto; 
        width: 320px; 
    }
    .table_revise>div{
       width: max-content; 
    }
    .table_revise li{
        padding: 10px 0;
        font-size: 1.5rem;
        letter-spacing: 8px;
    }

    
/* fin content (droite)   */    



/* page contact */
    #form_contact,textarea {
    font-family: inherit;
    }
    #form_contact input,textarea {
    text-align: start;
    padding: 15px;
    font-size: inherit;
    }
    #form_contact>div>div:first-child input[type="text"] {
    margin: 0 10px 0 0 ;
    width: 100%;
    }
    #form_contact label{
        display:block;
        position: absolute;
        left:35px;
        bottom:25px;
        transition: all .3s;
        opacity: 0;
        cursor: initial;
        z-index: -1;
        
    }
    #form_contact input:not(:placeholder-shown)+label{
        display:block;
        position:absolute;
        left:20px;
        bottom:60px;
        z-index:5;
        color:var(--color3);
        opacity: 1;
    }

    #form_contact>div>div:last-child input[type="text"] {
        margin: 0;
        width: 100%;
    }
    #form_contact>div>div:last-child  {
        margin-left:  10px;
    }
    #form_contact>div>div:first-child  {
        margin-right:  10px;
    }

    #form_contact input[type="text"]{
    width: 50%;
    }
    #form_contact input[type="email"]{
    margin: 0;
    }
    #form_contact input[type="submit"]{
    border: solid 1px var(--color3);
    text-align: center;
    color: var(--color3);
    }
    #form_contact input[type="submit"]:hover{
    border: solid 1px var(--color2);
    background: var(--color3);
    color: var(--color2);
    }
    #form_contact input[type="submit"]:active{
        transform: scale(.98);
    }
    #form_contact textarea{
    min-width: 100%;
    max-width: 100%;
    margin-top: 15px;
    }
    #accuse_mail{
        color: var(--color3);
    }
    #accuse_mail p{
        padding: 15px 0;
    }

/* fin page contact  */


/* page mention */
#mention {
    padding: 0 var(--pad-l) var(--pad-h) ;
}
#mention h2{
    color: var(--color1);
}
#mention h3{
    padding-left:1% ;
    color: var(--color1);
}
#mention p{
   padding: 20px 2% ;
}
#mention p{
    color: var(--color6);
}
#mention a{
    color: var(--color6);
}
#mention a:hover{
    color: var(--color1);
}
#mention article {
   justify-content: center;
   color: var(--color6);
}
#mention article div{
    display: flex; 
    flex-direction: column;
    align-items: center;
}
#mention article h2{
    padding-bottom: 20px;
}
#mention li{
    padding: 5px 0;
}
#close_politique{
    padding: 25px;
    width: max-content;
    margin: auto;
}
/* fin page mention */

/* footer  */    
    section[role="contentinfo"]{
        color: var(--color6);
        z-index: 1;
        bottom: 15px;
        right: 0;
        padding: 20px;
    }
    section[role="contentinfo"] a{
        color: var(--color6);
    }
    section[role="contentinfo"] a:hover{
        color: var(--color1);
    }
/* fin footer   */    



/* ANNIMATION */
@keyframes apparition{

    0%{
        
        opacity: 0;
        transform: scale(1.5);

    }
    25%{
        opacity: 0;
    }

    100%{
        opacity: 1;
        transform: scale(1);


    }
}

@keyframes apparition_txt{

    0%{
        
       opacity:0;
       

    }
    100%{
        opacity: 1;
   


    }
}