.entete{width: 100%;
    height: 580PX;
  filter: brightness(60%);}
  
  .logo{position: absolute;
    width: 30%;
  height: 40%;
  margin-top:   -40%;
  margin-left: 36%;
  z-index: 1;}
  .textelogo {position:absolute;
    color:white;
  margin-top: -270PX;
  margin-left: 36%;
  width: 30%;
  text-align: center;
  z-index: 1;
  font-size: 16PX;}

  .buttonheader{background-color: #33ceff;
    margin-top: -200PX;
    margin-left: 44%;
    position: absolute;
    color: white;
    width: 15%;
    height: 40PX;
    border-style: none;}
  
  .numero{color: black;
  font-size: 16px;}
  .num{position: absolute;
  margin-left: 3%;
  margin-top: -566PX;
  width: 20%;
  z-index: 2;
  }
  .adresse{color: black;
  font-size: 16px;}
  .adr{position: absolute;
  color:wheat;
  font-size: 5PX;
  margin-left: 76%;
  margin-top: -566PX;
  width: 20%;
  z-index: 2;
  }

.page {position: absolute;
     width: 44%;
    text-align: center;
    margin-left: 30%;
  margin-top: -70px;
color:white;
background: rgb(45,222,253);
background: linear-gradient(0deg, rgba(45,222,253,1) 0%, rgba(4,149,175,1) 100%); 
font-size: 36PX;
font-weight: 700;
border-radius: 20PX;}

h2{font-weight: 700;
text-decoration: underline;
text-underline-offset: 16PX;
margin-left: 2%;}
 
.accroche{margin-top: 22PX;
  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:#33ceff;}
  
  .collapse{justify-content: center;}
  .navbar-nav > li > a{font-size: 20PX;
    font-weight: 400;
  margin-left: 20PX;
  color: white;
  }
  
  .titre{color:orange;
  font-weight: 700;}
.conteneur1{display: flex;
justify-content: space-around;
margin-top: 110PX;
} 
p{color:black;
font-weight: bold;
font-size: 24PX;
text-align: center;}
.rang1{width: 20%;
height: 300PX;
margin-top: 20PX;
border-bottom: solid 3px gray;
}
.texte{color:black; 
font-size: 17px;
font-weight: 600;}


.conteneur2{display: flex;
  justify-content: space-around;
} 
  p{color:orange;
  font-weight: bold;
  font-size: 24PX;
  text-align: center;}
  .rang2{width: 20%;
  height: 250PX;
margin-top: 50PX;
border-bottom: solid 3px gray;
} 

.conteneur3{display: flex;
  justify-content: space-around;} 
  p{color:orange;
  font-weight: bold;
  font-size: 24PX;
  text-align: center;}
  .rang3{width: 20%;
  height: 256PX;
margin-top: 50PX;
border-bottom: solid 3px gray;
} 

.conteneur4{display: flex;
  justify-content: space-around;} 
  p{color:orange;
  font-weight: bold;
  font-size: 24PX;
  text-align: justify;}
  .rang4{width: 20%;
  height: 250PX;
margin-top: 50PX;
border-bottom: solid 3px gray;
} 

.conteneur5{display: flex;
  justify-content: space-around;} 
  p{color:orange;
  font-weight: bold;
  font-size: 24PX;
  text-align: center;}
  .rang5{width: 20%;
  height: 280PX; 
margin-top: 50PX;
border-bottom: solid 3px gray;
 
} 

.conteneur6{display: flex;
  justify-content: space-around;} 
  p{color:orange;
  font-weight: bold;
  font-size: 24PX;
  text-align: center;}
  .rang6{width: 20%;
  height: 290PX;
margin-top: 50PX;
border-bottom: solid 3px gray;
 
 
} 

.conteneur7{display: flex;
  justify-content: space-around;} 
  p{color:orange;
  font-weight: bold;
  font-size: 24PX;
  text-align: center;}
  .rang7{width: 20%;
  height: 295PX;
 margin-top: 50PX;
 border-bottom: solid 3px gray;

 
} 

.huile {width: 20%;
margin-left: 40%;}
.frein{width:25%;
margin-left: 40%;}
.textefrein{color:black; 
  font-size: 16px;
  font-weight: 600;
margin-top: 7%;}
.essuie-glace{width: 25%;
margin-left: 40%;}
.filtre{width: 26%;
  margin-left: 40%;
margin-top: -8%;}
.moteur{width: 25%;
margin-left:40% ;}
.bougie{width: 15%;
height:80PX;
margin-left:40%;
rotate: 20deg;}
.batterie{width:25%;
margin-left:40% ;
margin-top: 2%;}
.resistance{width:40%;
  margin-left:35%;}
.vanne{width:40%;
  margin-left:35%;
margin-top: 5%;}
.pneu{width:32%;
  margin-left:35% ;}
  .courroie{width: 35%;
  margin-left: 35%;}
  .radiateur{width:20%;
    margin-left:40% ;}
.carrosserie{width: 25%;
  margin-left: 35%;}

  .roulementsbras{width: 30%;
    margin-left: 35%;}
 .pharearav{width:30%;
    margin-left:40%;}
  .textephare{color:black; 
      font-size: 16px;
      font-weight: 600;
    margin-top: 7%;}
    .roulements{width:22%;
      margin-left: 40%;}
  .texteroulements{color:black; 
        font-size: 16px;
        font-weight: 600;
      margin-top: 7%;} 
      .moteur{width: 30%;
      margin-left:40% ;}
      .bougie{width: 20%;
      height:80PX;
      margin-left:40%;
      rotate: 20deg;}
      .batterie{width:25%;
      margin-left:40% ;}
     .turbo{width: 25%;
        margin-left: 35%;}
        .echapement{width:42%;
          margin-left:33% ;}
        .attelage{width: 20%;
          margin-left: 35%;
        margin-top:3%;}
        .texteattelage{color:black; 
          font-size: 16px;
          font-weight: 600;
        margin-top: 7%;}

        .verin{width: 40%;
          margin-left: 35%;
        margin-top:-4%}

        .filtrehabitacle{width: 30%;
        margin-left: 33%;}

        .injecteur{width: 30%;
          margin-left: 33%;}
       
        .amortisseur{width:30%;
          margin-left:40% ;}
    .boitevitesse{width:25%;
  margin-left:40%;
margin-top: -5%;}
.triangle{width:40%;
  margin-left:35%;
margin-top: -7%;}
.rotule{width:42%;
  margin-left:35%;
margin-top: -7%;}



footer{width: 100%;
  height: 320PX;
  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: 260px;}
  
  .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{margin-top:100px;
  background-color: #33ceff;
  position: absolute;
  color: white;
  width: 15%;
  height: 40PX;
  border-style: none;
  margin-left: 43%;}
  


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

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

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



 

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


.page{width: 90%;
height: 30%;
margin-left: 6%;
margin-top: -20px;}

.titre{color:orange;
  font-weight: 700;
font-size: 20px;}

  .conteneur1{flex-direction: column;
  text-align: center;
margin-top: 180px;} 
    .p{color:black;
    font-weight: bold;
    font-size: 20PX;
    text-align: center;} 
    .rang1{width: 60%;
      height: 250PX;
      margin-top: 40PX;
    margin-left: 20%;}
      .texte{color:black; 
      font-size: 16px;
      font-weight: 600;}

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

            .conteneur3{flex-direction: column;
              text-align: center;} 
                .p{color:black;
                font-weight: bold;
                font-size: 20PX;
                text-align: center;} 
                .rang3{width: 60%;
                  height: 250PX;
                  margin-top: 40PX;
                margin-left: 20%;}


                  .texte{color:black; 
                  font-size: 16px;
                  font-weight: 600;}

                  .conteneur4{flex-direction: column;
                    text-align: center;} 
                      .p{color:black;
                      font-weight: bold;
                      font-size: 20PX;
                      text-align: center;} 
                      .rang4{width: 60%;
                        height: 250PX;
                        margin-top: 40PX;
                      margin-left: 20%;}
                        .texte{color:black; 
                        font-size: 16px;
                        font-weight: 600;}

                        .conteneur5{flex-direction: column;
                          text-align: center;} 
                            .p{color:black;
                            font-weight: bold;
                            font-size: 20PX;
                            text-align: center;} 
                            .rang5{width: 60%;
                              height: 250PX;
                              margin-top: 40PX;
                            margin-left: 20%;}
                              .texte{color:black; 
                              font-size: 16px;
                              font-weight: 600;}


                              .conteneur6{flex-direction: column;
                                text-align: center;} 
                                  .p{color:black;
                                  font-weight: bold;
                                  font-size: 20PX;
                                  text-align: center;} 
                                  .rang6{width: 60%;
                                    height: 250PX;
                                    margin-top: 40PX;
                                  margin-left: 20%;}
                                    .texte{color:black; 
                                    font-size: 16px;
                                    font-weight: 600;}

                                    .conteneur7{flex-direction: column;
                                      text-align: center;} 
                                        .p{color:black;
                                        font-weight: bold;
                                        font-size: 20PX;
                                        text-align: center;} 
                                        .rang7{width: 60%;
                                          height: 260PX;
                                          margin-top: 40PX;
                                        margin-left: 20%;}
                                          .texte{color:black; 
                                          font-size: 16px;
                                          font-weight: 600;}


 .huile {width: 20%;
    margin-left: 10%;}
 .frein{width:25%;
 margin-left: 10%;}
.essuie-glace{width: 30%;
 margin-left: 10%;}
 .moteur{width: 20%;
  margin-left:6% ;}
 .bougie{width: 20%;
   height:80PX;
   margin-left:10%;
    rotate: 20deg;}
   .batterie{width:25%;
   margin-left:10% ;}
   .pneu{width:32%;
   margin-left:5% ;}
 .pharearav{width:25%;
    margin-left:10% ;}
    .resistance{width:40%;
      margin-left:10%;}
    .vanne{width:40%;
      margin-left:10%;
    margin-top: 5%;}
    
      .courroie{width: 30%;
      margin-left: 10%;}
      .radiateur{width:20%;
        margin-left:10% ;}
    .carrosserie{width: 20%;
      margin-left: 10%;}
      .roulements{width: 20%;
        margin-left: 10%;}
      .roulementsbras{width:30%;
        margin-left: 10%;}

    .filtre{width: 20%;
      margin-left: 10%;
    margin-top: -8%;} 
    
    .turbo{width: 20%;
      margin-left: 10%;}
      .echapement{width:42%;
        margin-left:10% ;}
      .attelage{width: 20%;
        margin-left: 10%;
      margin-top:3%;}
      .texteattelage{color:black; 
        font-size: 16px;
        font-weight: 600;
      margin-top: 7%;}

      .verin{width: 30%;
        margin-left: 10%;
      margin-top:-4%}

      .filtrehabitacle{width: 30%;
      margin-left: 10%;}
      .injecteur{width: 30%;
        margin-left: 10%;}
     
      .amortisseur{width:30%;
        margin-left:10% ;}
  .boitevitesse{width:25%;
margin-left:10%;
margin-top: -5%;}
.triangle{width:40%;
  margin-left:10%;
margin-top: -7%;}

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

  
  footer{width: 100%;
    height: 260PX;
    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: 180px;}
    
    .logofooter{width: 25%;
    margin-left: 38%;} 
    
    .textefooter{font-size: 13PX;}}

    .facebook{margin-top: 40PX;
      margin-left: -60PX;}
      .mention{margin-left: 22%;
      font-size: 14PX;} 
    .politique{font-size: 14px;
    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: -240PX;
                                            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: 42%;
                                          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: -380px;
                                            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;}  
                                         .titre{font-size: 20px;}   
                                        .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; } 
                                          p{color:orange;
                                          font-weight: bold;
                                          font-size: 18PX;
                                          text-align: justify;}
                                          .rang1{width: 40%;
                                          height: 250PX;
                                          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: 60PX;
                                          overflow: hidden;} 
                                            .conteneur3{display: flex;
                                              flex-flow: wrap;} 
                                              p{color:orange;
                                              font-weight: bold;
                                              font-size: 18PX;
                                              text-align: center;}
                                              .rang3{width: 40%;
                                              height: 245PX;
                                              
                                            margin-top: 20PX;} 
                                            
                                            .conteneur4{display: flex;
                                              flex-flow: wrap;} 
                                              p{color:orange;
                                              font-weight: bold;
                                              font-size: 18PX;
                                              text-align: center;}
                                              .rang4{width: 40%;
                                              height: 230PX; 
                                            margin-top: 20PX;} 
                                            
                                            .conteneur5{display: flex;
                                              flex-flow: wrap;} 
                                              p{color:orange;
                                              font-weight: bold;
                                              font-size: 18PX;
                                              text-align: center;}
                                              .rang5{width: 40%;
                                              height: 240PX;
                                              
                                            margin-top: 20PX;} 
                                            
                                            .conteneur6{display: flex;
                                              flex-flow: wrap;} 
                                              p{color:orange;
                                              font-weight: bold;
                                              font-size: 18PX;
                                              text-align: center;
                                            overflow: hidden;}
                                              .rang6{width: 40%;
                                              height: 240PX;
                                              margin-top: 20PX;} 
                                            
                                            .conteneur7{display: flex;
                                              flex-flow: wrap;} 
                                              p{color:orange;
                                              font-weight: bold;
                                              font-size: 18PX;
                                              text-align: center;}
                                              .rang7{width: 40%;
                                              height: 280PX;
                                             
                                            margin-top: 20PX;}
                                          
                                           .pneu{width:32%;
                                              margin-left:28% ;} 
                                            
                                            
  .buttonfooter{margin-top:80px;
    background-color: #33ceff;
    position: absolute;
    color: white;
    width: 20%;
    height: 40PX;
    border-style: none;
    margin-left: 42%;}
  
    .mention{position: absolute;
      color: white;
    margin-left: 35%;
  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: 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;
    }
    .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;
    margin-left: 42%;}
    
    .accroche{margin-top: 24PX;
      text-align:center;
    font-size: 20PX;
    color:white;
    font-weight: -600;
    margin-left: 2%;}
    
    
    footer{width: 100%;
      height: 400PX;
      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: 285px;}

     
.mention{position: absolute;
  color: white;
margin-left: 42%;
margin-top: 10PX;}
    }  
                                          
                                          
  @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: 10%;} }