////////// FORMULAIRE DE CONTACT

// switch por afficher le conteneur du formulaire 
.contact-form-wrap
{
    display:none;
}

#show-contact:checked ~  .contact-form-wrap
{
    display:block;
}

// je positionne le fond en fixed pour lui faire occuper toute la page
.contact-form-wrap
{
    position:fixed;
    //fond noir à 25% ce qui donne la transparence
    background-color:rgba(0,0,0,0.25);
    top:0;
    bottom:0;
    left:0;
    right:0;
    .h3
    {
        color:white;
        text-align: center;
        margin-top:120px;
    }
}

//je préfixe les éléments du formulaire pour les regrouper dans mon sas
.cf 
{
    //je centre le formulaire dans son conteneur (.contact-form-wrap)
    &-form
    {
        background-color: white;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        padding: 20px;
        border-radius: 20px;
    }
    //je normalise tous les inputs / labels
    &-input, &-label
    {
        min-height: 20px;
        line-height: 20px;
        box-sizing: border-box;   
        width:100%;     
        min-width:30vh;
    }
    &-input
    {
        border: solid 1px #666;
        border-radius: 4px;
        padding:4px;
    }
    &-label
    {
        line-height: 30px;
        box-sizing: border-box;
    }
    &-btn
    {
        background-color: black;
        color:white;
        padding-left:10px;
        padding-right:10px;
        margin-top:4px;
        &:hover
        {
            background-color: white;
            color:black;   
            transition: color 0.5s;     
        }
    }
    &-input-group
    {
        &:after
        {
            content:"";
            display: table;
            clear:both;
            overflow: auto;
        }
    }    
    &-close-wrap
    {
        margin:-10px -10px 0 -20px;
    }
    &-close 
    {
        display: block;
        position:relative;
        box-sizing: border-box;
        float:right;
        clear:both;
        font-size:20px;
    }
    
}

.icon-radio-checked
{
    display:none;    
    color:green;
}
.icon-radio-unchecked
{
    color:red;
}

#abonnement-oui:checked ~ .ct-radio
{
    .icon-radio-checked
    {
        display:inline;    
    }    
    .icon-radio-unchecked
    {
        display:none;    
    }      
}
#abonnement-non:checked ~ .ct-radio
{
    .icon-radio-checked
    {
        display:inline;    
    }    
    .icon-radio-unchecked
    {
        display:none;    
    }      
}

