/*
  De Montmollin Joakim - 10.01.2026
  Page d'accueil du site web*/








/*header*/
header {
    display: flex;
}
.nav {
    display: flex;
    justify-content: center;
    flex-grow: 2;
    align-items: center;
    gap: 20px;
}
.logo {
    display: flex;
    justify-content: flex-start;
}
/*header*/







/*menu*/
.mainMenu {
  display: flex;                
  flex-direction: column;
  align-items: center;
}
.carte-menu {
  display: flex;                 
  flex-direction: column;
  align-items: center;
}
/*menu*/









/*apropos*/
.apropos-container {
  display: flex;           
  flex-direction: column;    
  align-items: center;
}
#seconde{
  text-align: center;
}
/*apropos*/








/*contact*/
.contact-main {
  display: flex;                
  flex-wrap: wrap;             
  align-items: flex-start;
  gap: 25px;
  justify-content: center;
}

/*pour que le titre prend toute la largeur et il reste en haut*/
/*Je lui ai donné 100% de largeur pour que se soit pas possible de le bouger*/
.contact-main .contact-titre {
  flex-basis: 100%;             
}

/* Carte horaires d'ouverture à gauche avec titre*/
.heure h3{
  padding-right:33px;
}
/*contact*/








/*galerie*/
.galerie-main {
  display: flex;
  /*column pour que le titre soit en haut*/            
  flex-direction: column;     
  align-items: center;          
}

/*J'ai mis un gap entre les images pour que ce ne soit pas juste un gros bloc.*/
.galerie {
  display: flex;  
  /*wrap pour que si il n'y a plus assez de place l'image va en bas*/               
  flex-wrap: wrap;              
  justify-content: center;     
  gap: 18px;              
}
/*galerie*/










/*footer*/
footer {
  display: flex;                 
  justify-content: center;
}
/*footer*/








/*Pour téléphone*/
@media (max-width: 768px) {
/*header*/
  .header {
    flex-direction: column;
    align-items: center;
  }

  .logo {
    width: 90px;
    padding-bottom: 30px;
  }
  .nav {
    flex-wrap: wrap;
  }

/*header*/






/*apropos*/
.apropos-titre{
  text-align: center;
}
/*apropos*/






/*galerie*/
.galerie img {
  flex-direction: column;
  width: 100%;   
}
/*galerie*/





/*footer*/
  footer {
    flex-direction: column;
    text-align: center;
  }
/*footer*/



}

/*ici j'ai décidé de faire un mediaqueries spécialement pour la page contact qui est plus petite parce que j'ai des boxes avec du text et c'est pas vraiment convenable avec une résolution plus grande*/
@media (max-width: 480px) {
  .heure,.contact-section {
    text-align: center;
  }
  .googlemap{
    width: 100%;
  }

}