body {
  font-family: Arima;
}
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../img/rose-petals.svg);
  z-index: -1;
}
header {
  background-color: #8ff5f5 !important;
}
footer {
  background-color: #8ff5f5;
}
.navbar {
  height: 100px;
  margin-right: 16px;
}
.navbar-brand img {
  width: 75px;
  height: 75px;
  margin-right: 16px;
}
.navbar-nav .nav-link {
  color: #000000; /*couleur des liens*/
  font-size: 1.2em;
}
.navbar-nav .nav-link:hover {
  color: #ff00ff; /*couleur au survol*/
}
.navbar-collapse {
  background-color: #8ff5f5cc;
}
.navbar-nav {
  text-align: center; /* Centre le texte */
}
.nav-item {
  display: inline-block; /* Pour que les éléments s'affichent sur la même ligne */
  margin: 0 auto; /* Centre les éléments */
}
.btn-custom {
  background-color: #ff00ff; /*couleur du bouton*/
  color: #f9ecec;
  font-size: 1.2em;
}
.btn-custom i {
  line-height: 1.2em !important;
  vertical-align: bottom;
}
.bi::before {
  line-height: 1.2em !important;
}
.btn-custom:hover {
  background-color: #e65de6;
}

.container-color {
  background-color: #a7daf5;
  border-radius: 10px; /* Coins arrondis */
}
/*style pour le titre*/
.title {
  color: #000000;
  margin-bottom: 10px;
  text-align: center;
  height: auto;
}
/*style pour le texte*/
p {
  color: #000000;
  line-height: 1.6;
  margin: 8px;
  padding: 10px;
  text-align: center;
}
.card-custom {
  background-color: #fff;
  border: 1px solid #08289250;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  text-align: center;
  overflow: hidden;
  transition: transform 0.2s;
  width: 200px !important;
}

.card-custom img {
  object-fit: cover; /* Assure que l'image garde son ratio */
}

.card-custom h3 {
  margin: 10px;
  text-shadow: 1px 1px 1px #fff;
}

.card-custom:hover {
  transform: scale(1.05);
}
.spacer {
  height: 10vh;
  opacity: 0.035;
  background-image: url(../img/logo.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* @media (max-width: 425px) {
    .card-custom {
        flex: 0 1 100%; 
    }
}

@media (min-width: 426px) and (max-width: 768px) {
    .card-custom {
        flex: 0 1 45%; 
    }
}

@media (min-width: 769px) and (max-width: 1440px) {
    .card-custom {
        flex: 0 1 30%; 
    }
}

@media (min-width: 1441px) {
    .card-custom {
        flex: 0 1 200px; 
    }
}
 */
h4 {
  width: 100%;
}
.card-text {
  margin: 10px;
}
.img-card {
  width: 100%;
  height: 300px; /* Ajustez la hauteur selon vos besoins */
  object-fit: cover; /* Assure que l'image garde son ratio et remplit le conteneur */
  object-position: center; /* Centre l'image dans le conteneur */
}

.grecaptcha-badge {
  visibility: hidden;
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute; /* Pour l'enlever du flux de la page */
}

legend {
  text-align: center;
}

form {
  display: flex;
  flex-direction: column;
}

form div,
form fieldset {
  margin-bottom: 20px;
}

/* Espacement des labels et champs de saisie */
label {
  margin-bottom: 8px;
}

input,
textarea {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

textarea {
  resize: vertical; /* Permet de redimensionner la hauteur */
}

/* Bouton personnalisé */
button[type="submit"] {
  background-color: #ff00ff;
  color: white; /* Couleur du texte */
  padding: 12px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

/* Style des champs radio */
fieldset {
  padding: 10px;
  border: 1px solid #ffffff77;
  border-radius: 5px;
}

.form-check {
  margin-left: 20px;
}

/* Message de confirmation */
#formMessage {
  color: #000000;
  font-weight: bold;
  margin-top: 20px;
}

:target::before {
  content: "";
  display: block;
  height: 100px; /* Ajustez cette valeur en fonction de la hauteur de votre en-tête */
  margin-top: -100px; /* La même valeur que la hauteur */
  visibility: hidden;
}

/* Style pour le Offcanvas */
.offcanvas-header {
  background-color: #8ff5f5; /* Couleur de fond de l'en-tête */
  border-bottom: 1px solid #dee2e6; /* Bordure en bas de l'en-tête */
}

.offcanvas-body {
  background-image: url(../img/rose-petals.svg);
  background-size: cover; /* Assure que l'image couvre toute la surface */
  background-position: center; /* Centre l'image */
  padding: 20px; /* Espacement interne */
  background-repeat: no-repeat; /* Empêche la répétition de l'image */
}

.offcanvas-body p {
  font-size: 16px; /* Taille de la police */
  color: #333333; /* Couleur du texte */
}

.offcanvas-body .form-label {
  font-weight: bold; /* Texte en gras pour les labels */
}

.offcanvas-body .form-control {
  margin-bottom: 15px; /* Espacement en bas des champs de formulaire */
}

.offcanvas-body .btn-primary {
  background-color: #ff00ff; /* Couleur de fond du bouton */
  border: none; /* Pas de bordure */
}

.offcanvas-body .btn-primary:hover {
  background-color: #e65de6; /* Couleur de fond du bouton au survol */
}
