/**
 * @version 3.0.0
 * @author Arnaud BERNARD <arnaud@pixelorigine.com>
 * @copyright 2020-2026 Arnaud BERNARD - Pixelorigine. Tous droits réservés.
 */


/**
 * =============================================================================
 * Image Background page header (image Hero)
 * 
 * NB : Styles est presque identiques sur mobile et ordinateur
 * =============================================================================
 */
.page-header__background {
    align-content: flex-end;
    padding-bottom: 60px;
    height: 350px;
    background-color: white;
    background-repeat: no-repeat;
    background-size: cover;
}

.page-header__background--none {
    position: relative;
    height: 220px;
    background-image: linear-gradient(to bottom, #006eeb 20%, #fff500);
}

.page-header__background--none:before {
    content: '';
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(/public/img/header-none.svg);
    background-repeat: repeat-x;
    background-position: 0 85%;
    background-size: 160px;
    opacity: 0.1;
}


/**
 * Background page header PROFESSIONNELS
 * -------------------------------------
 */
.page-header__background--professionnels {
    background-image: url(/public/img/header-pro/small@2x.jpg);
    background-image: image-set(url(/public/img/header-pro/small@2x.webp) 2x,
            url(/public/img/header-pro/small@3x.webp) 3x,
            url(/public/img/header-pro/small@4x.webp) 4x);
}

@media (min-width: 600px) {
    .page-header__background--professionnels {
        background-image: url(/public/img/header-pro/medium@2x.jpg);
        background-image: image-set(url(/public/img/header-pro/medium@2x.webp) 2x);
    }
}

@media (min-width: 1330px) {
    .page-header__background--professionnels {
        height: 440px;
        background-image: url(/public/img/header-pro/large@1360w.jpg);
        background-image: image-set(url(/public/img/header-pro/large@1360w.webp));
    }
}

@media (min-width: 1550px) {
    .page-header__background--professionnels {
        background-image: url(/public/img/header-pro/large@1600w.jpg);
        background-image: image-set(url(/public/img/header-pro/large@1600w.webp));
    }
}

@media (min-width: 1900px) {
    .page-header__background--professionnels {
        background-image: url(/public/img/header-pro/large@1900w.jpg);
        background-image: image-set(url(/public/img/header-pro/large@1900w.webp),
                url(/public/img/header-pro/large@1900w@2x.webp) 2x);
    }
}

@media (min-width: 2500px) {
    .page-header__background--professionnels {
        background-image: url(/public/img/header-pro/large@2500w.jpg);
        background-image: image-set(url(/public/img/header-pro/large@2500w.webp));
    }
}


/**
 * Background page header PARTICULIERS
 * -----------------------------------
 */
.page-header__background--particuliers {
    background-image: url(/public/img/header-particuliers/small@2x.jpg);
    background-image: image-set(url(/public/img/header-particuliers/small@2x.webp) 2x,
            url(/public/img/header-particuliers/small@3x.webp) 3x,
            url(/public/img/header-particuliers/small@4x.webp) 4x);
}

@media (min-width: 600px) {
    .page-header__background--particuliers {
        background-image: url(/public/img/header-particuliers/medium@2x.jpg);
        background-image: image-set(url(/public/img/header-particuliers/medium@2x.webp) 2x);
    }
}

@media (min-width: 1330px) {
    .page-header__background--particuliers {
        height: 440px;
        background-image: url(/public/img/header-particuliers/large@1360w.jpg);
        background-image: image-set(url(/public/img/header-particuliers/large@1360w.webp));
    }
}

@media (min-width: 1550px) {
    .page-header__background--particuliers {
        background-image: url(/public/img/header-particuliers/large@1600w.jpg);
        background-image: image-set(url(/public/img/header-particuliers/large@1600w.webp));
    }
}

@media (min-width: 1900px) {
    .page-header__background--particuliers {
        background-image: url(/public/img/header-particuliers/large@1900w.jpg);
        background-image: image-set(url(/public/img/header-particuliers/large@1900w.webp),
                url(/public/img/header-particuliers/large@1900w@2x.webp) 2x);
    }
}

@media (min-width: 2500px) {
    .page-header__background--particuliers {
        background-image: url(/public/img/header-particuliers/large@2500w.jpg);
        background-image: image-set(url(/public/img/header-particuliers/large@2500w.webp));
    }
}


/**
 * Background page header SUPPORT
 * Background page header SUPPORT Zimbra
 * -------------------------------------
 */
.page-header__background--support {
    background-image: url(/public/img/header-support/small@2x.jpg);
    background-image: image-set(url(/public/img/header-support/small@2x.webp) 2x,
            url(/public/img/header-support/small@3x.webp) 3x,
            url(/public/img/header-support/small@4x.webp) 4x);
}

@media (min-width: 600px) {
    .page-header__background--support {
        background-image: url(/public/img/header-support/medium@2x.jpg);
        background-image: image-set(url(/public/img/header-support/medium@2x.webp) 2x);
    }
}

@media (min-width: 1330px) {
    .page-header__background--support {
        height: 440px;
        background-image: url(/public/img/header-support/large@1360w.jpg);
        background-image: image-set(url(/public/img/header-support/large@1360w.webp));
    }
}

@media (min-width: 1550px) {
    .page-header__background--support {
        background-image: url(/public/img/header-support/large@1600w.jpg);
        background-image: image-set(url(/public/img/header-support/large@1600w.webp));
    }
}

@media (min-width: 1900px) {
    .page-header__background--support {
        background-image: url(/public/img/header-support/large@1900w.jpg);
        background-image: image-set(url(/public/img/header-support/large@1900w.webp),
                url(/public/img/header-support/large@1900w@2x.webp) 2x);
    }
}

@media (min-width: 2500px) {
    .page-header__background--support {
        background-image: url(/public/img/header-support/large@2500w.jpg);
        background-image: image-set(url(/public/img/header-support/large@2500w.webp));
    }
}


/**
 * Background page header SUPPORT My e-securemail (only)
 * -----------------------------------------------------
 */
.page-header__background--support-myesm {
    background-image: url(/public/img/header-support-myesm/small@2x.jpg);
    background-image: image-set(url(/public/img/header-support-myesm/small@2x.webp) 2x,
            url(/public/img/header-support-myesm/small@3x.webp) 3x,
            url(/public/img/header-support-myesm/small@4x.webp) 4x);
}

@media (min-width: 600px) {
    .page-header__background--support-myesm {
        background-image: url(/public/img/header-support-myesm/medium@2x.jpg);
        background-image: image-set(url(/public/img/header-support-myesm/medium@2x.webp) 2x);
    }
}

@media (min-width: 1330px) {
    .page-header__background--support-myesm {
        height: 440px;
        background-image: url(/public/img/header-support-myesm/large@1360w.jpg);
        background-image: image-set(url(/public/img/header-support-myesm/large@1360w.webp));
    }
}

@media (min-width: 1550px) {
    .page-header__background--support-myesm {
        background-image: url(/public/img/header-support-myesm/large@1600w.jpg);
        background-image: image-set(url(/public/img/header-support-myesm/large@1600w.webp));
    }
}

@media (min-width: 1900px) {
    .page-header__background--support-myesm {
        background-image: url(/public/img/header-support-myesm/large@1900w.jpg);
        background-image: image-set(url(/public/img/header-support-myesm/large@1900w.webp),
                url(/public/img/header-support-myesm/large@1900w@2x.webp) 2x);
    }
}

@media (min-width: 2500px) {
    .page-header__background--support-myesm {
        background-image: url(/public/img/header-support-myesm/large@2500w.jpg);
        background-image: image-set(url(/public/img/header-support-myesm/large@2500w.webp));
    }
}


/**
 * Background page header CONTACT
 * ------------------------------
 */
.page-header__background--contact {
    background-image: url(/public/img/header-contact/small@2x.jpg);
    background-image: image-set(url(/public/img/header-contact/small@2x.webp) 2x,
            url(/public/img/header-contact/small@3x.webp) 3x,
            url(/public/img/header-contact/small@4x.webp) 4x);
}

@media (min-width: 600px) {
    .page-header__background--contact {
        background-image: url(/public/img/header-contact/medium@2x.jpg);
        background-image: image-set(url(/public/img/header-contact/medium@2x.webp) 2x);
    }
}

@media (min-width: 1330px) {
    .page-header__background--contact {
        height: 440px;
        background-image: url(/public/img/header-contact/large@1360w.jpg);
        background-image: image-set(url(/public/img/header-contact/large@1360w.webp));
    }
}

@media (min-width: 1550px) {
    .page-header__background--contact {
        background-image: url(/public/img/header-contact/large@1600w.jpg);
        background-image: image-set(url(/public/img/header-contact/large@1600w.webp));
    }
}

@media (min-width: 1900px) {
    .page-header__background--contact {
        background-image: url(/public/img/header-contact/large@1900w.jpg);
        background-image: image-set(url(/public/img/header-contact/large@1900w.webp), url(/public/img/header-contact/large@1900w@2x.webp) 2x);
    }
}

@media (min-width: 2500px) {
    .page-header__background--contact {
        background-image: url(/public/img/header-contact/large@2500w.jpg);
        background-image: image-set(url(/public/img/header-contact/large@2500w.webp));
    }
}