.main-header {
    color: #252525;
    line-height: 70px;
    background: none;
    height: auto;
}

.main-header__content {
    height: 70px;
    background-color: #f7f7f7;
    box-shadow: 0px 0px 10px 0px #7e7e7e;
}

.main-header__grid {
    height: 100%;
}

.header-container {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    /* mobile */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row-reverse;
    -ms-flex-flow: row-reverse;
    flex-flow: row-reverse;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    /**/
}

@media (min-width: 768px) {
    .main-header {
        position: absolute;
        left: 0;
        right: 0;
        z-index: 11;
        line-height: inherit;
    }

    body.sub-menu-open #main-header {
        top: 0;
        bottom: 0;
    }

    .main-header__content {
        height: 84px;
        background-color: rgba(255, 255, 255, .87);
        box-shadow: none;
    }

    .main-header__background {
        content: '';
        position: absolute;
        top: 84px;
        left: 0;
        right: 0;
        z-index: -1;
        height: 85px;
        background-color: rgba(255, 255, 255, .87);
        transform-origin: 0 0; /* Définit l'encrange du transform en haut à gauche*/
        transform: skewX(93deg); /*incline le bloc sur l'axe X de 93deg */
    }

    .header-container {
        -webkit-flex-flow: column;
        -ms-flex-flow: column;
        flex-flow: column;
        margin-left: 44px;
    }

    .row-header--top {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        height: 36px;
    }
}

@media (min-width: 1280px) {
    .main-header {
        line-height: 60px;
    }

    .main-header__background {
        transform: skewX(92deg);
    }
}

@media (min-width: 1400px) {
    .main-header {
        line-height: 70px;
    }
}
