main{
    background-image: url('/assets/img/ssBois/desk-sous-bois3.png');
    background-size: cover;
    padding: 2rem;
}

/* Messages 
------------------------------------------------ */

:root{
    --bs-success : #63af83;/*variable bootstrap*/
    --bs-success-rgb :46, 125 , 79;
    --success-bg : #e9fcef;
    --bs-danger :  #C62828;/*variable bootstrap*/
    --danger-bg :#fdd6d6;
    --input-form :#cf7979;
    --bs-danger-rgb : 198 , 40, 40 ;
}

.success-message , .success-message-php{
    color: var(--bs-success) !important;
    background-color: var(--success-bg) !important;
    padding: 1rem;
    border-radius: 8px;
}

.error-message ,.error-message-php{
    color: var(--bs-danger) !important;
    background-color: var(--danger-bg) !important;
    padding: 1rem;
    border-radius: 8px;
}

.error-message{
    display: none;
}


/* Connexion
------------------------------------------------ */

.form-container{
    width: 35%;
    background-color: var(--leaf);
    margin: auto;
    margin-top: 14rem;
    border-radius: 8px;
    padding-bottom: 6rem;
    padding-top: 1rem;
    margin-bottom: 14rem;
    border: 1px solid var(--cream);
    opacity: 0.8;
}
.form-container input{
    width: 55%;
    margin: auto;
}

.form-container label{
    text-align: center;
    width: 100%;
}


.btn-form , .btn-form a{
    background-color: transparent;
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cream);
    border: 1px solid var(--mist);
    border-radius: 5px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    width: 40%;
    margin: auto;
}

.btn-form:hover{
    background-color:var(--mist);
    color: var(--leaf);
}

.form-container-profil{
    width: 70%;
    background-color: var(--leaf);
    margin: auto;
    margin-top: 10rem;
    border-radius: 8px;
    padding-bottom: 6rem;
    padding-top: 1rem;
    margin-bottom: 14rem;
    opacity: 0.8;
}

.donnees-container{
    width: 40%;
    background-color:var(--mist);
    color: var(--moss);
    padding: 1rem;
    border-radius: 8px;
    margin: auto;
}

.btn-form-profil{
    background-color: var(--leaf);
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cream);
    border: 1px solid var(--mist);
    border-radius: 5px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    width: 40%;
    margin: auto;
}

.btn-form-profil:hover{
    background-color: var(--mist);
    border: 1px solid var(--leaf);
    color: var(--leaf);
}

@media (max-width: 640px){
    .form-container-profil,.form-container{
        width: 98%;
        margin-top: 4rem;
    }
}