@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

body {
  background-color: #808497; /* Séparation bloc */
  color: #5c0ac7;
  font-family: 'Roboto', sans-serif; /* Couleur information clés */
  margin: 0;
  padding: 0;
}

header {
  background-color: #000F5B;
  padding: 10px 20px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left-section h1 {
  margin: 0;
}

.right-section {
  display: flex;
}

.right-section a {
  color: white;
  text-decoration: none;
  margin-left: 20px;
}

.block {
  background-color: #ffffff; 
  padding: 20px;
  margin-bottom: 10px;
  text-align: center; /* Ajout de cette ligne pour centrer le contenu */
}

.content {
  display: flex;
  flex-wrap: wrap; /* Permettre le retour à la ligne pour les éléments */
  gap: 20px;
  margin-top: 20px;
}

.content-item {
  flex: 1;
  min-width: 10px; /* Définir une largeur minimale pour les éléments */
  background-color: #fac001;
  padding: 20px;
  text-align: center;
  border-radius: 15px; /* Arrondir les coins */
}

.role {
  background-color: #f8f8f8;
  padding: 20px;
  text-align: center;
}

.button {
  background-color: #4b2e83;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.zoomable {
  width: 100%;
  height: auto;
  cursor: zoom-in;
}

.zoomable:hover {
  transform: scale(1.2);
}

#dynamicImage {
  width: 306px; /* Définissez la largeur souhaitée */
  height: 271px; /* Définissez la hauteur souhaitée */
  display: block; /* Pour supprimer l'espace supplémentaire sous l'image */
  margin: 0 auto; /* Pour centrer l'image horizontalement */
}

.block p {
  color: #757474; /*Texte sous image sncf */
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

/* Réduction de la taille des images */
.content-item img {
  max-width: 50%; /* Limiter la largeur maximale à la taille de son conteneur */
  height: auto; /* Permettre à la hauteur de s'ajuster automatiquement */
}