.entete{width: 100%;
    height: 580PX;
    filter: brightness(60%);
    
  }
  
  .logo{position: absolute;
    width: 30%;
  height: 40%;
  margin-top:   -42%;
  margin-left: 35%;
  z-index: 1;
  }
  .textelogo {position:absolute;
    color:white;
  margin-top: -320PX;
  margin-left: 25%;
  width: 50%;
  text-align: center;
  z-index: 1;
  font-size: 18PX;}
  
  button{background-color: #33ceff;
    margin-top: -210PX;
    margin-left: 43%;
    position: absolute;
    color: white;
    width: 16%;
    height: 40PX;
    border-style: none;
  font-size: 14PX;}
  
  
  
  .numero{color: black;
  font-size: 16px;}
  .num{position: absolute;
  margin-left: 2%;
  margin-top: -566PX;
  width: 20%;
  z-index: 2;
  }
  .adresse{color: black;
  font-size: 16px;}
  .adr{position: absolute;
  color:wheat;
  font-size: 5PX;
  margin-left: 80%;
  margin-top: -566PX;
  width: 20%;
  z-index: 2;}
  
  .page{position: absolute;
    width: 50%;
    text-align: start;
    margin-left: 25%;
  margin-top: -80px;
  color:white;
  background: rgb(45,222,253);
  background: linear-gradient(0deg, rgba(45,222,253,1) 0%, rgba(4,149,175,1) 100%); 
  border-radius: 20px;
  font-size: 30PX;
  font-weight: 700;}

  h2{font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 18PX;
  text-align: center;}
  
  .accroche{margin-top: 24PX;
    text-align:start;
  font-size: 16PX;
  color:white;
  font-weight: -600;
  margin-left: 2%;}
  
  
  .navbar{ 
  margin-top: -580PX;
  position: fixed;
  margin-left: 0%;
  height: 50px;
  width: 100%;
  z-index: 1;}
  .navbar-nav .nav-link.active{ color: orangered;}
  
  .collapse{justify-content: center;}
  .navbar-nav > li > a{font-size: 20PX;
    font-weight: 400;
  margin-left: 20PX;
  color: white;
  }
  
  .texte{color:black; 
    font-size: 16px;
    font-weight: 600;
  text-align:center;}

    .titre{color:orange;
      font-weight: 700;
    text-align: center;}
    
  
  .conteneur1{display: flex;
  justify-content: space-around;} 
  p{color:orange;
  font-weight: bold;
  font-size: 22PX;
  text-align: center;}
  .rang1{width: 20%;
  height: 250PX;
   margin-top: 140PX;
  border-bottom: solid 3PX;} 
  
  
  .conteneur2{display: flex;
  justify-content: space-around;} 
  p{color:orange;
  font-weight: bold;
  font-size: 22PX;
  text-align: center;}
  .rang2{width: 20%;
  height: 270PX;
  margin-top: 20PX;
  border-bottom: solid 3PX;
} 

  .pot{width:30%;
    margin-left: 35%;}
.huile{width:30%;
  margin-left: 35%;}
  .pistolet{width:40%;
  margin-left: 35%;}
  .produit{width:20%;
    margin-left: 38%;}
    .adblue{width:20%;
      margin-left: 38%;}

  
  
  
  
  
  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%);
    margin-top: 0px;
    position: absolute;
    margin-top: 250px;}
    
    .logofooter{width: 15%;
    margin-left: 43%;}
    

     
  .textefooter{text-align: center;
    color: black;
  font-weight: 400;
  font-size: 16PX;}
  .facebook{margin-top: 40PX;
    margin-left: -60PX;}

  .mention{position: absolute;
    color: white;
  margin-left: 35%;
margin-top: 10PX;}

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

  .buttonfooter{background-color: #33ceff;
    margin-top: 80PX;
    margin-left: 43%;
    position: absolute;
    color: white;
    width: 15%;
    height: 40PX;
    border-style: none;}
    
  @media screen and (min-width: 300px) and (max-width: 650px){

    header{margin-top: -180px; }
    .entete{height: 400PX;}
    img.entete{ height:400PX;}
    .logo{margin-top: -46%;
      margin-left: 32%;
    width: 35%;
  height: 70px;}
  .textelogo{font-size: 10PX;
  margin-top: -28%;
  font-weight: bold;}
  
  .navbar{margin-top: -100px;
    margin-left: -52%;
    position: fixed;
  z-index: 1; }
  .navbar-collapse{display: flex;
  margin-left: 50%;
  margin-top: 0%;
  background-color: orange;}
  .navbar-toggler{color: orange;
  height: 42px;
  width: 52PX;
  margin-left: 52%;}
  .navbar-toggler-icon{background-color: aliceblue;}
   
     .buttonheader{margin-top: -15%;
    width: 30%;
  height: 25PX;
  margin-left: 35%;
  font-size: 10PX;}
  
  
  .page{width: 90%;
  height: 28%;
  margin-left: 6%;
  margin-top: -23px;}
  h2{font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 7PX;
  text-align: center;}

  .accroche{font-size: 14PX;}
    .conteneur1{flex-direction: column;
    text-align: center;
  margin-top: 120px;} 
      .p{color:black;
      font-weight: bold;
      font-size: 20PX;
      text-align: center;} 
      .rang1{width: 60%;
        height: 260PX;
        margin-top: 70PX;
      margin-left: 20%;
    }

      .pot{width:30%;
        margin-left: 13%;}
    .huile{width:30%;
      margin-left: 12%;}
      .pistolet{width:40%;
      margin-left: 14%;}
      .produit{width:20%;
        margin-left: 14%;}
        .adblue{width:20%;
          margin-left: 14%;}


      

        .conteneur2{flex-direction: column;
          text-align: center;} 
            .p{color:black;
            font-weight: bold;
            font-size: 20PX;
            text-align: center;} 
            .rang2{width: 60%;
              height: 270PX;
              margin-top: 70PX;
            margin-left: 20%;
          border-bottom: solid 3px;}
              .texte{color:black; 
              font-size: 16px;
              font-weight: 600;}

              footer{height: 280PX;
                margin-top: 185PX;
              }
              .logofooter{margin-top: 5%;
                width: 25%;
                margin-left: 38%;} 
                
                .textefooter{font-size: 13PX;}
             
            
                .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: -280px;
                    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;} 
                
                .page{position: absolute;
                  width: 60%;
                  text-align: start;
                  margin-left: 22%;
                margin-top: -80px;
                color:white;
                background: rgb(45,222,253);
                background: linear-gradient(0deg, rgba(45,222,253,1) 0%, rgba(4,149,175,1) 100%); 
                border-radius: 20px;
                font-size: 30PX;
                font-weight: 700;}
                .conteneur1{display: flex;
                  flex-flow: wrap;  
                margin-top: 60PX;} 
                  p{color:orange;
                  font-weight: bold;
                  font-size: 18PX;
                  text-align: justify;}
                  .rang1{width: 40%;
                  height: 300PX;
                  margin-top: 60PX;
               
               
                } 

                  .conteneur2{display: flex;
                    flex-flow: wrap;} 
                    p{color:orange;
                    font-weight: bold;
                    font-size: 18PX;
                    text-align:justify;}
                    .rang2{width: 40%;
                    height: 240PX;
                   margin-top: 50PX;  }
                   
                   .buttonfooter{background-color: #33ceff;
                    margin-top: 80PX;
                    margin-left: 40%;
                    position: absolute;
                    color: white;
                    width: 20%;
                    height: 40PX;
                    border-style: none;}

                    .mention{position: absolute;
                      color: white;
                    margin-left: 25%;
                  margin-top: 10PX;}
                
                }
                        
  
                @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;}
                
                .paiement{position: absolute;
                  width: 14%;
                margin-top: -395px;
                margin-left: 73%;
                z-index: 1;
                rotate: 12deg;}
                
                .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: 78%;
                  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: rgb(6, 118, 103);}
                
                .collapse{justify-content: center;
                color:#33ceff;}
                .navbar-nav > li > a{font-size: 20PX;
                  font-weight: 600;
                margin-left: 20PX;
                color: white;
                }
                .page{position: absolute;
                  width: 50%;
                  text-align: start;
                  margin-left: 25%;
                margin-top: -80px;
                color:white;
                background: rgb(45,222,253);
                background: linear-gradient(0deg, rgba(45,222,253,1) 0%, rgba(4,149,175,1) 100%); 
                border-radius: 20px;
                font-size: 30PX;
                font-weight: 700;}
              
                h2{font-weight: 700;
                  text-decoration: underline;
                  text-underline-offset: 18PX;
                text-align: center;}
                
                .accroche{margin-top: 24PX;
                  text-align:center;
                font-size: 20PX;
                color:white;
                font-weight: -600;
                margin-left: 2%;}

                .rang2{width: 20%;
                  height: 270PX;
                  margin-top: 20PX;
                  border-bottom: solid 3PX;
                } 
                
             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%;}}