/* TABLETTE */
@media screen and (max-width:1023px){

    .desktop{
        display: none;
    }
    .tablette{
        display: block;
    }
    #open_barre {/*Regle de style du label */        
        display: block;
        width: 20px;
        height: 20px;
        position: absolute;
        top: 0;
        right: 7%;
        z-index: 1100;
    }
    #open_barre:before {
        content: '';
        height: 50%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-top: solid 2px var(--color1); /*barre du haut */
        border-bottom: solid 2px var(--color1);/*barre du millieu*/
        transition: all 0.3s;
        /* border-radius: 10px; */
    }
    #open_barre:after {
        content: '';
        width: 100%;
        position: absolute;
        top: 25px;
        left: 0;
        border-top: solid 2px var(--color1);/*barre du bas*/
        transition: all 0.3s;
    }
    #burger:checked + #left > #open_barre:before,#burger:checked + #left_revise > #open_barre:before {  /*la barre du haut diparait et la barre du milieu fait une rotate de 45°*/
        border-top-color: transparent;
        height: 0;
        top: 25px;
        transform: rotate(45deg);
        /* border-radius: 50%;la barre du millieu devien pointu sur les bords */
    }
    #burger:checked + #left > #open_barre:after,#burger:checked + #left_revise > #open_barre:after {/*la barre du bas fait une rotate de 45° et devient pointue sur les bords*/
        transform: rotate(-45deg);
        /* border-radius: 50%; */
    }
    #left,#left_dash,#left_revise{ /*regle de style du menu qui se deroule */
        position: fixed;
        left: 0;
        top: 15vh;
        height: 20;
        width: 20%; 
        background-color: var(--color2);
        display: flex;
        flex-direction: column;
        transition: all .3s;
        /* transform: translateX(-100%); */
    }
    #burger:checked ~ #left, #burger:checked ~ #left_revise{
    /* regle de style quand le burger est coché */
    
      width: 40%; 
    }
     #left>div,#left_revise>div {
        opacity: 0;
        display: none;
    }
    #burger:checked ~ #left>div, #burger:checked ~ #left_revise>div {
        opacity: 1;
        display: block;
    }

    /* fin burger */

    
    .select_table::after {
        display: none;
    }
    #left li>a, #left_revise li>a { 
        width: 95%;
        padding: 10px ;
    }
    #right,#right_revise {
        left: 20%;
        width: calc(100% - 20% );
    }  
    #content{
        flex-direction: column-reverse;
    }
    .ctn_img_result{
        width: 250px;
        height: 250px;
    }
    .message_score{
        padding: 50px 0;
    }
    .menu_grid{
        gap: 10px;
        display: grid;
        /* grid-auto-columns: 1fr; */
        grid-template-columns: repeat(3, 1fr);
        row-gap: 10px;
        justify-content: center;
        grid-template-columns: repeat(auto-fit, 50px);
    }
    


    
}


/* MOBILE */
@media screen and (max-width:767px){
    .mobile{
        display: block;
    }
    #open_barre {
      
        top: 25px;
        
    }
    #left li>a,#left_revise li>a {
        width: 100%;
        display: initial;
        border-radius: 10px;
    }
    #left li, #left_revise li {
        margin: 14% 0;
        
    }
    #ctn_title_filtre_left{
       align-items: baseline;  
    } 
    #ctn_title_filtre_left span{
        padding: 15px 10px;
    }
    #right_dash ul{
        flex-direction: column;
        width:200px;
        margin: auto;
    }
    #right_dash ul>li{
        padding: 10px 0;
        
    }
    #menu_header{
        flex-direction: column;
    }
    #menu_header li{
        margin: 20px 0;
    }
    form span{
        font-size: .8rem;
    }
    #form_contact{
        width: 90%;
    }
    #mention article {
       flex-direction: column;
       align-items: center;
    }
    #mention article div{
       padding-bottom: 60px;
    }
   

}
@media screen and (max-width:500px){
    h1{
        font-size: 1.2rem;
    }
    header{
        flex-direction: column;
        padding: 20px;
        max-height: max-content;
    }
    
    #left,#left_revise{
        top:17vh;
        padding-top: 5vh;
    }
    #ctn_title_filtre_left span,#left li, #left_revise li {
        font-size: .7rem;
    }    
    #right{
        
        padding-top: 20vh;
    } 
    #right_revise{

        padding-top: 25vh;
    }
    #open_barre {/*Regle de style du label */        
        right:5%;
        top: 75px;
    }
    #burger:checked + #left>#open_barre,#burger:checked + #left_revise >#open_barre{/* repositionnement du label quand la barre laterale s'agrandit*/
        top: 50px;
    } 
    .table_revise,.table_teste{
        width: 90%;
        display: flex;
    flex-direction: column;
    }
    form div{
        font-size: 1.2rem;
    }
    
    #menu_header{
        flex-direction: row;
    }
     #menu_header li{
        margin: 20px 1%;
    } 
    input[type="number"] {
    font-size: 1rem;
}

}
@media screen and (max-width:400px){
    #left,#left_revise{
        /* font-size: .5rem;   */
        padding-top: 10vh;
    } 
    #ctn_title_filtre_left{
            padding: 10px 0 10px
    }
    /* #open_barre{
        top:-40px
    } */

}

@media screen and (max-width:380px){
     /* barre laterale  */
    #burger:checked ~ #left, #burger:checked ~ #left_dash,#burger:checked ~ #left_revise {
     width: 50%;
    }
    form div{
        text-align: center;
        padding: 5px 0;
        display: initial;
        justify-content: center;
        align-items: center;
    }
    form div span{
       display: block;
    }

}
@media screen and (max-width:360px){
    #left,#left_revise{
        /* top:19vh; */
        /* font-size: .5rem; */
    }

}