/*
/////////////////////////////////////////////////////////////
/////////////////    HAUT DE PAGE    ////////////////////////
/////////////////////////////////////////////////////////////
*/   

.top-image-layout {
    width: 100%;
    overflow: hidden;
    height: 550px;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.top-image-layout .text {
    width: 500px;
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    font-size: 65px;
    font-weight: bold;
    color: white;
    position: relative;
}

.top-image-layout .text::before {
    display: block;
    content: '';
    position: absolute;
    left: -45px;
    top: -10px;
    width:  30px;
    height: 30px;
    background: url('../media/imgs/guillemet_1_blanc.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.top-image-layout .text::after {
    display: block;
    content: '';
    position: absolute;
    right: 30px;
    bottom: 40px;
    width:  30px;
    height: 30px;
    background: url('../media/imgs/guillemet_2_blanc.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.top-image-layout-decorator {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(6px);
}

.top-image-layout-decorator svg {
    width: 100%;
}

.top-highlighted-sentence {
    width: 1300px;
    font-size: 50px;
    font-weight: 600;
    text-align: center;
    color: #064872;
    margin: 100px auto;
}

/*
/////////////////////////////////////////////////////////////
///////////////////    PAGE LAYOUT    //////////////////////
/////////////////////////////////////////////////////////////
*/   

.page-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-gap: 40px;
    width: 1400px;
    margin: 100px auto;
}

.page-content {
    text-align: justify;
    font-size: 22px;
    color: #616160;
}

.page-content ul {
    margin: 60px 0;
}

li {
    position: relative;
    margin: 30px 0;
    font-weight: 600;
    list-style: none;
    color: #F3944D;
}

li::before {
    content: '';
    width: 30px;
    height: 30px;
    background: url('../media/imgs/fleche_orange.png');
    background-size: contain;
    position: absolute;
    top: 50%;
    left: -40px;
    transform: translateY(-50%);
}

.content-info {
    text-transform: uppercase;
    color: #064872;
}

.content-info > div::first-letter {
    font-size: 32px;
}

.content-info-spacer {
    width: 100%;
    margin: 30px 0;
    height: 1px;
    background: #F3944D;
}

.page-images {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 200px minmax(150px, 250px) 200px;
    grid-template-areas: 
        "image1 image2"
        "image1 image3"
        "image4 image3";
    grid-gap: 20px;
}

.page-image {
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px;
}

.page-image.img-1 {
    grid-area: image1
}
.page-image.img-2 {
    grid-area: image2
}
.page-image.img-3 {
    grid-area: image3
}
.page-image.img-4 {
    grid-area: image4
}

/*
/////////////////////////////////////////////////////////////
/////////////////////    CONTACT    /////////////////////////
/////////////////////////////////////////////////////////////
*/   

.contact {
    margin: 150px auto 50px auto;
    width: 1400px;
    text-align: center;
}

.contact-title {
    font-size: 50px;
    font-weight: 600;
    color: #064872;
}

.contact-subtitle {
    font-size: 40px;
    color: #616160;
}

.contact-button {
    display: inline-block;
    margin: 50px 0;
    border-radius: 15px;
    background: #F3944D;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 24px;
    font-weight: 600;
    width: 230px;
    text-align: left;
    position: relative;
}

.contact-button::after {
    content: '';
    width:  30px;
    height: 30px;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: url('../media/imgs/fleche_blanche.png');
    background-size: contain;
}