/* RESET GLOBAL */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; font-family:"Trebuchet MS", Arial, sans-serif; }

/* CONTENEUR FLEX VERTICAL */
body { display:flex; flex-direction:column; min-height:100vh; }

/* PAGE CENTRÉE */
#container { flex:1; display:flex; flex-direction:column; }

/* HEADER */
#header {
  height:166px;
  width:100%;
  background:url(images/top.jpg) no-repeat center top;
  background-size:cover;
}

/* CONTENU PRINCIPAL */
#page {
  flex:1;
  display:flex;
  max-width:900px;
  width:100%;
  margin:0 auto;
}

/* COLONNE GAUCHE */
#left {
  width:400px;
  min-height:200px;
  background:url(images/leftlogo.jpg) no-repeat top left;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:20px;
}
.slogan1 {
  font-style: italic;
  color: #fbaf01;
  font-size: 1.4rem;
  font-weight: bold;
  margin-top: -400px; /* ajuste ici pour descendre ou remonter le slogan */
}

/* CONTENU DROIT */
#right {
  flex:1;
  padding:20px;
}
h2 { margin-top:20px; font-size:1.2rem; color:#29a9b4; text-decoration:underline; }
.content { margin-top:10px; line-height:1.6em; }
.center { text-align:center; }

/* FACEBOOK */
#facebook-container {
  text-align: center;
  margin: 20px 0;
}

/* Conteneur du bouton Facebook */
#facebook-container {
  text-align: center;   /* centre le bouton horizontalement */
  margin-top: 30px;     /* espace au-dessus du bouton */
}

/* Bouton Facebook */
#facebook-img {
  display: inline-block;
  max-width: 100%;      /* ne dépasse jamais la largeur du conteneur */
  width: 238px;         /* largeur maximale sur desktop */
  height: auto;         /* conserve les proportions */
  transition: transform 0.2s;
}

#facebook-img:hover {
  transform: scale(1.05);
}

/* Version responsive */



/* FOOTER */
#footer {
  width:100%;
  background:url(images/bottom.jpg) no-repeat center top;
  background-size:cover;
  text-align:center;
  padding:15px 0;
  color:#fff;
  font-size:0.85rem;
}

/* RESPONSIVE */
@media(max-width:900px){
  #page { flex-direction:column; align-items:center; }
  #left { width:100%; justify-content:center; background-position:center top; }
  .slogan1 { text-align:center; font-size:1.2rem; }
  #right { width:100%; padding:15px; }
  #facebook { width:180px; height:40px; }
  
}


/* Conteneur des boutons */
.buttons-container a {
  margin: 10px; /* espace entre les boutons */
}

/* Bouton petit : Rendez-vous Vaccination */
.btn-small {
  display: inline-block;
  background-color: #29a9b4; /* couleur différente pour différencier */
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  padding: 10px 25px;
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  transition: background 0.3s, transform 0.2s;
}

.btn-small:hover {
  background-color: #1f7a8c;
  transform: scale(1.05);
}

/* Bouton grand : Commander en ligne */
.btn-large {
  display: inline-block;
  background-color: #fbaf01;
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
  padding: 15px 40px;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  transition: background 0.3s, transform 0.2s;
}

.btn-large:hover {
  background-color: #e59800;
  transform: scale(1.05);
}