.drive-buttons-wrapper {
  text-align: center; /* Ceci centrera #drive-buttons car il sera display: inline-flex */
  margin: 20px auto; /* Marge en haut/bas de 20px, marges latérales automatiques pour aider au centrage du wrapper lui-même s'il a une largeur contrainte */
  font-family: Arial, sans-serif;
  font-size: 18px;
  /* Optionnel : ajoutez une largeur maximale si vous voulez que cette section ne s'étende pas trop sur de très grands écrans */
  /* max-width: 900px; */
}

#drive-buttons {
  display: inline-flex;   /* Permet au text-align:center du parent de fonctionner et se comporte comme un bloc inline */
  justify-content: center; /* Centre les boutons sur leur ligne (horizontalement) */
  flex-wrap: wrap;         /* Permet aux boutons de passer à la ligne si l'espace est insuffisant */
  gap: 10px;               /* Espace entre les boutons */
}

#no-drive-message { /* Styles pour le message de fallback, s'il doit être centré aussi */
  text-align: center;
  margin-top: 15px;
  /* display: none; /* Géré par JavaScript */
}

.btn-drive {
  display: inline-block; /* Comportement par défaut, mais bien de le garder explicite */
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  color: white; /* Couleur de texte par défaut pour tous les boutons drive */
}

.btn-drive.gold {
  background-color: #ffd228;
  /* color: white; déjà défini dans .btn-drive */
  box-shadow: 0 2px 5px rgba(255, 215, 0, 0.3);
}

.btn-drive.silver {
  background-color: #CCCCCC;
  /* color: white; déjà défini dans .btn-drive */
  box-shadow: 0 2px 5px rgba(192, 192, 192, 0.3);
}

.btn-drive.bronze {
  background-color: #F6B26B;
  /* color: white; déjà défini dans .btn-drive */
  box-shadow: 0 2px 5px rgba(205, 127, 50, 0.3);
}

.btn-drive:hover {
  transform: translateY(-2px);
  opacity: 0.9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}