/***********************************************
*
*		Feuille de style de l'écran de compte
*
***********************************************/

/*****************************
* Gestion des onglets
*****************************/

.profil-conteneur {
    width: 100%;
    max-width: 800px;
	min-width: var(--taille-mini-boite);
    margin: auto;
    padding: 20px;
    background-color: var(--couleur-fond);
    border-radius: 8px;
    color: var(--couleur-ecriture);
}

.onglets {
    display: inline-flex;
    align-items: flex-end;
	padding: 0;
    margin-bottom: 0 0 -4px 0;
    gap: 2px;
    position: relative;
    z-index: 1;
}

.onglet {
    padding: 15px 20px;
    text-align: center;
    background-color: var(--couleur-fond);
    border: 1px solid #000000;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    color: var(--couleur-ecriture);
    font-size: 100%;
    transition: background-color 0.3s;
    margin: 0;
}

.onglet:not(.actif):hover {
    background-color: var(--couleur-boite);
}

.onglet.actif {
    background-color: var(--couleur-boite);
    border: 1px solid var(--couleur-bordure);
    border-bottom: 1px solid var(--couleur-boite);
    font-weight: bold;
    z-index: 2; /* Place l’onglet actif au-dessus des autres et du contenu */
}

.contenu {
    /*padding: 20px;*/
    background-color: var(--couleur-boite);
    border: 1px solid var(--couleur-bordure);
    border-radius: 0 0 8px 8px;
    color: var(--couleur-ecriture);
    margin: -4px 0 0 0; 
	padding: 0;
    z-index: 1;
    position: relative;
	width : 100%;
}



/*******************************
* Gestion des formulaires
*******************************/

.formulaire {
    max-width: 400px;
    margin: auto;
    padding: 20px;
    background-color: var(--couleur-boite);
    border-radius: 8px;
    color: var(--couleur-ecriture);
}

/* pour le * d'obligatoire*/
.obligatoire {
}

.obligatoire::after {
    content: " *"; /* Ajoute le symbole après le lien */
    color: var(--couleur-ecriture-important);
    margin-left: 5px; 
}


.erreur {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid var(--couleur-ecriture-important);
    border-radius: var(--taille-rond-element);
    color: var(--couleur-ecriture-important);
    display: none;
}