#contact {
    position: relative;
    display: grid;
    grid-template-areas: 
        "titl form"
        "info form"
        "map  map";
    grid-template-columns: 1.5fr 3fr;
    grid-template-rows: 28vw auto auto;
    gap: calc(var(--gutter) / 2) var(--gutter);
    margin-bottom: calc(var(--gutter-v) *2);
    padding-left: var(--gutter-left);
    padding-right: var(--gutter-right);
    margin-top: -1px;
}

.contactImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.contactTitle { grid-area: titl; position: relative; z-index:2; }
.contactInfo  { grid-area: info; position: relative; z-index:2; }
.contactForm  { grid-area: form; position: relative; z-index:2; }
#contactCarte { grid-area: map; position: relative; z-index:2; }

.contactTitle h1 {
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 1.2em;
    margin-top: var(--gutter-v);
}

.contactForm {
    background: #fff;
    margin-top: var(--gutter-v);
    padding: 3rem 2rem;
}
/** checkbox field **/
.cf-control-group[data-name="recevoir_email"] .cf-control-label {
  width: 75%;
}
.cf-control-group[data-name="recevoir_email"] .cf-control-label label {
	width: 100%;
}
.cf-control-group[data-name="recevoir_email"] .cf-list {
  display: flex;
} 
.cf-control-group[data-name="recevoir_email"] .cf-list .cf-radio-group {
  display: flex;
} 

/** Info **/
.contactInfo {
    display: flex; 
    flex-direction: column;
    gap: 2rem;
}
.contactInfo address, 
.contactInfo p {
    padding: .25rem 1rem;
    border-left: 2px solid var(--blue);
    line-height: 1.2em;
}
.contactInfo p em {
    display: block;
}
.contactInfo p em:not(:first-child) {
    margin-top: 1em;
}
.contactInfo p em span {
    font-style: normal;
}

/** Map **/
#contactCarte {
    width: 100%;
    height: 400px;
}
/**************************************************************************************************/
/********* RESPONSIVE
/**************************************************************************************************/
@media screen and (max-width: 801px) {
    #contact {
        grid-template-areas: 
            "titl" 
            "form"
            "info"
            "map";
        grid-template-columns: 1fr;
    }
    .contactForm {
        background: #fff;
        margin: 2rem 0 4rem;
        padding: 0;
    }
    .contactInfo {
        flex-direction: row;
        gap: 2rem;
        flex-wrap: wrap;
        margin-bottom: 4rem;
    }
  
}