.app {
    margin-top: -15%;
    height: 800px;
    background-image: url(../../proto/svg/approche.svg);
    background-repeat: no-repeat;
    background-position: 80% 100%;
    background-size: 80% 100%;
}


@media screen and (max-width: 767px) {

    .besoins {
        max-width: 90%;
        padding-left: 50px;
        background-image: none;
    }

    .app {
        background-image: none;
        max-height: 200px;
    }
    .reflexion {
        padding-top: 70px;
    }

    li {
        font-size: 0.8em;
    }

}

@media (min-width: 768px) and (max-width: 991px) {
    .reflexion {
        top: 10%;
    }

    .invention {
        margin-top: -30%;
        left: 20.5%;
    }

    .conceptualisation {
        margin-top: -30%;
        right: 5.5%;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .reflexion {
        top: 18%;
    }

    .invention {
        margin-top: -15%;
        left: 20.5%;
    }

    .conceptualisation {
        margin-top: -15%;
        right: 5.5%;
    }

    .reflexion {
        position: relative;
        left: 25%;
    }

    .invention {
        position: relative;
        float: left;
    }

    .conceptualisation {
        width: 50%;
        position: relative;
        text-align: right;
        float: right;
        direction: rtl;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .reflexion {
        top: 16%;
    }

    .invention {
        margin-top: -10%;
        left: 20.5%;
    }

    .conceptualisation {
        margin-top: -10%;
        right: 5.5%;
    }

    .reflexion {
        position: relative;
        left: 25%;
    }

    .invention {
        position: relative;
        float: left;
    }

    .conceptualisation {
        width: 50%;
        position: relative;
        text-align: right;
        float: right;
        direction: rtl;
    }
}

@media (min-width: 1400px) {
    .reflexion {
        top: 10%;
    }

    .invention {
        margin-top: -5%;
        left: 20.5%;
    }

    .conceptualisation {
        margin-top: -5%;
        right: 5.5%;
    }

    .reflexion {
        position: relative;
        left: 25%;
    }

    .invention {
        position: relative;
        float: left;
    }

    .conceptualisation {
        width: 50%;
        position: relative;
        text-align: right;
        float: right;
        direction: rtl;
    }
}