body{
    background-color: rgb(219, 215, 215);
    text-align: center;
    
    


}


.plan{
    background-color: rgb(219, 215, 215);
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
}

select{
    text-align: center;
}
input{
    text-align: center;
}
option{
    text-align: center;
}



.class{
    display: none;
}



.class1{
    background-color: rgb(219, 215, 215);
    display: initial;
    position:absolute;
    top:0%;
    left: 10%;
    height: 5%;
    width: 80%;
    text-align: center;
    
}



.class2{
    background-color: rgb(219, 215, 215);
    display: initial;
    position:absolute;
    top:5%;
    left: 10%;
    height: 5%;
    width: 80%;
    text-align: center;
    border:none;
    
}
.class3{
    display: initial;
    position:absolute;
    top:12%;
    left: 10%;
    height: 5%;
    width: 80%;
    text-align: center;
}



.class4{
    display: none;
    position:absolute;
    top:18%;
    left: 70%;
    height: 5%;
    width: 20%;
    text-align: center;
}


.class41{
    display: none;
    position:absolute;
    top:18%;
    left: 70%;
    height: 5%;
    width: 20%;
    text-align: center;
}





.class5{
    display: initial;
    position:absolute;
    top:18%;
    left: 10%;
    height: 5%;
    width: 80%;
    text-align: center;
}
.class6{
    display: initial;
    position:absolute;
    top:24%;
    left: 10%;
    height: 5%;
    width: 80%;
    text-align: center;
}

.class7{
    display: initial;
    position:absolute;
    top:31%;
    left: 10%;
    height: 5%;
    width: 80%;
    text-align: center;
}


.class8{
    display: initial;
    position:absolute;
    top:38%;
    left: 10%;
    height: 5%;
    width: 80%;
    text-align: center;
}


.class9{
    display: initial;
    position:absolute;
    top:44%;
    left: 10%;
    height: 5%;
    width: 80%;
    text-align: center;
}


.class10{
    display: initial;
    position:absolute;
    top:50%;
    left: 10%;
    height: 5%;
    width: 80%;
    text-align: center;
}


.class11{
    display: initial;
    position:absolute;
    top:57%;
    left: 10%;
    height: 3%;
    width: 80%;
    text-align: center;
}


.class12{
    display: initial;
    position:absolute;
    top:64%;
    left: 10%;
    height: 5%;
    width: 80%;
    text-align: center;
}


.class13{
    display: initial;
    position:absolute;
    top:71%;
    left: 10%;
    height: 5%;
    width: 80%;
    text-align: center;
}


.class14{
    
    display: initial;
    position:absolute;
    top:78%;
    left: 10%;
    height: 3%;
    width: 80%;
    text-align: center;
}



.class15{
    position:absolute;
    top:85%;
    left: 30%;
    width: 40%;
    text-align: center;
    background-color: rgb(172, 172, 255);
    
}



.class16{
    display: none;
    position:absolute;
    top:10%;
    left: 70%;
    width: 80%;
    text-align: center;
    
}



.vent{
    background-color:white  ;
    text-align: center;
}













@media screen  {

    .plan{
        background-color: rgb(219, 215, 215);
        position:absolute;
        top:0%;
        left: 20%;
        height: 150%;
        width: 60%;
       
    
    
    }
    

}







/* paysage pour téléphone */


@media screen and (orientation :landscape) and (max-height:424px) {

    .plan{
        background-color: rgb(219, 215, 215);
        position:absolute;
        top:00%;
        left: 15%;
        height: 200%;
        width: 70%;
       
    
    
    }
    

}






/* paysage pour tablette */


@media screen and (orientation :landscape) and (min-height:424px) {

    .plan{
        background-color: rgb(219, 215, 215);
        position:absolute;
        top:0%;
        left: 20%;
        height: 120%;
        width: 60%;
        
    }
    


}