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


}

.class{
    display: none;
}




.plan{
    background-color:white;
    position:absolute;
    top:0%;
    left: 0%;
    height: 100%;
    width: 100%;
    


}















.couche1{
    background-color:white;
    position: absolute;
    top: 0px;
    height: 10%;
    left: 0%;
    width: 100%;
    z-index: 1;
        
}


.message{
    position: absolute;
    background-color:white;
    bottom: 00%;
    height: 10%;
    left:0%;
    
    font-size: 60%;
    
    font-weight: bolder;
    display: inline;
}
      





.titre{
    background-color: white;
            
    position: absolute;
    top: 00%;
    left: 0%;
    height: 45%;
    width: 20%;
    font-size: 100%;
        

}






.titre1{
    position:absolute;
    top: 10%;
    color:black;
    font-weight: bolder;
    text-decoration: none;
    font-size: 150%; 
}



.titre1:hover{
    background-color: blue;
    color: white;
    

}




.logos{
    background-color:white;
    position: absolute;
    top: 0%;
    right: 0%;
    width: 20%;
    height: 100%;
    color: black;
    text-align: center;
}







.f1{
    background-color:white;
    position: absolute;
    top: 0px;
    right: 0%;
    width: 100%;
    height: 100%;
    color: black;
    border-radius: 8px;
}


.logos0{
    background-color:white;
    position: absolute;
    top: 5%;
    right: 0%;
    width: 80%;
    height: 15%;
    color: black;
    font-size: 40%;
    text-align: center;
    border-radius: 4px;
    border-color: black;
    
    
}





.logos0:hover{
   
    background-color:rgb(214, 211, 211);
    
    
}







.logos1{
    background-color:white;
    position: absolute;
    top: 35%;
    right: 0%;
    width: 80%;
    height: 15%;
    color: black;
    font-size: 40%;
    text-align: center;
    border-radius: 4px;
    border-color: black;
    
    
}





.logos1:hover{
   
    background-color:rgb(214, 211, 211);
    
    
}





.logos2{
    background-color:blue;
    color: white;
    position: absolute;
    top: 75%;
    right: 0%;
    width: 80%;
    height: 25%;
    font-size: 60%;
    border-radius: 8px;
    font-weight: bolder;

}




.logos2:hover{
    background-color:white;
    color: black;
    
    font-weight: bolder;
  

}


.logos3{
    display: none;
}






.menu{
    background-color:white;
    position:absolute;
    top :10%;
    height: 5%;
    left: 0%;
    width: 100%;
        

}












.lien{
    background-color:white ;
    color: black;
    text-decoration: none;
    font-weight: bolder;
  
    font-size: 60%;
    border-radius: 4px;
            

        

}

.lien:hover{
    background-color: blue;
    color: white;
   
    transition: ease-out 0.3s;
                
        

}
       
















.bannière{
    background-color: blue;
    position: absolute;
    top: 15%;
    height: 25%;
    left: 0%;
    width:100%;
  
}






.Recherche{
    background-color:rgb(148, 189, 241);
    position: absolute;
    top: 40%;
    height: 5%;
    left: 0%;
    width: 100%;
        
}





.input1{
    position: absolute;
    top: 20%;
    height: 50%;
    left: 1%;
    width: 20%;
    font-size: 60%;
    background-color: rgb(239, 243, 245);
    border-color: white;
    text-align: center;
    border-radius: 6px;

}





.input2{
    position: absolute;
    top: 20%;
    height: 50%;
    left: 35%;
    width: 20%;
    font-size: 60%;
    background-color: rgb(239, 243, 245);
    border-color: white;
    text-align: center;
    border-radius: 6px;

}






.input3{
    position: absolute;
    top: 20%;
    height: 50%;
    left: 69%;
    width: 20%;
    font-size: 60%;
    background-color: rgb(239, 243, 245);
    border-color: white;
    text-align: center;
    border-radius: 6px;
}






       





.input1:hover{
    background-color:rgb(214, 211, 211);

}





.input2:hover{
    background-color:rgb(214, 211, 211);

}






.input3:hover{
    background-color:rgb(214, 211, 211);
}






       


.input4:hover{
    background-color:rgb(214, 211, 211);

}

















.input5{
    background-color: blue;
    color: white;
    position: absolute;
    top: 17%;
    height: 50%;
    left: 92%;
    width: 7%;
    font-size: 60%;
    font-weight: bolder;
   
    border-color: white;
    text-align: center;
    border-radius: 6px;

}



.input5:hover{
   
    background-color:  white;
    color: black;
    border-width: 1px;
    border-color: black;
  
}




































.couche2{
    background-color:white;
    position: absolute;
    top: 45%;
    height: 45%;
    left: 0%;
    width: 100%;
        
}











.couche21{
    background-color: white;
    position:absolute;
    right: 17.5%;
    width: 82.5%;
    top : 0px;
    height: 100%;       
    overflow: scroll;
            
}




.p1{
    position:absolute;
    left: 0%;
    width: 15%;
    height: 30px;
    text-align: center;
    background-color:white; 
    font-size: 55%;
    font-weight: bolder;
                

}




.p2{
    position:absolute;
    left: 15%;
    width: 25%;
    height: 30px;
    text-align: left;
    background-color:white; 
    font-size: 55%;
    font-weight: bolder;
                

}




.p3{
    position:absolute;
    left: 40%;
    width: 20%;
    height: 30px;
    text-align: left;
    background-color:white; 
    font-size: 55%;
    font-weight: bolder;
                

}


.p4{
    position:absolute;
    left: 62%;
    width: 38%;
    height: 30px;
    text-align: left;
    background-color:white; 
    font-size: 55%;
    font-weight: bolder;
                

}


.rang{
    position:absolute;
    left: 0%;
    width: 15%;
    height: 30px;
    text-align: left;
    background-color:white; 
    font-size: 100%;
    font-weight: bolder;               
                             
}
 









                
.image{
    position:absolute;
    width: 50%;
    height: 50%;
    top: 0%;
    left: 25%;
    border-color: black; 
    border-style: solid;
    border-width: 1px;
}



.image:hover{
    position:absolute;
    width: 80%;
    height: 80%;
    top: 0%;
    left: 0%;
    border-width: 2px;  





}








.noms{
    position:absolute;
    left: 15%;
    width: 25%;
    height: 30px;
    text-align: left;
    height: 30px;
    background-color:white; 
    font-size: 55%;
    font-weight: bolder;
                    
                    

}


.cathegorie{
    position:absolute;
    left: 40%;
    width: 20%;
    height: 30px;
    text-align: left;
    background-color:white; 
    font-size: 55%;
    font-weight: bolder;
}





.maj{
    position:absolute;
    left: 62%;
    width: 38%;
    height: 30px;
    text-align: left;
    background-color:white; 
    font-size: 55%;
}

            






img{
    width: 100%;
    height: 100%;
}
            





.couche22{
    background-color: white;
    position:absolute;
    top : 0px;
    height: 33%;
    right: 0%;
    width: 17%;
                
                
            
}




.couche23{
    background-color: white;
    position:absolute;
    top : 33.33%;
    height: 33%;
    right: 0%;
    width: 17%;
                
                
            
}





.couche24{
    background-color: white;
    position:absolute;
    top : 67%;
    height:33%;
    width: 17%;
    right: 0%;
                
                
            
}


.sliders{
  
    position:absolute;
    top : 5%;
    height:90%;
    width: 90%;
    right: 5%;
    border-color:black ;
    border-radius: 10px ;
    border-width: 25px;
                
                
            
}
















.couche25{
    background-color: yellow;
    position:absolute;
    top : 0%;
    height: 33%;
    left: 17%;
    right: 0%;
    display: none;
            
}





.couche26{
    background-color: yellow;
    position:absolute;
    top : 33.33%;
    height: 33%;
    width: 17%;
    left: 0%;
    display: none;
            
}





.couche27{
    background-color: yellow;
    position:absolute;
    top : 67%;
     height: 33%;
    width: 17%;
    left: 0%;
    display: none;
            
}

































































































.couche3{
    background-color:rgb(148, 189, 241);
    position:absolute;
    top : 90%;
    height: 10%;
    left: 0%;
    width: 100%;
    
    color: rgb(13, 13, 20);
    
}


















.footer1{
        
    font-size: 80%;
    display:inline;
    font-size: 50%;
    font-weight: bold;
    position: absolute;
    right: 60%;
    top: 0%;
   
    
}



.footer2{
        
    font-size: 80%;
    display:inline-block;
    font-size: 50%;
    font-weight: bold;
    position: absolute;
    Left: 60%;
    top: 0%;
    
}


.footer3{
        
    font-size: 80%;
    display:inline;
    font-size: 50%;
    font-weight: bold;
    position: absolute;
    right:60%;
    top: 40%;
}


.footer4{
        
    font-size: 80%;
    display:inline-block;
    font-size: 50%;
    font-weight: bold;
    position: absolute;
    left: 60%;
    top: 40%;
}





























/*paysage télephone*/






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



    .plan{
        background-color:white;
        position:absolute;
        top:0%;
        left: 15%;
        height: 200%;
        width: 70%;
        
    
    
    }
        
    .logos2{
    
        top: 85%;
        width: 50%;
        height: 40%;
    

    }



}
 




/*paysage tablette*/

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



    .plan{
        background-color:white;
        position:absolute;
        top:0%;
        left: 20%;
        height: 120%;
        width: 60%;
        
    
    
    }
        
    .logos2{
    
        top: 85%;
        width: 50%;
        height: 40%;
    

    }



}