/**
 * ================================================
 * Header
 * ================================================
 */

.header {
    background: var(--secondary-gris-perle) url('/profiles/fabernovel/themes/custom/datasyndex/img/header-bg.png') repeat-x bottom center;
}

.header.header--with-teaser {
    background: var(--secondary-gris-perle);
}

.header__container {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 40px;
    padding: 48px 0;
}
.header--avec-visuel .header__container{
    padding-bottom: calc(200px + 40px);
}

@media screen and (min-width: 1280px) {
    .header__container {
        padding: 0;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
    }

    .header--avec-visuel .header__container{
        padding-bottom: calc(200px - 24px);
    }
}

.header--fullwidth .header__container {
    justify-content: center;
}
.page--type-expertises .header--fullwidth .header__container {
    justify-content: flex-start;
}

.header__main,
.header__main__heading,
.header__main__title {
    display: flex;
    flex-direction: column;
}

.header--layout-term .header__main__heading {
    flex-direction: column;
    gap: 32px;
}
@media screen and (min-width: 1280px) {
    .header--layout-term .header__main__heading {
        flex-direction: row;
        gap: 32px;
    }

    .header--layout-term .header__main__title {
        flex: 0 0 calc(50% - 16px);
    }
}

.header__main {
    align-items: center;
    text-align: center;
}

.header--with-teaser .header__main,
.page--vos-questions .header__main,
.page--type-expertises .header__main {
    align-items: flex-start;
    text-align: left;
}

.header__main {
    gap: 24px;
}

@media screen and (min-width: 1280px) {
    .header__main {
        gap: 32px;
        align-items: flex-start;
        text-align: left;
    }
}

.header__main__heading,
.header__main__title {
    gap: 16px;
}

@media screen and (min-width: 1280px) {
    .header__main__heading {
        gap: 24px;
    }
    .header--with-teaser .header__main__heading {
        gap: 16px;
    }

}

.header__teaser {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media screen and (min-width: 1280px) {
    .header__main {
        max-width: 731px;
        padding: 90px 0;
    }

    .header--layout-default.header--fullwidth .header__main {
        max-width: 731px;
        margin: 0 auto;
        align-items: center;
        text-align: center;
        gap: 32px;
    }
    .header--layout-article.header--fullwidth .header__main {
        text-align: center;
        padding: 60px 0 56px;
    }
    .header--fullwidth .header__main {
        max-width: 1060px;
        align-items: center;
    }
    .header--layout-term.header--fullwidth .header__main {
        max-width: 100%;
    }
    .header__teaser {
        gap: 16px;
        width: 405px;
        padding: 90px 0;
    } 
}

.header__illustration img {
    display: block;
}

.header__teaser__title {
    font-size: 16px;
    color: var(--primary-noir);
}


.block-title span,
.header .page-title span {
    background: var(--primary-rouge-framboise);
    padding: 2px 10px 4px;
    color: var(--primary-blanc);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.header.header--layout-article .page-title span {
    background: transparent;
    padding: 0;
    color: var(--primary-noir);
}

.header.header--layout-article .page-title {
    text-transform: none;
}

.header__text {
    font-size: 16px;
    /* font-weight: 600;*/
    line-height: 150%;
}

@media screen and (min-width: 1280px) {
    .header__text {
        font-size: 18px;
    }
}

@media screen and (min-width: 1280px) {
    .page--type-expertises .header--layout-default.header--fullwidth {
        justify-content: flex-start;
    }
    .page--type-expertises .header--layout-default.header--fullwidth .header__main {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        max-width: 100%;
        width: 100%;
        text-align: left;
        margin: 0 0;
    }
    .page--type-expertises .header--layout-default.header--fullwidth .header__main > * {
        flex: 0 0 calc(50% - 16px);
    }
}