/*slider*/
.slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding: 20px;
}

.slider img {
    width: 400px;
    height: 800px;
    object-fit: cover;
    scroll-snap-align: center;
    flex-shrink: 0;
    border-radius: 10px;
}

/*Galerie*/

.gallery {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    padding: 20px;
}

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.gallery .big {
    grid-row: span 2;
}

.gallery2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 300px 200px;
    gap: 20px;
    padding: 20px;
}

.gallery2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.gallery2 .big {
    grid-column: span 2;
}


.square-gallery {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    padding: 20px;
}

.square-gallery>div {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 15px;
}

.square-gallery .small:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

.square-gallery .small:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
}

.square-gallery .big {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.square-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.square-gallery>div,
.gallery img,
.gallery2 img {
    transition: transform 0.3s ease;
}

.square-gallery>div:hover {
    transform: scale(1.03);
}

.gallery img:hover {
    transform: scale(1.03);
}

.gallery2 img:hover {
    transform: scale(1.03);
}

  @media (max-width: 768px) {
    
    .site-header {
      display: flex;
      flex-direction: column; 
      justify-content: center; 
      align-items: center; 
      padding: 1em;
    }
      .site-navigation li:nth-child(1) {
        border-right: 2px solid white;
      }
    
      .site-navigation li:nth-child(2) {
        border-right: 2px solid white;
      }
    
      .site-navigation li {
        padding-right: 10px;
      }
    .site-navigation ul {
      flex-direction: column;
      width: 100%;
    }
  
    .site-navigation li {
      margin: 10px 0;
    }
  
    .text-accueil {
      padding: 30px 10px;
    }
  
    .titre1 {
      font-size: 36pt;
      margin-left: 20px;
      margin-right: 20px;
    }

    .titre2 {
      font-size: 30pt;
      margin-left: 20px;
      margin-right: 20px;
    }
    .presentation,
    .activiter {
      margin-left: 20px;
      margin-right: 20px;
    }
  
    .footer-content {
      flex-direction: column;
      text-align: center;
    }
  
    .footer-links,
    .footer-socials {
      margin-top: 15px;
    }
  
    .footer-socials img {
      width: 25px;
      height: 25px;
    }
  }
  
    @media (max-width: 480px) {
      .site-header {
        padding: 1em;
        flex-direction: column;
        justify-content: center;
      }
    
      .site-navigation ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        margin-top: 10px;
        font-size: 15pt;
      }
    
      .nav li {
        margin: 0 8px; 
      }
    
   
      .logo {
        width:100%
      }

    .text-accueil {
      padding: 20px 10px;
    }
  
    .titre1 {
      font-size: 32pt;
      margin-left: 10px;
      margin-right: 10px;
    }
  
    .presentation,
    .activiter {
      margin-left: 10px;
      margin-right: 10px;
    }
  
    .footer-socials img {
      width: 20px;
      height: 20px;
    }
  }