html, body {
  margin:0;
  background-color: gray;
  padding: 0;  
}


.test{
  background-color: #042698;
  width: 100%;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  background: linear-gradient(90deg, white 0%, #042698 100%);
}
.div-logo{
  width: 150px;
  height: 150px;
}
.logo {
  object-fit: contain;   
  object-position: center;
  width: 100%;
  height: 100%;
}
.maillot{
  object-fit: contain;   
  object-position: center;
  width: 100%;
  height: 100%;  
}
.div-sponsor{
  width: 150px;
  height: 150px;
}
.logoFacebook{
  height: 50px;
}
.droite{
  margin-left: auto;
}
.name {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.name p{
  font-size: 40px;
  color: white;
}
/*barre de navigation*/
.navbar a{
  text-decoration: none;
  color: blue;
  font-size: 30px;
  padding: 5px;    
  text-align: center;
}
.navbar a:hover{
  color: white;
  background-color: blue;
  border-radius: 10px;
}
.navbar{
  background-color: yellow;
  justify-content: space-between;
  display: flex;
  align-items: center;
  padding: 5px 20px;   
}
.nav-link.active{
  color: blue;
  background-color: rgba(30, 144, 255, 0.4);
  border-radius: 10px;
}

.defaut{
  background-image: url('img/fond/1000011972.jpg'); 
  display: flex;
  position: relative;  
  min-height: 100vh;
  background-repeat: repeat;
  background-size: contain;
  background-size: 100% auto;
}
.titre_photo{
  display: flex;
  align-items: center;
  padding-left: 50px;  
  width: fit-content; 
  margin-top: 2px;
  position: absolute;
  background-color: bisque;
  clip-path:polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0 50%); 
}

.links {
  display: flex;
  align-items: center;
  padding: 0;
  width: fit-content;
  margin-top: 0;
  position: absolute;
  top: 0; 
}
.imgGroup{
  border: solid 5px yellow;
  background-color: rgba(30, 144, 255, 0.8);
}
h1{
  text-align: center;
  color: yellow;
  font-size: 50px;
}
.rensContenu{
  border-radius: 10px;
  width: fit-content;
  margin: auto;
}
.info{
  display: flex;
  gap: 10px;
  height: auto;
  justify-content: center;
  width: 100%;  
  top:0; 
}
.renseignement{
  background-color:#042698;
  bottom: 0;
  width: 100%;  
  border : solid 5px yellow;
  color: white;
  padding: 5px;
  left: 0;
  text-align: center;  
}
.iframe{
  width: 100%;
  margin: auto;
}
iframe{
  width: 600px;
  height: 250px;
}
.renseignement .pRenseignement{
  font-family: Brush Script MT, Brush Script Std, cursive;
  font-size: 35px;
}
p{
    
  font-size: 25px;
    
}
.links h2{
  font-size: 30px;
}
.title_renseignement{
  color: yellow;
}
.content-background {
  top:0;   
  text-align: center;
  background-color: aqua;
  width: 100%;  
  margin: auto;
  position: relative;
  display: flex;
  justify-content: center;  
}
.content-background img{
  width: 100%;
}


.gallery{
  text-align: center;
  border: solid 8px yellow;
  padding: 5px;
  border-radius: 50px;
  background-color: rgba(30, 144, 255, 0.4);
  height: auto;
  width: auto;
  margin-bottom: 25px;
  width: fit-content; 
  margin-right: 25px;
  margin-left: 25px;
}
.gallery img{
  height: 300px;
  width: auto;
  border-radius: 25px;
  border:solid 5px blue;
  margin : 20px;
  transition: transform 0.3s ease;
}
.gallery img:hover{
  transform: scale(1.1); 
}
.description{
  background-color: white;
  width: fit-content;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 30px;
  border-radius: 50px;
}
.conteneur {
  display: flex;
  flex-wrap: wrap;           
  gap: 15px;
  justify-content: center;                   
}

.sponsors{
  text-align: left;
 
  padding: 2px;

  background-color: rgba(255, 255, 255, 0.679);

  height: auto;
  width: auto;
  margin-bottom: 25px;
  width: 490px; 
  display: flex;
  flex-direction: row;
  border-radius: 20px;
}
.sponsors .div-img-sponsors{
 
  width: 150px;
  height: 150px;
  padding: 0px;
  margin: 5px;
  
  
}
.sponsors img{
  width: 150px;        
  height: 150px;    
  object-fit: contain;   
  object-position: center;
  transition: transform 0.3s ease;  
}
.sponsors img:hover{
  transform: scale(1.1); 
  
  
}
.descriptionSponsors{

 
  width: 100%;
  padding: 10px;
  margin-left:0;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 30px;
  border-radius: 50px;

}
.conteneurSponsors {
  display: flex;
  flex-wrap: wrap;          
  gap: 15px;
  margin-top: 40px; 
  justify-content: center;             
}

.identitySponsors{
 
  background-color: white;
  border-radius: 5px;
}
.circuitsetcalendrier{
  color: yellow;
}
.circuits{
  background-color: rgba(30, 144, 255, 0.7);
  width: fit-content;
  border : solid 5px yellow;
  color: white;
  padding: 10px 25px;
  margin: auto;
}
.group{
  width: fit-content;
}
.group img{
   max-width: 100%; 
}
.membres{
  background-color: white;       
  width: 100%;
  text-align: center;
  margin-bottom: 50px;
}
.logoFacebook{
  vertical-align: middle;
}
.conteneur-flex{
  display: flex;
  flex-direction: column; 
  align-items: center;    
  width: 100%;
}
  .footer {
  background-color: #1a1a1a;
  color: white;
  padding: 15px 20px;
  font-family: Arial, sans-serif;
}
.footer-container {
  display: flex;
  align-items: center;
}
.footer-left {
  width: 50%;
  text-align: center;
}
.footer-logo {
  height: 80px;
  width: auto;
}
.footer-right {
  display: flex;
  justify-content: center;
  margin-right: 0;
  width: 50%;
  text-align: center;
}
.footer-paragraphe{
  font-size: 12px;
  text-align: left;
}
.dropdown{
  position: relative; 
}
.dropdown-content{
  display: none;
  position: absolute; 
  top: 100%; 
  left: 0;
  background-color: white;
  z-index: 1000; 
}
.dropdown:hover .dropdown-content {
  display: block;
  display: flex;
  flex-direction: column;
}
.mail{
  color: white;
}
.mentions{
  background-color: rgba(30, 144, 255, 0.8);
  border: solid 5px yellow;
  margin: 50px;
  padding: 5px;
  width: fit-content;
  color: black;
  text-align: center;
  max-width: 750px;
}

@media (max-width: 768px) {
  
  .name p{
    font-size: 24px;
  }
  
  .div-logo{
    width: 130px;
    height: 130px;
  }
  .div-sponsor{
    width: 130px;
    height: 130px;
  }
  
            
    .navbar a {
        font-size: 24px;
        
    }
    p{
        font-size: 24px;
    }
    
    .navbar{
        flex-wrap: wrap;
    }
    h1{
        font-size: 40px;
    }
    .gallery {
    width: auto;
    margin: 6px 0;
  }
  
   .gallery img{
  height: 200px;
  width: auto;
}
.description{
  font-size: 24px;

}
.renseignement .pRenseignement{
  
  font-size: 40px;
}


.sponsors {
    
    width: 400px;
    margin: 6px 0;
  }
  
   .sponsors img{
  width: 100px;        
  height: 100px;
}

.group{
  margin-right: 50px;
  margin-left: 50px;
}
iframe{
  width: 400px;
  height: 210px;
}
.links h2{
  font-size: 24px;
}

.footer-paragraphe{
  font-size: 11px;
  
}
.footer-logo{
  height: 75px;
}
.circuits{
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 50px;
}
.defaut{
  min-height: 70vh;
}

}

@media (max-width: 480px) {
  
  .name p{
    font-size: 18px;
  }
  
  .div-logo{
    width: 100px;
    height: 100px;
  }
  .div-sponsor{
    width: 100px;
    height: 100px;
  }
  .logoFacebook{
    height: 25px;
  }

  .links h2{
    font-size: 16px;

  }
  .navbar a {
        font-size: 18px;
        
    }
    p{
        font-size: 18px;
    }
    .navbar{
        flex-wrap: wrap;
    }
   
  
  .gallery {
    width: 100%;
    margin: 6px 0;
    
  }
  .gallery img{
  height: 150px;
  width: auto;
}
.description{
  font-size: 18px;

}
h1{
        font-size: 29px;
    }
    
.renseignement .pRenseignement{
 
  font-size: 30px;
}

.sponsors {

    width: 100%;
    margin: 5px;
  }
  .sponsors img{
  width: 100px;       
  height: 100px;
}

.group{
  margin-right: 50px;
  margin-left: 50px;
}
iframe{
  width: 350px;
  height: 200px;
}

.footer-logo{
  height: 70px;
}

.membres p{
  font-size: 16px;
}
.footer-paragraphe{
  font-size: 10px;
  
}
.circuits{
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 50px;
}
.defaut{
  min-height: 70vh;
}


 
}

@media (max-width: 375px) {
  
  iframe{
  width: 300px;
  height: 150px;
}
h1{
  font-size: 25px;
}
.gallery {
    width: 100%;
    margin: 6px 0;
    
  }
  .gallery img{
  height: 120px;
  width: auto;
}
}