/* Centrer le formulaire et garder le bouton sur la même ligne que le champ de recherche */
#search-form, #searchForm {
    display: flex;
    justify-content: center; /* Centre le contenu horizontalement */
    align-items: center; /* Aligne verticalement le champ et le bouton */
    margin: 0 auto;
    width: 100%;
    max-width: 400px;
}

/* Style pour le champ de recherche (plus large) */
#search-form input[type="text"], #searchForm input[type="text"] {
    width: 90%; /* Ajuste la largeur du champ de recherche */
    padding: 10px;
    font-size: 16px;
    margin-right: 10px; /* Espace entre le champ et le bouton */
}

/* Style pour le bouton "Envoyer" (moins large et sur la même ligne) */
#search-form input[type="submit"], #searchForm button {
    width: 20%; /* Réduit la largeur du bouton */
    padding: 10px;
    font-size: 14px;
    cursor: default; /* Ajoute un curseur pointeur */
}


/* Les résultats ne doivent pas dépasser la largeur du formulaire */
#search-results {
    max-width: 400px;
    margin: 7px auto;
    text-align: left;
    padding-left: 25px;
}

/* Style pour chaque résultat avec une ligne séparatrice */
.form-result {
	    width: 90%;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/* Style pour les liens des résultats */

.form-result-link,
.form-result-link div {
    text-decoration: none;
    color: gray;
    font-size: 14px;
}

.p-not-found {
  text-decoration: none;
  color: gray;
  font-size: 14px;
}

/* Ligne séparatrice entre les résultats */
.form-result:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.6px;
    background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.6), rgba(0,0,0,0)); /* Ligne avec dégradé transparent aux extrémités */
    opacity: 0.6; /* Transparence à 60% */
}

/* Survol des liens (sans soulignement et légèrement plus foncé) */
.form-result a:hover {
    text-decoration: none;
    color: #555;
}



/* design form */

.step-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 80%; /* Réduit la largeur de step-indicators */
    margin: 30px auto; /* Centre les indicateurs */

}

.step-circle {
    width: 35px; /* Taille des cercles */
    height: 35px; /* Taille des cercles */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px; /* Espacement entre les cercles ajusté */
    position: relative;
    z-index: 2; /* Pour que les cercles soient au-dessus de la ligne */
}

.step-line {
    height: 5px; /* Épaisseur de la barre */
    flex-grow: 1; /* La barre prend tout l'espace disponible entre les cercles */
    position: relative;
    top: 50%; /* Positionner la barre au milieu des cercles */
    z-index: 1; /* Pour que la barre soit derrière les cercles */
}

.step-line.black {
    background: black; /*   background: linear-gradient(to right, transparent, black, transparent); Couleur de la barre entre étapes passées et en cours */
}

.step-line.grey {
    background: lightgray; /* Couleur de la barre entre étapes à venir et en cours */
}

.completed-step {
    background-color: black; /* Couleur des étapes complètes *//* background: radial-gradient(circle, black 60%, transparent 100%); Couleur des étapes complètes */

}

.current-step {
    background-color: black; /* Couleur du cercle pour l'étape actuelle */ 
}

.upcoming-step {
    background-color: lightgray; /* Couleur des étapes à venir */
}

.step-number {
    color: white; /* Couleur du texte pour les étapes passées */
    text-decoration: none; /* Pas de décoration sur le texte */
    text-align: center; /* Centrage du texte */
    display: flex;
    align-items: center; /* Alignement vertical */
    justify-content: center; /* Alignement horizontal */
    height: 35px; /* Hauteur pour centrer */
    width: 35px; /* Largeur pour centrer */
	font-weight: 600;
}

.black {
    color: black; /* Couleur du texte pour les étapes à venir */
}

.step-link {
    position: relative; /* Lien pour les étapes passées */
    z-index: 2; /* Pour que le lien soit au-dessus de la ligne */
	text-decoration: none;
}

.title-form-page {
    font-size: 25px;
    margin-bottom: 20px;
    line-height: 1.7em;
    font-weight: 450;
    text-transform: none;
	 text-align: center; /* Centre le texte à l'intérieur du H2 */
}

.sub-title-form-page{
    font-size: 25px;
    margin-bottom: 20px;
    line-height: 1.7em;
    font-weight: 450;
    text-transform: none;
	 text-align: center; /* Centre le texte à l'intérieur du H2 */
	 color:gray;
}


.form-step {
    display: block; /* Empêche les flexbox d'affecter les autres éléments */
}

/* Spinner Animation */
.gc-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: gc-spin 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes gc-spin {
    to { transform: rotate(360deg); }
}

/* État désactivé */
button[disabled].gc-loading {
    opacity: 0.7;
    cursor: not-allowed;
}

@media screen and (min-width: 768px) {
	
.title-group {
     display: flex; /* Utiliser Flexbox pour l'alignement */
    flex-direction: row; /* Aligner les éléments horizontalement */
    align-items: center; /* Centrer verticalement */
    justify-content: center; /* Centrer horizontalement */
    text-align: center; /* Centrer le texte, au cas où */
    gap: 10px; /* Espacement entre le h2 et h3 */
	margin-bottom:20px;
}


.form-field {
     display: flex; /* Utiliser Flexbox pour l'alignement */
    flex-direction: row; /* Aligner les éléments horizontalement */
    align-items: center; /* Centrer verticalement */
    justify-content: center; /* Centrer horizontalement */
    text-align: center; /* Centrer le texte, au cas où */
    gap: 10px; /* Espacement entre le h2 et h3 */
	margin-bottom:50px;
}


	}
	
	
	
@media screen and (max-width: 768px) {
    .form-field {
        display: flex; /* Active Flexbox */
        flex-direction: column; /* Empile les divs verticalement */
        align-items: center; /* Centre horizontalement les divs */
        gap: 30px; /* Ajoute un espacement uniforme entre les divs */
        margin-bottom: 10px; /* Optionnel, ajoute un espace en bas de la section */
    }
	
	/* Style pour chaque résultat avec une ligne séparatrice */
.form-result {
	    width: 80%!important;

}
}

/* um color button*/
.um input[type=submit].um-button, .um input[type=submit].um-button:focus {
    background: #000000!important;
}