body {
  font-family: Arial, sans-serif;
  background-color: #f0f8ff; /* Couleur de fond par défaut */
  text-align: center;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Prendre toute la hauteur de la fenêtre */
  transition: background-color 0.3s ease; /* Transition douce pour le changement de couleur de fond */
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap; /* Permet d'afficher les éléments sur plusieurs lignes si nécessaire */
}

.site-button {
  background-color: transparent;
  border: none;
  padding: 30px; /* Plus grand padding pour augmenter la taille */
  cursor: pointer;
  border-radius: 10px; /* Coins arrondis */
  width: 250px; /* Taille plus grande pour les boutons */
  height: 250px; /* Taille plus grande pour les boutons */
  display: inline-block;
  transition: transform 0.3s ease, background-color 0.3s ease; /* Transition douce pour l'effet hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre discrète autour des boutons */
}

.site-button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px; /* Coins arrondis */
}

.site-button:hover {
  transform: scale(1.1); /* Agrandit légèrement le bouton */
}

/* Changement de couleur de fond au survol des boutons, en fonction du logo */
.site-button#button-captainqse:hover {
  background-color: #1857A5; /* Bleu du logo de CaptainQSE */
}

.site-button#button-djbam:hover {
  background-color: #424242; /* Gris foncé du logo de DJBAM */
}

.site-button#button-iam:hover {
  background-color: #FEAA77; /* Orange du logo IAM */
}

/* Media Query pour les petits écrans (téléphones, tablettes en portrait) */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* Aligne les boutons verticalement */
    gap: 30px; /* Augmente l'espacement entre les boutons */
  }

  .site-button {
    width: 200px; /* Réduit la taille des boutons sur petits écrans */
    height: 200px; /* Réduit la taille des boutons sur petits écrans */
  }
}