#a-propos {
    position:relative;
    overflow:hidden;
    width:100%;
}
.aProposTop {
    position: relative;
}
.aProposTop .mainImage {
    width:35%;
}
.aProposTitle {
    position: relative;
    width: 60%;
    padding:3rem 4rem 2rem;
    margin-left: calc(30% - 4rem);
    margin-top:-10rem;
    background: #fff;
    z-index:3;
}
.aProposTitle h1 {
    font-family: var(--font1);
    font-size:4rem;
}
.aProposTitle h2 {
    font-size:1.7rem;
    font-weight: 400;
}
.aProposTop .secondaryImage {
    position:absolute;
    width:35%;
    margin-top:-5rem;
    right:0;
    z-index: 1;
}

.bambooImage {
    position:relative;
    right: 0;
    pointer-events: none;
    z-index: -1;
}
.bambooImage img {
    position:absolute;
    bottom:-40vh;
    right:-22.5%;
    width:45%;
    max-width: none;
}

@media screen and (max-width: 1080px) {
    .aProposTop {
        display:grid;
        grid-template-areas: 
            "imgL imgR"
            "titl titl";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    .aProposTop .mainImage {width: auto; grid-area: imgL;}
    .aProposTop .secondaryImage {width: auto; position: static;grid-area: imgR;margin-top: 0;}
    .aProposTop .mainImage img, 
    .aProposTop .secondaryImage img {width: 100%; height: 100%; object-fit: cover;object-position: center;}
    .aProposTitle {
        position: static;
        width: auto;
        padding: 1rem var(--space-out);
        margin-left: 0;
        margin-top: 0;
        grid-area: titl;
    }

    #a-propos .txtColumn {
        max-width: 550px;
        margin-left:var(--space-out);
        margin-right:var(--space-out);
    }
}
@media screen and (max-width: 850px) {
    .bambooImage {display:none;}
}
@media screen and (max-width: 780px) {
    #a-propos .imgTxtImg {
        width: auto;
    }
}

/**************************************************************************************************/
/********* FORMAION *******************************************************************************/
/**************************************************************************************************/
.formationTitle {
    font-size:3.5rem;
    margin:5rem auto 0 32%;
    padding-left: 4rem;
}
.formation {
    position:relative;
}
.formation ul {
    position:relative;
    margin: 0 auto 2rem 32%;
    max-width: calc(650px + var(--space-out));
    padding: 4rem var(--space-out) 1rem 4rem;
    z-index:2;
}
.formation ul li {
    position:relative;
    margin-bottom:3rem;
    display:flex;
}
.formation ul li .formationYear {
    position:absolute;
    left: calc(-5.75rem - 3px);
    top:-1rem;
    width:3.5rem;
    height:3.5rem;
    border-radius:100%;
    display:flex;
    align-items: center;
    justify-content: center;
    text-align:center;
}
.formationImg {
    position:absolute;
    left:0; top:0;
    width:32%;
    height:100%;
    border-radius: 0 3rem 3rem 0;
    border: solid 6px var(--color-green);
    border-left:0;
    overflow: hidden;
    z-index:1;
}

.formationImg img {
    width:100%;
    height:100%;
    object-fit: cover;
}

@media screen and (max-width: 650px) {
    .formationTitle {
        font-size: 3.5rem;
        margin: 5rem var(--space-out) 2rem;
        padding-left: 0;
    }

    .formation ul {margin: 0 auto 2rem 20%;padding: 4rem var(--space-out) 1rem 2rem}
    .formation ul li .formationYear {left: calc(-3.75rem - 3px);}
    .formationImg {width: 20%;}
}