.entete{width: 100%;
  height: 530PX;
  filter: brightness(60%);
  }

.logo{position:absolute;
  width: 30%;
height: 40%;
margin-top: -35%;
margin-left: 34%;
z-index: 1;
}

.textelogo {position:absolute;
  color:white;
margin-top: -230PX;
margin-left: 23%;
width: 50%;
text-align: center;
z-index: 1;
font-size: 18PX;
font-weight: 700;}



  
  .numero{color: black;
  font-size: 16px;}
  .num{position: absolute;
  margin-left: 3%;
  margin-top: -516PX;
  width: 20%;
  z-index: 2;
  }
  .adresse{color: black;
  font-size: 16px;}
  .adr{position: absolute;
  color:wheat;
  font-size: 5PX;
  margin-left: 80%;
  margin-top: -516PX;
  width: 20%;
  z-index: 2;
  }

  .buttonheader{background-color: #33ceff;
    margin-top: -100PX;
    margin-left: 42%;
    position: absolute;
    color: white;
    width: 13%;
    height: 40PX;
    border-style: none;
    z-index: 1;}
  .navbar{ 
    margin-top: -530PX;
    position: fixed;
    margin-left: 0%;
    height: 50px;
    width: 100%;
    z-index: 1;
    }
  
    .navbar-nav .nav-link.active{ color:#33ceff;}
  
  .collapse{justify-content: center;
  color:#33ceff;}
  .navbar-nav > li > a{font-size: 20PX;
    font-weight: 600;
  margin-left: 20PX;
  color: white;
  }
  
    h1{text-align: center;
    font-size: 40px;
  color: #33ceff;
font-weight: 700;
margin-top: 6%;}
    .photosmagasin{width: 50%;
    margin-left: 25%;
margin-top: 10%;
border-radius: 50px;}
.conteneur1{display: flex;
justify-content: space-around;}

.comptoire{width: 40%;
            height: 325PX;
          border-radius: 50px;
        margin-top: 20PX;
      margin-left: 4%;}

.salon{width: 40%;
        height: 325PX;
      border-radius: 50px;
      margin-top: 20PX;
}
.conteneur2{display: flex;
  justify-content: space-around;}
  .pièces{width: 40%;
    height: 325PX;
  border-radius: 50px;
  margin-top: 20PX;
margin-left: 5%;}

  .degraissant{width: 40%;
    height: 325PX;
  border-radius: 50px;
  margin-top: 20PX;
}

.conteneur3{display: flex;
  justify-content: space-around;}
  .stock{width: 40%;
    height: 325PX;
  border-radius: 50px;
  margin-top: 20PX;
margin-left: 6%;}
.stock2{width: 40%;
  height: 325PX;
border-radius: 50px;
margin-top: 20PX;
}

.conteneur4{display: flex;
  justify-content: space-around;}
  .batterie{width: 40%;
    height: 325PX;
  border-radius: 50px;
  margin-top: 20PX;
margin-left: 6%;}
.restagraf{width: 40%;
  height: 325PX;
border-radius: 50px;
margin-top: 20PX;
}



            footer{width: 100%;
              height: 340PX;
              background: rgb(242,164,9);
              background: linear-gradient(0deg, rgba(242,164,9,1) 0%, rgba(232,117,4,0.9791316184676996) 100%);
            
              position: absolute;
              margin-top: 400px;}
              
              .logofooter{width: 15%;
              margin-left: 43%;}
              
              .textefooter{text-align: center;}

              .facebook{margin-top: 40PX;
                margin-left: -60PX;}
              

              .mention{position: absolute;
                color: white;
              margin-left: 30%;
            margin-top: 10PX;}
            
              .politique{position: absolute;
                color: white;
                margin-left: 47%;
                margin-top: -15PX;
              }


@media screen and (min-width: 300px) and (max-width: 650px){

  header{margin-top: -180px; }
  .entete{height: 400PX;}
  img.entete{ height:390PX;}
.logo{margin-top: -50%;
margin-left: 30%;
width: 35%;
height: 70px;}
.textelogo{font-size: 10PX;
margin-top: -30%;
font-weight: bold;
width: 50%;
margin-left: 24%;}  

.navbar{margin-top: -120px;
  margin-left: -50%;
  position: fixed;
z-index: 2; }
.navbar-collapse{display: flex;
margin-left: 50%;
margin-top: 0%;
background-color: orange;
z-index: 1;}
.navbar-toggler{color: orange;
height: 42px;
width: 52PX;
margin-left: 50%;
z-index: 1;}
.navbar-toggler-icon{background-color: aliceblue;}


.buttonheader{margin-top: -12%;
  width: 30%;
height: 25PX;
margin-left: 35%;
font-size: 10PX;}

.photosmagasin{width: 75%;
  height: 165PX;
  margin-left: 15%;
margin-top: 10%;
border-radius: 25px;}
.conteneur1{display: flex;
flex-direction: column;}

.comptoire{width: 75%;
          height: 165PX;
        border-radius: 25px;
      margin-top: 20PX;
    margin-left: 15%;}

.salon{width: 75%;
      height: 165PX;
    border-radius: 25px;
    margin-top: 20PX;
    margin-left: 15%;
}
.conteneur2{display: flex;
flex-direction: column;}
.pièces{width: 75%;
  height: 165PX;
border-radius: 25px;
margin-top: 20PX;
margin-left: 15%;}

.degraissant{width: 75%;
  height: 165PX;
border-radius: 25px;
margin-top: 20PX;
margin-left: 15%;}

.conteneur3{display: flex;
flex-direction: column;}
.stock{width: 75%;
  height: 165PX;
border-radius: 25px;
margin-top: 20PX;
margin-left: 15%;}
.stock2{width: 75%;
height: 165PX;
border-radius: 25px;
margin-top: 20PX;
margin-left: 15%;
}

.conteneur4{display: flex;
flex-direction: column;}
.batterie{width: 75%;
  height: 165PX;
border-radius: 25px;
margin-top: 20PX;
margin-left: 15%;}
.restagraf{width: 75%;
height: 165PX;
border-radius: 25px;
margin-top: 20PX;
margin-left: 15%;
}
footer{height: 260PX;
  margin-top: 160PX;
}
.logofooter{margin-top: 5%;
  width: 25%;
  margin-left: 38%;} 
  
  .textefooter{font-size: 13PX;}
  .mention{margin-left: 2px;}

  .buttonfooter{margin-top:60px;
    background-color: #33ceff;
    position: absolute;
    color: white;
    width: 40%;
    height: 40PX;
    border-style: none;
    margin-left: 30%;}

    .mention{margin-left: 25%;
      font-size: 10PX;} 
    .politique{font-size: 10px;
    margin-left: 55%;}
}




@media(min-width:1000px){
  .navbar{background: rgb(242,164,9);
  background: linear-gradient(0deg, rgba(242,164,9,1) 0%, rgba(232,117,4,0.9791316184676996) 100%); }}


  @media screen and (min-width: 651px) and (max-width: 1023px){ 
    .entete{width: 100%;
      height: 400PX;
      filter: brightness(60%);
      }
    
      .logo{position:absolute;
        width: 22%;
      height: 14%;
      margin-top: -50%;
      margin-left: 40%;
      z-index: 1;
      }
    
      .textelogo {position:absolute;
        color:white;
      margin-top: -250PX;
      margin-left: 25%;
      width: 50%;
      text-align: center;
      z-index: 1;
      font-size: 14PX;
    font-weight: 700;}
    
    
    .buttonheader{background-color: #33ceff;
    margin-top: -180PX;
    margin-left: 43%;
    position: absolute;
    color: white;
    width: 18%;
    height: 30PX;
    border-style: none;
  font-size: 14PX;}
    
    .paiement{position: absolute;
      width: 16%;
    margin-top: -295px;
    margin-left: 75%;
    z-index: 1;
    rotate: 12deg;}

    .navbar{margin-top: -390px;
      margin-left: -48%;
      position: fixed;
  z-index: 1; }
    .navbar-collapse{display: flex;
    margin-left: 40%;
  margin-top: 0%;
  background-color: orange;}
    .navbar-toggler{color: orange;
    height: 42px;
  width: 52PX;
  margin-left: 50%;}
  .navbar-toggler-icon{background-color: aliceblue;} }
  
  @media screen and (min-width: 1300px) {
    .entete{
      width: 100%;
      height: 750PX;
      filter: brightness(60%);
      }
    
       .logo{position:absolute;
        width: 30%;
      height: 40%;
      margin-top: -34%;
      margin-left: 36%;
      z-index: 1;
      }
    
      .textelogo {position:absolute;
        color:white;
      margin-top: -280PX;
      margin-left: 26%;
      width: 50%;
      text-align: center;
      z-index: 1;
      font-size: 18PX;
    font-weight: 700;}

    
  
  
  .buttonheader{background-color: #33ceff;
    
  margin-top: -160PX;
  margin-left: 44%;
  position: absolute;
  color: white;
  width: 13%;
  height: 40PX;
  border-style: none;
  z-index: 1;}
  
  
  
  .numero{color: black;
    font-size: 16px;}
    .num{position: absolute;
    margin-left: 3%;
    margin-top: -736PX;
    width: 20%;
    z-index: 2;
    }
    .adresse{color: black;
    font-size: 16px;}
    .adr{position: absolute;
    color:wheat;
    font-size: 5PX;
    margin-left: 80%;
    margin-top: -736PX;
    width: 20%;
    z-index: 2;
    }
  
  .navbar{ 
    margin-top: -750PX;
    position: fixed;
    margin-left: 0%;
    height: 50px;
    width: 100%;
    z-index: 1;
    }
  
    .navbar-nav .nav-link.active{ color:#33ceff;}
  
  .collapse{justify-content: center;
  color:#33ceff;}
  .navbar-nav > li > a{font-size: 20PX;
    font-weight: 600;
  margin-left: 20PX;
  color: white;
  }
  footer{width: 100%;
    height: 395PX;
    background: rgb(242,164,9);
    background: linear-gradient(0deg, rgba(242,164,9,1) 0%, rgba(232,117,4,0.9791316184676996) 100%);
    position: absolute;
    margin-top: 275px;}}
          
 @media only screen 
  and (min-device-width: 1440px) 
  and (max-device-width: 1440px) 
  and (min-device-height: 900px) 
  and (max-device-height: 900px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    
 


 .logo{margin-top: -42%;}

  .conteneur1{margin-top: 20%;} }