h5 {
    font-size: 32px !important;
}
.yellow{
    color: #DBB206;
}
.carousel-item{
    height: 100vh;
}

.caroussel-gender{
    height: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.intro-page{
    background-image: url('/img/accueil_registre_visites 2.png');
    background-size: cover;
    background-position: center;
    height: 124vh;
    display: block;
    transition: .5s ease;
}
.user-information{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.start-card.active {
    opacity: 1;
    z-index: 10;  /* ✅ bon z-index ici */
  }
  .back-form-btn {
    background-color: transparent;  /* Fond transparent */
    border: 2px solid #007bff; /* Bordure bleue */
    color: #007bff; /* Couleur du texte (icône) bleue */
    padding: 10px 20px; /* Padding autour du bouton */
    border-radius: 5px; /* Coins arrondis pour le bouton */
    transition: background-color 0.3s, color 0.3s; /* Animation de changement de couleur */
    margin-top: 20px; /* Ajoute un espace au-dessus pour abaisser le bouton */
  }
  
  .back-form-btn:hover {
    background-color: #007bff; /* Fond bleu lors du survol */
    color: white; /* Texte blanc lors du survol */
  }
  
  .back-form-btn i {
    font-size: 20px; /* Taille de l'icône */
  }
  
  .dt-button.buttons-copy {
    background-color: #6c757d !important; /* gris */
    color: white;
    border: none;
  }
  
  .dt-button.buttons-pdf {
    background-color: #dc3545 !important; /* rouge */
    color: white;
    border: none;
  }
  
  .dt-button.buttons-print {
    background-color: #6f42c1 !important; /* violet */
    color: white;
    border: none;
  }
  
  .dt-button {
    border-radius: 6px;
    padding: 6px 12px;
    margin-right: 6px;
  }
  
/* .start-card{
    width: 50%; 
    height: 45%; 
    background: rgba(142, 11, 86, 0.80); 
    box-shadow: 4px 4px 4px; 
    border-radius: 10px; 
    backdrop-filter: blur(4px);
    opacity: 1;
    display: flex;
    transition: .4s ease;
    position: absolute;
    z-index: -10;    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    justify-content: center;
    align-items: center;
} */
/* Fond formulaire femme */
/* Fond formulaire femme */
/* Fond formulaire femme réduit */
/* Fond formulaire femme réduit davantage */
/* Fond formulaire femme avec bordure rouge */
.bg-femme {
    background-image: url('/img/formulaire_femme.png');
    background-size: 40% auto; /* Réduit à 40% de la largeur */
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Fond formulaire homme avec bordure bleue */
.bg-homme {
    background-image: url('/img/formulaire_homme.png');
    background-size: 40% auto; /* Réduit à 40% de la largeur */
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Formulaire au centre */
.formulaire {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 90%;
}

/* Bordure rouge pour le formulaire femme */
.bg-femme .formulaire {
    border: 4px solid red;
}

/* Bordure bleue pour le formulaire homme */
.bg-homme .formulaire {
    border: 4px solid blue;
}


.start-card {
    width: 40%;
    height: 35%;
    background: rgba(142, 11, 86, 0.8);
    box-shadow: 4px 4px 4px;
    border-radius: 10px;
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    transition: .4s ease;
}


.subscribe{
    background: rgba(0, 0, 0, 0.25) ;
    border: none;
    width: 50%;
    padding: 10px 8px;
    font-size: 22px;
    border-radius: 12px;
    color: white;
    margin-top: 20px;
}
.cancel{
    background: rgba(142, 11, 86, 0.80) ;
    border: none;
    width: 30%;
    padding: 10px 8px;
    font-size: 22px;
    border-radius: 12px;
    color: white;
    margin-top: 20px;
}
.item{
    height: 100px;
}
.start-card.active{
    opacity: 1;
    z-index: 10;    
}
.intro-page.blur{
    filter: blur(4px);
}
.gender-choice{
    width: 100%;
    padding: 10px;
}
.image-gender{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.image-gender span{
    font-size: 32px;
}
.image-gender.female{
    color: rgba(142, 11, 86, 0.80);
}
.image-gender.male{
    color: #00758D;
}
.image-gender.female img{
    border: 2px solid #8e0b56cc;
    border-radius: 5px;
    padding-block: 3px;
}
.image-gender.male img{
    border: 2px solid #00758D;
    border-radius: 5px;
    padding-block: 3px;
}
.back-form-btn{
    position: absolute;
    left: 20px;
    top: 20px;
    border: none;   
    background-color: white;
    color: transparent;
    border-radius: 50% ;
    height: 35px;
    width: 35px;

}
.phone-number::-webkit-outer-spin-button,
 .phone-number::-webkit-inner-spin-button,
 .phone-number
  {
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
 }

 .banner{
    z-index: 1;
    background-color: rgba(142, 11, 86, 0.80);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;  
    margin: auto;  
    padding: 9px;
 }
 #installButton{
    color: #DBB206;
    text-decoration: none;
 }
 #installButton:hover{
    cursor: pointer;
 }
@media (max-width: 576px){  
    .start-card{
        width: 90%; 
        height: 40%; 
    }
    .align-items-center{
        align-items: center !important;
    }
    .back-form-btn{
        background-color: #00758D;
    }
}