#contact{
    min-height: unset;
}
#contact-form{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    align-items: stretch;
}

.champ-obligatoire,
*:required{
    border-color: rgba(200,0,0,.3);
}

#contact button,
#franchise-contact button{
    font-size: 120%;
}

#contact input,
#contact textarea,
#contact select,
#franchise-contact input,
#franchise-contact textarea,
#franchise-contact select
{
    width: 100%;
    margin-bottom: 1em;
}
#contact textarea,
#franchise-contact textarea{
    min-height: 220px;
}

#contact h2,
#franchise-contact h2{
    margin-bottom: 1em;
}

.blockContact{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 2em;
    width: 50%;
    padding: 1em 2em;
}
#contact-form .blockContact:last-child{
    justify-content: flex-end;
}
#contact-form .blockContact:last-child span,
.required-note{
    color:var(--col-red);
    font-size: 90%;
    margin-top: 1em;
}

.blockContact label{
    margin-bottom: .5em;
    color: black;
    font-weight: 600;
}
.blockContact select{
    background-color: white;
}

/* AGENCES */

#contact-agences-ul{
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    align-items: stretch;
    margin-bottom:2em;
}
    .contact-agences-li{
        list-style: none;

        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;

        width: 40%;
        margin: 1.5% 2.5%;     

        background-color: white;
        border-radius: 12px;
        overflow: hidden;

        /*box-shadow: var(--box-shadow);
        transition: var(--transition-all);*/
    }
        .cal-nom{
            display: block;
            background-color: var(--col-red);
            width: 100%;
            text-align: center;
            font-weight: 400;
            font-size: 120%;
            color: white;
            padding:.2em .5em;
        }
        .cal-nom:hover{
            color: white;
        }
            .cal-nom b{
                font-weight: 800;
            }
        .cal-email,
        .cal-tel{
            font-weight: 600;
            color: var(--col-red);
            padding:.5em .5em;
            margin-top:.5em;
        }
        .cal-tel{
            color: var(--col-grey);
            padding-top:0;
            margin-top:0;
            font-weight: 800;
            letter-spacing: 1px;
        }
        .cal-email:before,
        .cal-tel:before{
            content: "\f0e0";
            font-family: var(--font-awesome);
            padding-right: .5em;
            font-size: 90%;
        }
        .cal-tel:before{
            content: "\f095";
        }
        .cal-addresse1,
        .cal-addresse2{
            font-weight: 500;
        }
        .cal-addresse2{
            padding-bottom:1em;
            margin-bottom:.5em;
            text-transform: uppercase;
        }
        .cal-addresse1:before{
            content: "\f3c5";
            font-family: var(--font-awesome);
            padding-right: .5em;
            font-size: 90%;
            font-weight: 500;
        }