/* COLONIAL CLUB — correction entête responsive V1.6.1 */

/* Desktop : conserver la couverture Facebook comme texture de marque,
   sans laisser les lettres géantes concurrencer la navigation. */
.site-header {
    min-height: 108px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    background-color: #0d0d0d !important;
    background-image:
        linear-gradient(
            90deg,
            rgba(13, 13, 13, .90) 0%,
            rgba(13, 13, 13, .72) 26%,
            rgba(13, 13, 13, .50) 54%,
            rgba(13, 13, 13, .28) 78%,
            rgba(13, 13, 13, .42) 100%
        ),
        url("branding/colonial-cover-master.png") !important;
    background-size: cover !important;
    background-position: 82% 30% !important;
    background-repeat: no-repeat !important;
}

.site-header .brand {
    flex: 0 0 auto;
    background: rgba(13, 13, 13, .78) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .20);
}

.site-header .main-navigation {
    background: rgba(13, 13, 13, .78) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .16);
}

.site-header .main-navigation a,
.site-header .navigation-button,
.site-header .brand-copy strong,
.site-header .brand-copy small {
    text-shadow: 0 2px 5px rgba(0, 0, 0, .92) !important;
}

/* Tablette */
@media (max-width: 1100px) {
    .site-header {
        background-position: 86% 30% !important;
    }

    .site-header .main-navigation {
        background: rgba(13, 13, 13, .86) !important;
    }
}

/* Mobile : la couverture reste l'image de l'entête, mais la navigation
   devient un bandeau noir distinct pour rester courte et lisible. */
@media (max-width: 760px) {
    .site-header {
        min-height: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        background-color: #0d0d0d !important;
        background-image:
            linear-gradient(
                90deg,
                rgba(13, 13, 13, .78) 0%,
                rgba(13, 13, 13, .48) 48%,
                rgba(13, 13, 13, .22) 100%
            ),
            url("branding/colonial-cover-master.png") !important;
        background-size: auto 150px !important;
        background-position: 76% top !important;
        background-repeat: no-repeat !important;
    }

    .site-header .brand {
        min-height: 116px !important;
        margin: 0 !important;
        padding: 14px 18px !important;
        border-radius: 0 !important;
        background: linear-gradient(
            90deg,
            rgba(13, 13, 13, .92) 0%,
            rgba(13, 13, 13, .70) 58%,
            rgba(13, 13, 13, .22) 100%
        ) !important;
        box-shadow: none !important;
        display: flex !important;
        align-items: center !important;
    }

    .site-header .brand-logo {
        width: 72px !important;
        height: 72px !important;
        flex: 0 0 72px !important;
    }

    .site-header .brand-copy strong {
        font-size: 1.18rem !important;
    }

    .site-header .brand-copy small {
        font-size: .88rem !important;
    }

    .site-header .main-navigation {
        margin: 0 !important;
        padding: 10px 12px 12px !important;
        border-radius: 0 !important;
        background: rgba(13, 13, 13, .97) !important;
        box-shadow: none !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px 8px !important;
    }

    .site-header .main-navigation a,
    .site-header .navigation-button {
        font-size: .93rem !important;
        line-height: 1.1 !important;
        padding: 8px 10px !important;
        white-space: nowrap !important;
    }

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

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

/* Petit mobile : menu encore plus compact, sans effet de zoom. */
@media (max-width: 430px) {
    .site-header {
        background-size: auto 132px !important;
        background-position: 79% top !important;
    }

    .site-header .brand {
        min-height: 104px !important;
        padding: 12px 14px !important;
    }

    .site-header .brand-logo {
        width: 64px !important;
        height: 64px !important;
        flex-basis: 64px !important;
    }

    .site-header .main-navigation {
        padding: 8px 8px 10px !important;
        gap: 5px 6px !important;
    }

    .site-header .main-navigation a,
    .site-header .navigation-button {
        font-size: .86rem !important;
        padding: 7px 8px !important;
    }
}