/* daf : Dev Application Form */

:root
{
    --daf-form-bg-col: var(--da-blanc);/*var(--da-gris-clair);*/
    --daf-form-border-col: #ccc;
    --daf-form-font-family: var(--da-font-open-sans-serif);
    --daf-form-font-size: 14px;
    --daf-form-font-weight: 400;
    --daf-form-msg-aide-coul: #E10720;
    --daf-form-checkbox-font-family: var(--da-font-icone-del);
    --daf-form-checkbox-font-size: 14px;
    --daf-form-checkbox-col: var(--das-form-theme-coul);
    --daf-form-input-focus-col: var(--das-form-theme-coul);
}


/********************************************************************************************************************************
                                        formulaire (message d'aide + label + compo)
                                        (checkbox, select, textarea, input (text, pwd, number))
********************************************************************************************************************************/

.daf-form
{
    background-color: var(--daf-form-bg-col);
    font-family: var(--daf-form-font-family);
    font-size: var(--daf-form-font-size);
    font-weight: var(--daf-form-font-weight);
}

.daf-form .daf-msg-aide.erreur input,
.daf-form .daf-msg-aide.erreur textarea
{
    border-color: var(--daf-form-msg-aide-coul);
}

.daf-form .daf-msg-aide.erreur .daf-txt-aide
{
    color: var(--daf-form-msg-aide-coul);
    padding-left: 5px;
}

.daf-form input[type=text],
.daf-form input[type=date],
.daf-form input[type=password],
.daf-form input[type=number],
.daf-form input[type=file],
.daf-form textarea,
.daf-form select
{
    padding-top: 12px;
    padding-right: 20px;
    padding-bottom: 12px;
    padding-left: 20px;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: 0px;
    display: inline-block;
    border: 1px solid var(--daf-form-border-col);
    border-radius: 4px;
    box-sizing: border-box;
}

.daf-form input[type=text],
.daf-form input[type=password],
.daf-form input[type=number],
.daf-form input[type=file],
.daf-form textarea,
.daf-form select
{
    width: 100%;
}

.daf-form input[type=text]:focus-visible,
.daf-form input[type=date]:focus-visible,
.daf-form input[type=password]:focus-visible,
.daf-form input[type=number]:focus-visible,
.daf-form input[type=file]:focus-visible,
.daf-form textarea:focus-visible,
.daf-form select:focus-visible
{
    outline-color: var(--daf-form-input-focus-col);
}

.daf-form textarea
{
    resize: vertical;
}

.daf-form input[type=checkbox]
{
    appearance: none;
    
    height: 23px;
    width: 23px;
    padding: 2px 0px 0px 1px; /* centrage check */
    background: #fff;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: 0px;

    border: 1px solid var(--daf-form-border-col);
    border-radius: 4px;
}

.daf-form input[type=checkbox].daf-enligne
{
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: -6px;
    margin-left: 0px;
} 

.daf-form input[type=checkbox].daf-check-enligne
{
    margin-top: -20px;
} 

.daf-form input[type=checkbox]:checked
{
    position: relative;
}

.daf-form input[type=checkbox]:checked:before
{
    content: '3'; /* check */
    
    display: block;
    position: absolute;
    
    font-family: var(--daf-form-checkbox-font-family);
    font-size: var(--daf-form-checkbox-font-size);
    color: var(--daf-form-checkbox-col);
    text-align: center;

    padding-top: 2px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 2px;

}

.daf-form .desactive
{
    background-color: #f0f0f0;
    color: #aaa;
    pointer-events: none; /* desactive l'interaction avec l'input */
}

label[for=input_phone],
input#input_phone
{
    display: none;
}