.com-contact {
    display:grid;
    gap: 1rem var(--space-out);
    grid-template-areas: 
        "tl br"
        "bl br"
        "xx br" ;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto;
    margin:  var(--space-out);
}

.com-contact .page-header   { grid-area: tl ; }
.com-contact__container     { grid-area: bl ; }
.com-contact__form          { grid-area: br ; }

.com-contact .page-header::before {
    content: 'Contacter';
    display:block;
    font-family: var(--font2);
    text-transform: uppercase;
    font-size: var(--font-size-tiny);
}
.com-contact .page-header h1 {font-family: var(--font1); font-size:3rem;}

.com-contact__container h3 { display:none; }
.com-contact__container .com-contact__thumbnail {
    width:100px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.com-contact__container dt {
    display:block;
    font-family: var(--font2);
    text-transform: uppercase;
    font-size: var(--font-size-tiny);
}
.com-contact__container dd {
    font-size: var(--font-size-big);
    margin-bottom:1.5rem;
}
.com-contact__container dd a {text-decoration: underline;}

.com-contact > h3 {display:none;}


@media screen and (max-width: 780px) {
    .com-contact {display:block;}
    .com-contact__form {margin-top:3rem;}
}

/**************************************************************************************************/
/********* CONTACT FORM
/**************************************************************************************************/
#system-message-container {margin: 0 var(--space-out);}

#contact-form {max-width:750px;}
#contact-form legend,
#contact-form .field-spacer:first-of-type {display:none;}

#contact-form fieldset .control-group { display:flex; margin: .5rem 0;position:relative;}
#contact-form fieldset .control-group .control-label {width: 7rem;font-size:var(--font-size-big);line-height:2rem;}
#contact-form fieldset .control-group .control-label .star {display:none;}
#contact-form fieldset .control-group .control-label .form-control-feedback {position:absolute; right:.5rem;font-size: var(--font-size-small); color: red;}
#contact-form fieldset .control-group .controls {flex:1;}
#contact-form fieldset .control-group .controls input { display:block; width: 100%; height:2rem; padding: 0 .5rem;font: inherit;}
#contact-form fieldset .control-group .controls textarea {width:100%; padding: .5rem;font: inherit;}

#contact-form .control-group .btn {margin-left: 7rem;border:1px solid;font-family: var(--font2);padding:.5em 1em;cursor:pointer;letter-spacing: .03em;
    transition: background-color .3s, border-color .3s, color .3s;}
#contact-form .control-group .btn:hover {background-color: var(--color-green);border-color: var(--color-green);color: #fff;}