body {
    background-color: rgb(39, 39, 39);
}
@font-face {
    font-family: Sansation R;
    src: url(Fonts/Sansation_Regular.ttf);
}


.banner {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 75px;
            background-color: white;
            padding: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
          
        }

.logoinfo {
    justify-content: center;
    display: flex;
    align-items: center;
}

.Logo img {
    display: flex;
    justify-content: center;
    margin-left: 10px;
   height: 60px;
   width: auto;

 
}

.banner a{
   color: gray;
   text-decoration: none;
   font-family: Sansation R;
   letter-spacing: 1px;
   font-size: 22px;
}


.liensinternes{
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}


.img_accueil{ 
    display: flex;
    flex-wrap: wrap;
justify-content: center;
}


.img_accueil img{
    height: 100%;
    width: 100%;
    max-width: 1600px;
    object-fit: cover;
    background-repeat: no-repeat;
}



 .social-links {
            display: flex;
            flex-wrap: wrap;
           justify-content: center;
        
  }
.social-links img {
            height: 40px;
        }
        


.liensinternes a {
            padding: 5px;
            position: relative;
        }


.liensinternes a:after{
    content:"";
    position:absolute;
    background-color: black;
    height: 2px;
    width: 0%;
    left: 50%;
    bottom: 0;
    transition: 0.6s;
}

.liensinternes a:hover{
            color: rgb(20, 10, 10);
}

.banner a:hover:after{
width: 100%;
left: 0;
}

.content {
            margin-top: 105px; /* Espace pour éviter que le contenu soit masqué par la bannière */
        }





.tittle{
	margin-bottom: 2rem;
}

.gallery{
    max-width: 1600px;
	width: 100%;
    /*background-color: grey;*/
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

}

ul{
    padding-inline-start: 0px;
}

.gallery li{       
list-style-type: none;
height: 350px;
flex-grow: 1;
}

.gallery img{
cursor: pointer;
min-width: 100%;
height: 100%;
border-radius: 8px;
object-fit: cover;
}


.gallery::after {
    content: "";
    display: block;
    flex-grow: 10;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999;
}

.zoomed-image {
  max-width: 98%;
  max-height: 98%;
}



  /* Turn off parallax scrolling for tablets and phones*/
  @media only screen and (max-device-width: 800px) {

    .banner a{
        color: gray;
        text-decoration: none;
        font-family: Sansation R;
        letter-spacing: 1px;
        font-size: 30px;
     }

  }