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


}





.plan{
    background-color:white;
    position:absolute;
    top:00%;
    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: 0%;
    left: 0%;
    height: 45%;
    width: 20%;
    font-size: 100%;
        

}















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



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

}

























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













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


}



  



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


}




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


}






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


}




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


}














.topaze{
    background-color:rgb(48, 6, 231);
    color: white;
    position:absolute;
    top : 75%;
    height: 25%;
    right:0%;
    width: 80%;
    font-size: 60%;
    border-color: white;
    transition: ease-out 0.3s;
    font-weight: bolder;
    border-radius: 8px;
                
            


}

.topaze:hover{
    background-color:white;
    color: black;
            
               
}
                


                






































         


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

}











.lien{
    text-decoration: none;
    font-weight: bolder;
    background-color:white ;
    color: black;
    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: 35%;
    height: 7%;
    left: 0%;
    width: 100%;
    display: none;
}






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

}





.input2{
    position: absolute;
    top: 20%;
    height: 30%;
    left: 22%;
    width: 15%;
    font-size: 60%;
    background-color: rgb(239, 243, 245);
    border-color: white;
    text-align: center;

}






.input3{
    position: absolute;
    top: 20%;
    height: 30%;
    left: 43%;
    width: 18%;
    font-size: 60%;
    background-color: rgb(239, 243, 245);
    border-color: white;
    text-align: center;

}






       

.input4{
    position: absolute;
    top: 20%;
    height: 30%;
    left: 68%;
    width: 15%;
    font-size: 60%;
    background-color: rgb(239, 243, 245);
    border-color:white;
    text-align: center;

}



.input5{
    position: absolute;
    top: 28%;
    height: 50%;
    left: 89%;
    width: 10%;
    font-size: 60%;
    background-color:  white;
    border-color: white;
    text-align: center;

}



















































































































.couche2{
    background-color:white;
    position: absolute;
    top: 40%;
    height: 50%;
    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: yellow;
    position:absolute;
    top : 0px;
    height: 33%;
    left: 0%;
    width: 17%;
    display: none;
                
                
}




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





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





.couche25{
    background-color:white;
    position:absolute;
    top : 0%;
    height: 50%;
    width: 17%;
    right: 0%;
                
            
}



/* 
iframe{
    position: absolute;
    top: 5%;
    right: 0%;
    width: 100%;
    height: 34%;
} */


video{
    position: absolute;
    top: 0%;
    right: 0%;
    width: 100%;
    height: 50%;
}



.fig{
    position: absolute;
    top: 65%;
    left: 0%;
    width: 100%;
    height: 20%;
    

    text-align: center;
    
    background-color: white;

}

  

.fig1{
    position: absolute;
    top: 00%;
    left: 0%;
    width: 100%;
    height: 100%;
    font-size:50%;
    color:black;
    text-align: center;
    font-weight: bolder;
    

}






















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





.couche27{
    background-color: yellow;
    position:absolute;
    top : 67%;
    height: 33%;
    width: 17%;
    right: 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);
    
    font-weight: bold;
    
}



.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 pour téléphone */


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

    .plan{
        background-color:white;
        position:absolute;
        top:00%;
        left: 15%;
        height: 200%;
        width: 70%;
       
    
    
    }
    


    .topaze{
        top : 85%;
        height: 40%;
        width: 50%;
    }




}






/* paysage pour tablette */


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

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


    .topaze{
        top : 85%;
        height: 40%;
        width: 50%;
    }

}