*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none; 
  /* border: 1px solid red; */
}

html, body {
            height: 100%;
            font-family: Montserrat, Helvetica, sans-serif;  
            display: flex;   
            flex-direction: column;
            color: rgb(24, 37, 52);
            background-color: #ffffff;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath           fill='%2300126b' fill-opacity='0.3' d='M1           3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
           }

          
 

nav {
  position: fixed; 
  z-index: 2;
  width: 100%; 
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 15px 25px;                          
  background: #fafafa;
  box-shadow: inset 0px -1px 0px #c5c5c6;    /*faire une bordure ou ombrage (sans épaisseur, Opx)*/
}
.nav-icon {
  display: flex;
  align-items: center;
}

.nav-icon span {
  font-family: Roboto Flex, sans-serif;
  font-size: 25px;
  margin-left: 10px;
  font-weight: 400;
  color: #333;
}

.nav-icon img {
  width: 300px;}

.hamburger {
  display: none;
}

.navlinks-container a {
  margin: 0 10px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  color: #142635;
  display: inline-block;
  position: relative;
}
.navlinks-container a::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -3px;
  width: 100%;
  height: 1px;
  transform: scale(0);
  transform-origin: left;
  background: #333;
  transition: transform 0.3s ease-out;
}
.navlinks-container a:hover::after {
                                    transform: scaleX(1);
                                    }

.sign-btns button { font-family: Roboto Flex, sans-serif;
                    font-size: 16px;
                    min-width: 90px;
                    padding: 10px 15px;
                    margin: 0 5px;
                    border-radius: 5px; 
                    background: rgb(78,161,83);
                    color: white;
                    cursor: pointer;
                    border: none;
                    }


/*-------------------------------*/
/*-------------------------------*/
/*-------------------------------*/
/*-------------------------------*/







#main {display: flex;
       flex-grow: 1;
       justify-content: center;
       align-items: center;
      }

#hero {width: 50%; 
       display: flex;
       flex-direction: column;
       align-items: center; 
       margin-top: 150px;    position: relative;
      }

#hero > img {position: absolute; 
             top: -45px; 
             }

#hero > img:hover {transform: rotate(150deg);}

#maingauche {max-width: 700px; min-width: 90%;    /*cadre blanc */       
             height: 400px;
             padding: 15px;
             margin: 10px; 
             background-color: #ffffff;
             line-height: 50px;
             border-radius: 5px; 
             flex-direction: column;
             justify-content: space-around;                  
             display: flex;  
             box-shadow: 0 0 33px rgba(233, 232, 232, 0.8);
            }


#maingauche h1 {font-size: clamp(33px, 3vw, 40px);       /*votre partenaire de confiance.. */
                            position: relative; 
                            padding-bottom: 30px; 
                            padding-top: 35px;                    
                            text-align: center;
                            }

#maingauche > a { font-size: clamp(25px, 3vw, 33px);  /*03 20 46 17 54 */
                             padding: 10px;        
                             text-align: center; 
                             background: radial-gradient(circle, rgba(78,161,83,1) 0%, rgba(69,121,9,1) 100%);
                             color: white;
                             border-radius: 5px;
                             letter-spacing: 3px;
                             font-weight: bolder;
                             text-shadow: 1px 2px rgb(24, 37, 52);                
                            }

 #maingauche > a:nth-child(3) {font-size: clamp(25px, 3vw, 33px);       /*06 43 98 18 27 */
                              text-align: center;   
                              color: white;                  
                              margin: 10px;                 min-width: 80%;
                              padding: 5px;
                              background: radial-gradient(circle, rgba(12,99,111,1) 0%, rgba(0,73,83,1) 100%);
                              border-radius: 5px;
                             letter-spacing: 3px;
                             font-weight: bolder;
                             text-shadow: 1px 2px rgb(24, 37, 52);            
                             }

#send_contain {width: 50%;
               height: 60px;
               margin: 10px auto;
               display: flex;
               justify-content: space-around;
               align-items: center;
              }






/* #maingauche a:nth-child(4) {text-align: center;            
               display: flex; 
               justify-content: center;       ----email----
               align-items: center;
               padding: 10px;
               color: rgb(24, 37, 52);
               padding: 5px 10px; border: 1px solid red;
              } */

/* #maingauche a:nth-child(4):hover {background-color: rgb(244, 251, 235) ;}

#maingauche a img {margin-right: 10px; border-radius: 20px;} */


#send_contain a {display: flex; 
                 justify-content: center; 
                 align-items: center;
                }



.lesplus {display: flex;
          align-items: center;
          margin-top: 25px;
          padding: 10px;
          background: white; 
          box-shadow: 0 0 33px rgba(233, 232, 232, 0.8);}

.lesplus img {padding-right: 10px;}
.lesplus span {font-weight: 600;}
.lesplus:hover {background-color: rgba(252,252,201,1) ;}


#herodroite {width:50%; 
             height: 100vh;
            }


#herodroite img {height: 100vh;
                 object-fit: cover;
                }
                 

/*---------------Footer----------------*/
/*---------------Footer----------------*/
/*---------------Footer----------------*/

footer {width: 100%;
        height: 150px;
        display: flex; 
        align-items: flex-start;
        background-color: rgb(20, 34, 46);  
        color: #fafafa;
       }
                
footer img {margin: 15px;}
                
footer a {color: #e6e6e7;
          border-bottom : 0.5px solid rgba(255, 255, 255, 0.338);
          padding: 15px 0 1px 0; 
          margin: 0 40px;
          }
                
.af {display: flex;
     flex-wrap: wrap; 
     margin: 0 auto;
     justify-content: center;
    }


/*---------------SERVICES----------------*/

.servicegras {font-weight: 600;}

#cadre1 {width: 80%; min-width: 735px;
         height: auto; max-height: 675px;
         display: flex;
         margin-top: 90px;
         margin-inline: auto;   
         border-radius: 5px;     
         background:  radial-gradient(circle, rgba(12,99,111,1) 0%, rgba(0,73,83,1) 100%);
         box-shadow: 0 0 13px rgba(20,38,53,0.3);
        }

.soucadre {width: 50%;
           height: 98%;
           background-color: white;
           text-align: center; 
          }

.soucadre:nth-child(2) {border-radius: 0 5px 0 0;  
                        color: #142635;
                       }

.soucadre:first-child img {height: 100%;
                           object-fit: cover;
                           object-position: 100% 62%;
                           border-radius: 5px 0 0 0;
                          }

.title100 {width: 80%;
           border-bottom: 2px solid rgb(2, 7, 82);
           display: flex;
           justify-content: center;
           align-items: center;
           margin: 20px auto ;
           padding: 10px 0;
           }

.title100 img {padding-right: 10px;}
.title100 h1 {font-size: clamp(22px, 2vw, 40px);
             }

#artser {height: 75%;
         display: flex;
         flex-direction: column;
         justify-content: space-around;
        }

#art100 {margin: 5px auto 0;
  line-height: 32px; 
 }

#art100 p {margin-block: 25px;
    padding-inline: 10px;
    }

#simbols {display: flex;
   justify-content: center;}
   
#services100 {display: flex;
       flex-wrap: wrap;
       justify-content: space-evenly;
       
      }
      
      .pngactivite {display: flex;
       justify-content: center;
       align-items: center;
       padding-inline: 10px;
       margin-bottom: 11px;
     }
     
     .pngactivite img {margin: 0 10px 5px 0;
     }

#entrecadre {width: 80%;
             height: 199px;
             margin: 20px auto;
             padding: 10px;
             text-align: center;
             border-radius: 5px;
             background-color: rgb(244, 232, 96);}

#cadre2 {width: 80%; 
         min-width: 735px;
         height: 825px; 
         display: flex;
         margin: 40px auto;   
         border-radius: 5px;     
         background:  radial-gradient(circle, rgb(217, 8, 36) 0%, rgba(0,73,83,1) 100%);
         box-shadow: 0 0 13px rgba(20,38,53,0.3);
        }

#art100, #art200 {text-wrap: balance;}
#art200 {margin-block: auto; }


#cadre2 .soucadre:first-child img {object-position: 100% 32%;}


#cadre2 .soucadre:nth-child(2) {display: flex; flex-direction: column;}



.respectsecu h3 {padding: 20px; 
          margin-bottom: 15px;
          display: inline-block;
          background-color: rgb(176, 248, 187);
          color: #142635;
         }

.respectsecu p {padding: 0 40px 20px 40px;
         line-height: 28px; 
        }

#cadre3 {width: 80%; 
         min-width: 735px;
         height: auto; 
         display: flex;         
         margin: 40px auto; 
         box-shadow: 0 0 13px rgba(20,38,53,0.3);
         background-color: #142635;
         border-radius: 5px;
        }

#cadre3 > .soucadre {border-radius: 5px 0 0 0;}

#cadre3 .soucadre:nth-child(2) img {width: 100%; height: 100%;
                                    object-fit: cover;
                                    border-radius: 0 5px 0 0 ;
                                   }

#cadre3 .respectsecu img {transform: rotate(90deg); 
                         }

.respectsecu ul {margin-bottom: 10px; 
                display: flex; 
                align-items: center; 
                justify-content: center;
                font-weight: 500;                
               }

.respectsecu li {background-color: rgba(255, 255, 0, 0.5);
                 line-height: 22px;
                 display: inline-block;
                 padding: 5px 10px;
                 margin: 5px;
                border-radius: 50px;} 
                
                .respectsecu li:hover {background-color: black; color: #fafafa;}

#cadre3 .respectsecu:nth-last-child(1) p {color: #142635; 
                                          margin-top: 10px;
                                         }

#cadre3 .respectsecu:nth-last-child(1) p span {font-weight: 600;}


/*---------------TARIFS----------------*/

#tarifetat {width: 100%;
            height: 300px;
            background-color: #142635;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: 69px;
           }


#photocompteur {display: flex;
                align-items: center;
                }

#toco {margin-left: 10px;}

#expliktarif {color: #fafafa;
              margin: 10px;
              padding-left: 10px;
              border-left: 1px solid #fafafa;
             }
   
#expliktarif p {padding: 10px 0;}
   
   
#expliktarif a {color: #90EE90;
                text-decoration: underline;
               }

#expliktarif span {white-space: nowrap;}



#element_tarif {background-color: #f26956;
                color: #F7F7F7;
                text-align: center;
                padding: 5px;
                font-weight: 500;
                line-height: 25px;
               }

#devist {color: #142635; 
         display: inline-block;
         padding: 3px 10px;
         margin-top: 3px;
         border-radius: 5px;
         background-color: #e6f783;
        }
  
  
#titletarif {display: flex;         
             align-items: center;
             margin: 20px;
             color: #fafafa; 
            }

#titletarif img {padding-right: 10px;}



.prix {width: 90%;
  max-width: 890px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-inline: auto; 
   
 }
.prix:nth-child(2) .tarifde {height: 60%;}
.prix:nth-child(2) .montant {height: 40%;}




.tarif {width: 500px;  position: relative;
   min-width: 300px;
   height: 200px;
   border-radius: 5px;
   margin: 10px auto;
   background-color: #F7F7F7;
   box-shadow: 0 0 10px grey;
  }

.ou {margin-inline: 10px;
font-size: 40px;
font-weight: 800; 
white-space: nowrap;
}

.tarifde {height: 50%;
     padding-top: 10px;
     text-align: center;}

.montant {height: 50%;
     display: flex;
     flex-direction:column;
     justify-content: center;
     align-items: center;
     background-color: #E5E4E2;}

#plusprix {text-align: center;}

.prix:nth-child(1) .montant {height: 30%; 
                        position: absolute; 
                        bottom: 0; 
                        display: inline-block; 
                        width: 100%;
                        padding-top: 10px; 
                        text-align: center;
                   }


.explication {width: 90%;
         max-width: 900px;
         background-color: #90EE90;
         margin: 20px auto 0;
         padding: 10px 15px;
         text-align: center;
         border-radius: 5px;
          }

.explication p {padding-top: 10px;
           line-height: 25px;}

.rouge {background-color: #FDBCB4;
        margin-bottom: 15px;}

.explimg {width: 150px;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-inline: auto;
     border-radius: 5px 5px 5px 0;
     background-color: #F7F7F7;
    }

.explimg img {padding: 5px 5px 0;}




/*---------------Contact----------------*/

#main_contact_group {display: flex; 
                     flex-grow: 1;
                    }

#main_contact {width: 40%; 
               min-width: 617px;
               margin: auto;
               padding: 0 0 20px 0; 
               text-align: center; 
               background-color: white;
               box-shadow: 0 0 33px rgba(233, 232, 232, 0.8);
               line-height: 40px;
              }

#main_contact a {color: inherit;}

#main_contact h3, #main_contact h4, #main_contact p {margin-top: 5px;}
#main_contact p:hover,#main_contact address:hover {background-color: rgba(255, 255, 0, 0.352); 
                                                   font-weight: 500;
                  }

hr { width: 15%; 
     margin-inline: auto;
     border: 1px solid rgba(128, 128, 128, 0.221);
     border-radius: 30%;  
   }

#main_contact address {line-height: 25px;
                       font-style: normal; 
                       padding-top: 5px;
                      }

#moyenscontact {width: 100%; 
                height: 80px;
                display: flex; 
                justify-content: center;
                align-items: center;
                margin-bottom: 15px;
                padding: 10px;
                background: radial-gradient(circle, rgba(38,68,93,1) 0%, rgba(20,38,53,1) 100%);                
               }

#moyenscontact h1 {font-size: clamp(28px, 1em, 35px); 
                   padding-left: 15px;
                   color: #fff;
                  }

#main_contact_photogauche {width:40%; 
                           margin: auto;
                          }

#main_contact_photogauche img {width: 100%;
                               height: auto; 
                               max-height: 100vh;
                               object-fit: cover;}

#main_contact_photogauche img:last-child {display: none;}




/*---------------Mentions légales----------------*/

#main_mentions {width: 100%;
                height: auto;
                display: flex;  
                flex-grow: 1;
                justify-content: center;
                align-items: center;
                text-align: center;
                margin-top: 69px;
                
               }

#photoPL3 {width: 450px;
          }
                    
#ttesinfos {width: 50%; height: auto;
            padding: 20px;
            background-color: #fafafa;}

#main_mentions h3, #main_mentions h4, #main_mentions p {margin: 15px 0;}

#main_mentions h1 {padding: 10px 10px;
                   margin-top: 1px; 
                   color: #fafafa;
                   background-color: #172534;
                  }

#ttesinfos details p {color: #E5E4E2; 
                      font-size: 12px;
                     }





/*---------------CPAM----------------*/

#main_cpam {display: flex;
            flex-direction: column;
            flex-grow: 1;
            justify-content: center;
            align-items: center;
            margin-top: 70px;
           }

           
#scolaire {width: 70%; 
            min-width: 750px;
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 13px;
            position: relative;
            bottom: 90px;
            border-radius: 5px;
            color: #fafafa;
            background: linear-gradient(112.1deg, rgb(32, 38, 57) 11.4%, rgb(63, 76, 119) 70.2%);
            box-shadow: 0 0 13px rgba(20,38,53,0.8);
          }
          
#scolaire #logo_transport {display: flex;
                           align-items: center;
                         }
#logo_transport img {margin-right: 10px;
                    }
          
#scolaire p {width: 80%;
             margin: 10px auto;
             line-height: 29px;
             font-size: clamp(18px, 2vw, 20px);
             }
          
#scolaire a {display: block; 
             text-align: center;
            }
                      
/*---------------Livraison de colis----------------*/
#main_livrcol {width: 100%;
               height: 600px;flex-grow: 1;
               display: flex;
               margin-top: 66px;
              }

#main_colis {width: 50%;
             height: 100%;
             display: flex;
             flex-direction: column;
             justify-content: center;
             background-color:rgba(255, 255, 0, 0.352);
            }

#main_colis img {height: 100%;
                 object-fit: cover;
                }
#colistitle {width: 50%;
             height: 100%;
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
             padding: 10px;
             text-align: center;
             background-color:rgba(234, 234, 41, 0.913);
            }

#colistitle p {line-height: 40px; max-width: 500px;
               padding-top: 15px;
              }
#colistitle p span {font-weight: 700;}



/*---------------Remerciements----------------*/


#main_Ress {width: 80%;
            display: flex; 
            flex-direction: column;
            flex-grow: 1; 
            justify-content: center;
            align-items: center;
            margin: 90px auto;
            padding: 10px 0;
            text-align: center; 
            border-radius: 5px;
            background-color: white;
            box-shadow: 0 0 33px rgba(233, 232, 232, 0.8);
           }

#chance  {width: 80%;
          margin-top: 15px;
          line-height: 28px; 
          }

#remerci {display: flex;
          align-items: center;}

#tourcoing {width: 80%; max-width: 700px;
         margin-top: 30px;
         text-align: center;
         line-height: 28px;
         background-color: white;
        }

#tourcoing p {padding: 0px;
              margin-top: 5px;
             }
#tg  {width: 80%; max-width: 700px;
      padding-top: 20px;
     }

     /*---------------Gare de Tourcoing----------------*/
     
     #outrouver {margin: 80px auto 0;
                 display: flex;
                 align-items: center;
                 padding: 10px;
                 color: #142635;
                 background: #fafafa;
                }

    #outrouver img {padding-right: 10px;}

    .nowrap {white-space: nowrap;}


#stationtaxigare {display: block;
                  text-align: center;
                  margin: 30px 10px;}

    #station {text-align: center;
              margin: 5px;
             }

     #main_gare {width: 80%;
                  height: 100%;
                  display: flex;
                  flex-wrap: wrap;
                  justify-content: space-around;
                  align-items: center;
                  margin-inline: auto;
                 }

/*-------------------------------*/
/*-------------conseils------------------*/


#main_conseil {display: flex;
               flex-grow: 1;
               justify-content: space-between;
               align-items: center;
              }

#conseil_title img {margin-right: 10px;}

#conseil_title {max-width: 700px ; 
                margin-inline: auto;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 10px;
                border-bottom: 1px solid #142635 ;
                background-color: white;}
#conseil_title h1 {border-bottom: 1px solid #142635 ;}
#conseil_title h2 {margin-top: 20px;
                   text-align: center;
                  }

article {padding: 20px;
         line-height: 30px;
         text-align: center;
        } 

.equip {background-color: yellow;}            


@media (max-width: 1390px) {
                              #maingauche {text-align: center; 
                                           padding: 0;}
                              #maingauche h1 {font-size: clamp(32px, 3vw, 36px); 
                                              padding: 40px 0px 10px 0px;
                                             }
                              #maingauche > a:nth-child(2) {font-size: clamp(18px, 2vw, 40px);}
                              #maingauche > a:nth-child(3) {font-size: clamp(23px, 2vw, 40px); 
                                                            margin: 0px 15px;
                                                           }
                              #maingauche a {padding: 0;}
                              #maingauche > img {margin: 0 auto;}


                        /*----------------SERVICES <1390 ----------------*/
                             #cadre1 {max-height: inherit;} 
                             
                           }


@media (max-width: 1282px) {
                           #send_contain {width: 80%}
  
  
  
  
  
                          /*---------------SERVICES 1282----------------*/
                            #cadre1 {height: 675px;}
                            .respectsecu h3 {padding: 10px;}
                            .respectsecu p {padding: 0 15px 20px 15px;}
                            #cadre3 .soucadre .title100 h1 {font-size: clamp(20px, 2vw, 33px);}
                           }

                          


@media (max-width: 900px) {
                           nav {
                             padding: 15px 20px;
                             position: relative;
                           }

                           /* nav */
                           .nav-icon {
                             order: 2;
                             margin: 0 auto;
                           }

                          .nav-icon span {
                            font-size: 22px;
                          }
                          .main-navlinks {
                            order: 1;
                            width: auto;
                          }

                          /* hamburger */
                          .hamburger {
                                      width: 20px;
                                      height: 20px;
                                      cursor: pointer;
                                      border: none;
                                      display: flex;
                                      background: #fafafa;
                                      align-items: center;
                                      position: relative;
                                     }

                         .hamburger span {
                           display: block;
                           width: 100%;
                           height: 2px;
                           background: #333;
                           position: absolute;
                           pointer-events: none;
                           transition: opacity 0.3s 0.15s ease-out;
                         }
                        .hamburger span:nth-child(1),
                        .hamburger span:nth-child(3) {
                          transition: transform 0.3s ease-out; transform: translateY(-7px);
                        }

                        .hamburger span:nth-child(1) {
                          transform: translateY(7px);
                        }

                       .hamburger.open span:nth-child(1) {
                         transform: translate(0) rotate(135deg);
                       }
                       .hamburger.open span:nth-child(2) {
                         opacity: 0;
                         transition: opacity 0s ease-out;
                       }
                       .hamburger.open span:nth-child(3) {
                         transform: translate(0) rotate(-135deg);
                       }

                      .navlinks-container {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        position: absolute;
                        background: #fafafa;
                        top: 100%;
                        left: 0;
                        transform: translate(-100%);
                        height: 100vh;
                        padding: 15px 50px 15px 20px;
                        border-right: 1px solid #c5c5c6;
                      }
                      .open {
                        transform: translate(0%);
                      }

                      .navlinks-container a {
                        font-size: 18px;
                        margin: 10px 0px;
                      }


                     .nav-authentication {
                       order: 3;
                       margin-left: 0;
                     }
                     .sign-btns {
                       display: none;
                     }

                     #main {height: auto;
                            flex-direction: column-reverse; 
                            justify-content: space-between; 
                           }
                    #hero {width: 100%; 
                           margin-bottom: 0px;
                           margin-top: 35px;
                          }
                    
                    #maingauche {height: auto;                justify-content: space-evenly;
                                 text-align: center; }
                    
                    #maingauche h1 {padding-left: 0; 
                                    padding: 30px 0px 0px 0px;
                                   }
                    #maingauche a {width: 70%;
                                   margin-inline: auto;}

                    #maingauche > a:nth-child(3) {margin: 10px auto;
                                                 }

                    #send_contain {margin: auto;}

                    #herodroite {width: 100%; 
                                 height: 410px;
                                 margin-bottom: 20px;
                                }
                    #herodroite img {height: 100%; 
                                     object-position: 0px -195px;}

                    footer {margin-top: 75px; 
                            padding-bottom: 15px;}

                    /*---------------SERVICES-900------------*/
                    
                    #cadre1 {margin-top: 30px;}
                    #cadre2 {height: 840px;}
                    #cadre3 {flex-direction: column-reverse;
                             }
                    #cadre3 > .soucadre {width: 100%;
                                         border-radius: 0 0 5px 5px;
                                        }
                    #cadre3 .soucadre:nth-child(2) img {border-radius: 5px 5px 0 0;}

                    /*---------------TARIFS-900------------*/
                    
                    #expliktarif {margin-inline: 20px;}
                    #tarifetat {margin: 0 0 15px;}
                    .prix {flex-direction: column;
                           border-radius: 5px;
                          }
                    .prix:nth-child(3) {background-color: rgba(61, 153, 112, 0.55);}
                    .prix:nth-child(5) {background-color: rgba(61, 98, 153, 0.85);}
                    #plusprix {margin: 15px;}
                    .ou span {display: none;}

                    /*--------------------CONTACT+-900-----------------*/
                    
                    #main_contact_group {flex-direction: column-reverse;
                                         }
                    #main_contact {width: 80%;
                                   min-width: 400px;
                                   padding: 0 0 10px 0 ;
                                  }
                    #moyenscontact {width: 100%;
                                    padding: 10px;                              
                                   }
                    #moyenscontact h1 {font-size: clamp(20px, 2em, 24px); 
                                       padding-left: 10px;
                                      }
                    #main_contact_photogauche {width: 100%;
                                              }
                    #main_contact_photogauche img:last-child {height: 250px;
                                                              display: block;
                                                              object-position: bottom;}
                    #main_contact_photogauche img:first-child {display: none;}


                    /*--------------------mentions legales 900-----------------*/

                    #main_mentions {flex-direction: column; 
                                    margin-top: 0px;
                                    justify-content: stretch;
                                    }
                    #photoPL3 {width: 100%;}
                    #photoPL3 img {width: 100%;
                                   max-height: 350px;
                                   object-fit: cover;
                                   object-position: 0 -499px;
                                  }

                    #ttesinfos {width: 100%;
                                }




                    /*--------------------CPAM 900-----------------*/

                    #main_cpam {margin-top: 0;}
                    #scolaire {width: 90%;}
                    
                    /*--------------------Remerciements 900-----------------*/
                    
                    #main_Ress {margin-top: 30px;}
                  }


@media (max-width: 870px) {
                            .navlinks-container{z-index: 11;}
                            #main {margin-top: -75px;
                                  }
                            #hero {margin-bottom: 65px; 
                                   margin-top: 35px;}
                            #herodroite img {height: 100%;
                                             object-position: 0px -110px;
                                              }
                            #maingauche {height: 350px;
                                         justify-content: center;
                                        }
                            #maingauche h1 {font-size: clamp(28px, 3vw, 40px);
                                            line-height: 1.3em; 
                                            padding: 20px 7px 3px;
                                            margin-top: 15px;
                                           }
                            
                            #maingauche > a:nth-child(2) {padding: 3px 10px;
                                                          margin: 10px auto 10px;
                                                        }

                            #maingauche > a:nth-child(3) {padding: 3px;}

                            #maingauche > a {width: 55%; 
                                           padding: 0 5px;                
                                           margin: 10px auto 0;
                                          }

                            footer {height: 220px;
                                    margin-top: 1px;
                                   }
                    /*---------------SERVICES 870----------------*/

                    

                    /*---------------TARIFS 870----------------*/
                        
                    #expliktarif p {font-size: clamp(14px, 2vw, 29px);}

                    /*---------------CONTACT 870----------------*/

                     #main_contact {margin-bottom: 15px; }                               
                     #moyenscontact h1 {font-size: clamp(17px, 1em, 24px);}                              
                     #main_contact p {padding-inline: 5px;
                                      line-height: 28px;}
                     
                     .contact_flex span {white-space: nowrap;
                                         }  /*éviter écorcher numéro tél-*/

                    /*---------------CPAM 870----------------*/
                      
                      #main_cpam > img {width: 100%;}
                      #scolaire {width: 100%;
                                 min-width: 0; 
                                }
                      #scolaire p {width: 90%;}
                      #scolaire a img {width: 70px;}


                           }

@media (max-width: 745px) { #maingauche {height: auto;}
                            #hero >img {top: -45px;}

                            #herodroite img {height: 100%;
                              object-position: 0px ;
                               }
                           
  
  
                            /*---------------SERVICES 745----------------*/
                            #cadre1 {width: 100%; 
                                     height: auto;
                                     min-width: 0;
                                     flex-direction: column;
                                     margin-top: 0px;
                                    }
                            .soucadre {width: 100%;}
                            .soucadre:first-child img {border-radius: 0;}
                            .soucadre:first-child {height: 280px;}
                            .soucadre:nth-child(2) {border-radius: 0;} 
                            .title100 h1 {font-size: clamp(22px, 5vw, 40px);}

                            
                            .pngactivite {flex-direction: column;}

                            #cadre2 {width: 100%;
                                     min-width: 0;
                                     height: 945px;
                                     flex-direction: column;}

                            #cadre3 {width: 100%;
                                     min-width: 0;}

                            #cadre3 .soucadre:first-child {height: auto;}

                            /*---------------TARIFS 745----------------*/

                              #tarifetat {height: auto;}
                              .tarif {width: 90%;
                                      min-width: 420px;} 
                            

                            /*---------------Mentions légales 745----------------*/
                              #photoPL3 img {object-position: 0 -350px;}     
                          
                            /*---------------Gare de Tourcoing 745----------------*/
                              #outrouver {width: 90%;}
                              #outrouver h1 {font-size: clamp(18px, 4vw, 23px);;}
                              #main_gare {width: 100%;}

                            /*---------------Livraison de colis 745----------------*/

                            #main_livrcol {flex-direction: column;
               width: 100%; 
               height: auto;
               margin-top: 0;
               }

                            #main_colis {width: 100%;
             height: 300px;}

                            #colistitle {width: 100%;
             height: auto;
             padding-bottom: 20px;}


                          }



@media (max-width: 500px) {
                           .nav-icon img {
                             width: 300px;
                           }
                           .nav-icon span {
                             font-size: 20px;
                           }
                           .navlinks-container {z-index: 10; width: 100%; align-items: center;
                          }

                           #herodroite img {height: 100%;
                            object-position: 0px 70px;
                             }


                           
                           #maingauche h1{font-size: clamp(24px, 3vw, 40px); 
                                          margin-top: 20px;
                                          line-height: 35px;
                                         }

                           #maingauche > a:nth-child(2) { min-width: 90%; 
                                                         padding: 0;
                                                         margin-inline: auto;
                                                         border-radius: 0;
                                                        }
                           #maingauche > a:nth-child(3) {min-width: 90%; 
                                                        margin-inline: auto;
                                                        padding: 0px 5px;
                                                        font-size: 20px;
                                                        border-radius: 0;
                                                       }
                          #maingauche a {width: 64%; 
                                         margin-top: 20px; 
                                        }

                          #send_contain a {margin-top: 0;}

                        

                           footer {height: auto;}                            
                           footer a {text-align: center;}

                     /*---------------SERVICES 500----------------*/
                          
                           #cadre2 {height: auto;}
                           #cadre3 > .soucadre {border-radius: 0;}

                           /*---------------TARIFS 500----------------*/
                           
                           #photocompteur {display: block;}
                           #toco {
                                  margin-left: 0;}
                           #toco img {width: 100%;
                                      height: 180px;
                                      object-fit: cover;
                                      }
                           .tarif {width: 90%;
                                   min-width: 340px;
                                  }

                           

                           /*---------------Remerciements 500----------------*/

                          #remerci h1 {font-size: clamp(18px, 2vw, 33px);}
            
              /*-------mentions legales 500--------------------*/
                          #photoPL3 img {object-position: 0 -137px;}

                          }    


/*iphone 15 Pro Max*/

@media (max-width: 430px) { 
                           .nav-icon img {
                             width: 200px;}
                             .navlinks-container a {margin: 27px 0;}

                           #herodroite {height: 320px;}

                           #maingauche {width: 90%;
                                        margin: 0;
                                       }
                           #maingauche h1 {font-size: clamp(24px, 2vw, 36px);}            
                           #maingauche a:nth-child(2) {
                                                        font-size: 22px;
                                                        width: 100%;
                                                        margin-inline: auto;
                                                        padding: 5px;
                                                       }
                           #maingauche a:nth-child(3) {width: 100%;}
                           #maingauche a {width: 80%; 
                                          padding: 0 5px; 
                                         }

                           .lesplus:nth-last-child(1) {margin-bottom: 65px;}
                           footer {height: auto; 
                                   flex-direction: column; 
                                   align-items: center;
                                  }
                          /*---------------SERVICES 430----------------*/
                          
                          #cadre2 {height: auto;}
                          

                          /*---------------TARIFS 430----------------*/
                          
                          .prix {width: 100%;
                                 border-radius: 0;}

                           /*----------------CONTACT+ 430------------------*/

                          #main_contact {min-width: 100%;}
                          #main_contact p {padding: 0 10px;}
                          
                          #moyenscontact h1 {line-height: 25px; }
                      

                          /*---------------Remerciements 430----------------*/

                          #main_Ress {width: 95%;}
                          
                          /*---------------Gare de Tourcoing 430----------------*/
                          #main_gare img {width: 100%;}

                          /*-------mentions legales 430--------------------*/
                          #photoPL3 img {
                            object-position: 0 -67px;}

                          }


/*iphone 12 mini*/

@media (max-width: 375px) { 
                          html, body {background-image: none; background-color: white;}
                          #hero {margin-top: 0;}
                          #hero > img {top: 9px; width: 56px;
                                      }
                          #herodroite {height: 345px; }
                          #herodroite img {object-position: -64px 20px; 
                                           height: 350px;}
                          #main {margin-top: -45px;}
                          #maingauche {width: 100%;
                                       height: auto; 
                                       background-color: #ffffff;                                      
                                       border-radius: 0;
                                       margin-top: 60px;
                                      }
                          #maingauche h1 {font-size: clamp(23px, 2vw, 26px); 
                                          margin-top: 0;
                                          padding: 20px 7px 5px;
                                          line-height: 40px;
                                         }
                         
                          /* #maingauche a:nth-child(2){width: 96%; background-color: yellow;
                                                    
                                                      margin-inline: auto; 
                                                      padding: 5px 5px; 
                                                      text-shadow: none;
                                                     } */
                          #maingauche a:nth-child(3) {width: 96%;
                                                     
                                                       padding: 5px;                                                        
                                                       text-shadow: none;}

                         
                          #maingauche a {width: 90%; 
                                         margin-inline: auto; 
                                         padding: 0px;
                                        }
                          .lesplus {width: 90%;}
                          
                            
                          footer {margin-top: 40px;}
                           
                          /*---------------SERVICES 375----------------*/

                         
                          

                          /*---------------TARIFS 375----------------*/

                          .tarif {width: 90%;
                                  min-width: 0;
                                 }

                          /*-------CONTACT 375--------------------*/
                          #moyenscontact {height: 85px;
                                          flex-wrap: wrap; 
                                          padding: 5px; 
                                          justify-content: space-around;
                                         }
                          #moyenscontact img {width: 25px; 
                                              padding-bottom: 5px;
                                             }
                          #moyenscontact h1 {line-height: 20px; 
                                             padding-left: 0;
                                            }
                          /*-------mentions legales 375--------------------*/
                          #photoPL3 img {
                            object-position: 0 -67px;
                        }

                }

/*iphone SE*/

@media (max-width: 320px) { 
                           html, body {background-image: none; 
                                       background-color: #fafafa;
                                      }
                           #herodroite img {height: 500px;                                      
                                           }
                           #herodroite {height: 280px;}
                           #herodroite img {object-position: -180px 40px;}
                           #hero > img {border-radius: 15%; 
                                        padding: 5px 5px 0; 
                                       }
                           #maingauche {width: 100%;
                                        border-radius: 0;
                                       }
                           
                           
                           #maingauche h1 {width: 100%; 
                                                       font-size: clamp(18px, 3vw, 22px);
                                                       margin: 30px auto 0; 
                                                       padding: 0px 5px 0px;
                                                       line-height: 35px;
                                                      }
                           #maingauche a:nth-child(3) {font-size: 14px; 
                                                        padding: 0;}
                           #maingauche a {width: 90%; 
                                          margin: 15px auto 5px; 
                                          padding: 0px 5px;
                                         }
                          
                           footer {margin-top: 0px;}

                        /*-----CONTACT+ 320 --------------------------*/

                        #main_contact h3 {line-height: 22px; 
                                          padding: 5px;}

                        /*-----CPAM 320--------------------------*/

                        #scolaire {font-size: 13px;}
                         
                          }