body {
  background-image: url('geometric-leaves.webp');
  background-repeat: repeat;
}

h1,
p {
  text-align: center;
}

p {
  font-family: 'Arial', sans-serif;
  /* Police de caractères générale */
  font-size: 16px;
  /* Taille de police par défaut */
  line-height: 1.6;
  /* Hauteur de ligne pour une meilleure lisibilité */
  margin-bottom: 20px;
  /* Espacement en bas du paragraphe pour séparer du contenu suivant */
  color: #333;
  /* Couleur du texte */
}

/* Styles pour les écrans de bureau */
@media only screen and (min-width: 768px) {

  /* Style du conteneur */
  .container-image {
    display: flex;
    /* Utiliser flexbox pour centrer les éléments */
    justify-content: center;
    /* Centrer les éléments horizontalement */
    align-items: center;
    /* Centrer les éléments verticalement */
  }

  /* Style de l'image */
  img {
    max-width: 50%;
    /* Ajustez la largeur de l'image avec l'espace entre les deux */
    max-height: 400px;
    margin-right: 10px;
    /* Espace fixe de 10px entre l'image et l'iframe */
  }

  /* Style de l'iframe */
  iframe {
    max-width: 300px;
    /* Limiter la largeur de l'iframe à 300px */
    max-height: 400px;
  }
}

/* Styles pour les écrans mobiles */
@media only screen and (max-width: 767px) {

  /* Réinitialiser les styles pour le conteneur, l'image et l'iframe */
  .container-image,
  img,
  iframe {
    width: 100%;
    max-height: none;
    margin: 0;
    /* Réinitialiser les marges pour les écrans mobiles */
  }

  .iframe {
    max-height: 200px;
  }
}

#explain-verse {
  font-size: 14px;
  margin-top: 0;
}

/* Styles pour le paragraphe contenant la citation biblique */
.quote-container {
  font-family: 'Georgia', serif;
  /* Police de caractères adaptée pour les citations */
  font-size: 18px;
  /* Taille de police */
  line-height: 1.5;
  /* Hauteur de ligne pour une meilleure lisibilité */
  margin: 20px 0;
  /* Marges pour espacer la citation du reste du contenu */
  text-align: center;
  /* Centrer le texte (ajustez selon vos préférences) */
  color: #333;
  /* Couleur du texte */
  font-style: italic;
  /* Style de police italique pour une apparence formelle */
}

/* Style pour la citation elle-même (ajustez selon vos besoins) */
.quote-text {
  padding: 10px;
  /* Ajouter un peu d'espace intérieur */
  border-left: 3px solid #555;
  /* Bordure à gauche pour indiquer la citation */
  font-size: 1.2em;
  /* Taille de police de la citation elle-même */
}


/* Styles pour les boutons "Contact" et "Prochaine réunion" */
.button-container {
  text-align: center;
  margin: 0 auto;
}

.contact-button,
.meeting-button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid #007BFF;
  border-radius: 5px;
  color: #007BFF;
  background-color: #fff;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.contact-button:hover,
.meeting-button:hover {
  background-color: #007BFF;
  color: #fff;
  border-color: #007BFF;
}

/* Ajoutez une marge entre les deux boutons */
.contact-button,
/* ligne à supprimer quand je remettrai le deuxième bouton */
.meeting-button {
  margin: 20px auto 40px;
}

.button-container {
  margin-top: 20px;
}

.contact-button {
  display: block;
}

.replacement-text {
  display: none;
}