/* COLONIAL CLUB — entête recomposé V1.6.2 */

/*
 * Le bandeau colonial-site-strip-v162.png est construit à partir
 * de la couverture Facebook officielle, mais dans un ratio
 * réellement adapté à une barre d'entête web.
 */

.site-header {
    position: relative !important;
    box-sizing: border-box !important;

    min-height: 0 !important;
    height: clamp(
        150px,
        13.39vw,
        220px
    ) !important;

    padding: 0 !important;
    margin: 0 !important;

    display: block !important;

    background-color: #0d0d0d !important;
    background-image:
        url(
            "branding/colonial-site-strip-v162.png"
        ) !important;
    background-repeat: no-repeat !important;
    background-position:
        center top !important;
    background-size:
        100% auto !important;

    border-bottom:
        5px solid #f7941d !important;

    box-shadow:
        0 7px 22px
        rgba(0, 0, 0, .18) !important;

    overflow: visible !important;
}

/*
 * Le logo + nom sont déjà présents dans le bandeau.
 * On supprime donc le doublon HTML.
 */
.site-header > .brand {
    display: none !important;
}

.site-header .main-navigation {
    position: absolute !important;

    right: 24px !important;
    bottom: 15px !important;

    width: auto !important;
    max-width:
        calc(100% - 48px) !important;

    margin: 0 !important;
    padding:
        8px 10px !important;

    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 5px 6px !important;

    border-radius:
        14px !important;

    background:
        rgba(
            13,
            13,
            13,
            .88
        ) !important;

    box-shadow:
        0 5px 18px
        rgba(0, 0, 0, .28) !important;

    backdrop-filter:
        blur(3px) !important;
}

.site-header .main-navigation a,
.site-header .navigation-button {
    padding:
        8px 10px !important;

    font-size:
        .95rem !important;

    line-height:
        1.1 !important;

    white-space:
        nowrap !important;

    text-shadow:
        0 2px 4px
        rgba(0, 0, 0, .9) !important;
}

.site-header .navigation-action {
    padding:
        9px 13px !important;
}

.site-header .inline-form {
    margin: 0 !important;
}

/* Tablette */
@media (max-width: 1100px) {
    .site-header {
        height:
            clamp(
                138px,
                13.39vw,
                170px
            ) !important;
    }

    .site-header .main-navigation {
        right: 12px !important;
        bottom: 10px !important;

        max-width:
            calc(100% - 24px) !important;
    }

    .site-header .main-navigation a,
    .site-header .navigation-button {
        font-size:
            .88rem !important;

        padding:
            7px 8px !important;
    }
}

/*
 * Mobile :
 * - bandeau officiel affiché en entier en largeur ;
 * - aucune superposition du menu sur l'image ;
 * - navigation noire juste en dessous.
 */
@media (max-width: 760px) {
    .site-header {
        height: auto !important;

        padding-top:
            13.39vw !important;

        background-size:
            100% auto !important;

        background-position:
            center top !important;

        border-bottom:
            4px solid #f7941d !important;

        box-shadow: none !important;
    }

    .site-header .main-navigation {
        position: static !important;

        width: 100% !important;
        max-width: none !important;

        box-sizing:
            border-box !important;

        margin: 0 !important;

        padding:
            9px 10px 10px !important;

        border-radius:
            0 !important;

        display: flex !important;
        flex-wrap: wrap !important;
        justify-content:
            flex-start !important;

        gap:
            4px 5px !important;

        background:
            #0d0d0d !important;

        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    .site-header .main-navigation a,
    .site-header .navigation-button {
        padding:
            7px 8px !important;

        font-size:
            .86rem !important;

        line-height:
            1.05 !important;
    }

    .site-header .navigation-action {
        padding:
            8px 11px !important;
    }
}

@media (max-width: 430px) {
    .site-header .main-navigation {
        padding:
            7px 7px 9px !important;

        gap:
            3px 4px !important;
    }

    .site-header .main-navigation a,
    .site-header .navigation-button {
        padding:
            6px 7px !important;

        font-size:
            .81rem !important;
    }
}