/* =========================================================
   SILENT LINK CARE — HEADER FINAL
   Source unique pour le header public
   ========================================================= */


/* =========================================================
   BASE
   ========================================================= */

html body header.slc-site-header {
    position: relative !important;
    z-index: 1000 !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    background: #101827 !important;
    box-shadow: none !important;
}

html body header.slc-site-header .slc-brand img {
    display: block !important;
    height: auto !important;
}

html body header.slc-site-header a.slc-desktop-client {
    text-decoration: none !important;
}


/* =========================================================
   PC — 901 PX ET PLUS
   ========================================================= */

@media (min-width: 901px) {

    /*
       3 zones réelles :
       1. logo
       2. navigation
       3. actions
    */
    html body header.slc-site-header .slc-header-inner {
        box-sizing: border-box !important;

        width: min(100% - 48px, 1600px) !important;
        min-height: 134px !important;
        margin: 0 auto !important;
        padding: 0 !important;

        display: grid !important;
        grid-template-columns:
            285px
            minmax(0, 1fr)
            165px !important;

        column-gap: 26px !important;

        align-items: center !important;
    }


    /* ---------- LOGO ---------- */

    html body header.slc-site-header .slc-brand {
        box-sizing: border-box !important;

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

        width: 285px !important;
        min-width: 285px !important;
        max-width: 285px !important;

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

    html body header.slc-site-header .slc-brand img {
        width: 255px !important;
        max-width: 255px !important;
    }


    /* ---------- HAMBURGER CACHÉ SUR PC ---------- */

    html body header.slc-site-header .slc-menu-button {
        display: none !important;
    }


    /* ---------- NAVIGATION ---------- */

    html body header.slc-site-header .slc-main-nav {
        position: static !important;

        display: flex !important;
        flex-direction: row !important;

        align-items: center !important;
        justify-content: flex-start !important;

        min-width: 0 !important;

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

        gap: 20px !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        white-space: nowrap !important;
    }

    html body header.slc-site-header .slc-main-nav > a {
        display: inline-flex !important;
        align-items: center !important;

        min-height: 0 !important;

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

        font-size: 14px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;

        white-space: nowrap !important;

        background: transparent !important;
        border: 0 !important;
    }

    html body header.slc-site-header .slc-main-nav > a::after {
        display: none !important;
    }


    /* Espace client seulement dans la colonne droite sur PC */

    html body header.slc-site-header .slc-mobile-client,
    html body header.slc-site-header .slc-mobile-order {
        display: none !important;
    }


    /* ---------- ACTIONS DROITE ---------- */

    html body header.slc-site-header .slc-header-actions {
        box-sizing: border-box !important;

        width: 165px !important;
        min-width: 165px !important;
        max-width: 165px !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: stretch !important;
        justify-content: center !important;

        gap: 7px !important;

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

        justify-self: end !important;
    }


    /* Commander et Espace client :
       exactement mêmes dimensions */

    html body header.slc-site-header
    .slc-header-actions .slc-order-button,

    html body header.slc-site-header
    .slc-header-actions .slc-desktop-client {

        box-sizing: border-box !important;

        width: 165px !important;
        min-width: 165px !important;
        max-width: 165px !important;

        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;

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

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

        font-size: 14px !important;
        line-height: 1 !important;
        font-weight: 700 !important;

        white-space: nowrap !important;

        border-radius: 11px !important;
    }

    html body header.slc-site-header
    .slc-header-actions .slc-order-icon {

        margin: 0 7px 0 0 !important;
        font-size: 16px !important;
        line-height: 1 !important;
    }

    html body header.slc-site-header
    .slc-header-actions .slc-desktop-client {

        border: 1px solid rgba(255,255,255,.28) !important;
        background: rgba(255,255,255,.025) !important;
        color: #f5f7fb !important;
    }
}


/* =========================================================
   PC PLUS ÉTROIT
   On réduit légèrement le menu avant de passer en mobile
   ========================================================= */

@media (min-width: 901px) and (max-width: 1300px) {

    html body header.slc-site-header .slc-header-inner {
        width: calc(100% - 28px) !important;

        grid-template-columns:
            240px
            minmax(0, 1fr)
            150px !important;

        column-gap: 16px !important;
    }

    html body header.slc-site-header .slc-brand {
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
    }

    html body header.slc-site-header .slc-brand img {
        width: 215px !important;
        max-width: 215px !important;
    }

    html body header.slc-site-header .slc-main-nav {
        gap: 12px !important;
    }

    html body header.slc-site-header .slc-main-nav > a {
        font-size: 12px !important;
    }

    html body header.slc-site-header .slc-header-actions {
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
    }

    html body header.slc-site-header
    .slc-header-actions .slc-order-button,

    html body header.slc-site-header
    .slc-header-actions .slc-desktop-client {

        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;

        font-size: 12px !important;
    }
}


/* =========================================================
   MOBILE — 900 PX ET MOINS
   ========================================================= */

@media (max-width: 900px) {

    html body header.slc-site-header .slc-header-inner {
        box-sizing: border-box !important;

        width: calc(100% - 22px) !important;
        min-height: 82px !important;

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

        display: grid !important;
        grid-template-columns: 1fr auto auto !important;

        align-items: center !important;
        column-gap: 10px !important;
    }


    /* ---------- LOGO ---------- */

    html body header.slc-site-header .slc-brand {
        display: flex !important;
        align-items: center !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

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

    html body header.slc-site-header .slc-brand img {
        width: 180px !important;
        max-width: 100% !important;
    }


    /* ---------- HAMBURGER ---------- */

    html body header.slc-site-header .slc-menu-button {
        display: inline-flex !important;

        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;

        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;

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

        align-items: center !important;
        justify-content: center !important;
    }


    /* ---------- WRAPPER ACTIONS ---------- */

    html body header.slc-site-header .slc-header-actions {
        display: contents !important;
    }

    html body header.slc-site-header .slc-desktop-client {
        display: none !important;
    }


    /* ---------- PANIER ---------- */

    html body header.slc-site-header .slc-order-button {
        display: inline-flex !important;

        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;

        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;

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

        align-items: center !important;
        justify-content: center !important;

        font-size: 0 !important;
        border-radius: 12px !important;
    }

    html body header.slc-site-header .slc-order-icon {
        margin: 0 !important;
        font-size: 20px !important;
        line-height: 1 !important;
    }


    /* ---------- MENU DÉROULANT ---------- */

    html body header.slc-site-header .slc-main-nav {
        display: none !important;

        position: absolute !important;

        top: calc(100% + 8px) !important;
        left: 11px !important;
        right: 11px !important;

        margin: 0 !important;
        padding: 12px !important;

        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;

        gap: 2px !important;

        background: #101827 !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        border-radius: 16px !important;

        box-shadow: 0 20px 45px rgba(0,0,0,.35) !important;
    }

    html body header.slc-site-header .slc-main-nav.slc-open {
        display: flex !important;
    }

    html body header.slc-site-header .slc-main-nav > a {
        display: flex !important;

        min-height: 46px !important;

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

        align-items: center !important;
        justify-content: flex-start !important;

        font-size: 16px !important;
        font-weight: 700 !important;

        white-space: nowrap !important;

        border-radius: 9px !important;
    }

    html body header.slc-site-header .slc-main-nav > a::after {
        display: none !important;
    }

    html body header.slc-site-header .slc-mobile-client {
        display: flex !important;
    }

    html body header.slc-site-header .slc-mobile-order {
        display: flex !important;

        margin-top: 6px !important;

        justify-content: center !important;

        color: #fff !important;
        background: linear-gradient(135deg,#119fd1,#087fc0) !important;

        border-radius: 10px !important;
    }
}

/* =========================================================
   PC — TRAIT VERT SOUS LES LIENS DU MENU
   ========================================================= */

@media (min-width: 901px) {

    html body header.slc-site-header .slc-main-nav > a {
        position: relative !important;
    }

    html body header.slc-site-header .slc-main-nav > a::after {
        content: "" !important;

        position: absolute !important;
        left: 50% !important;
        bottom: -8px !important;

        width: 0 !important;
        height: 2px !important;

        background: #23e6c8 !important;

        transform: translateX(-50%) !important;
        transition: width .22s ease !important;

        display: block !important;
        border-radius: 999px !important;
    }

    html body header.slc-site-header .slc-main-nav > a:hover::after,
    html body header.slc-site-header .slc-main-nav > a:focus-visible::after {
        width: 100% !important;
    }
}


/* =========================================================
   PC — ESPACE CLIENT UNIQUEMENT DANS LE BOUTON DE DROITE
   ========================================================= */

@media (min-width: 901px) {

    html body header.slc-site-header
    nav.slc-main-nav a.slc-mobile-client {
        display: none !important;
    }

    html body header.slc-site-header
    .slc-header-actions a.slc-desktop-client {
        display: flex !important;
    }
}


/* =========================================================
   PC — ESPACE CLIENT DANS LE MENU
   Masque uniquement le bouton sous Commander
   ========================================================= */

@media (min-width: 901px) {

    /* Espace client visible dans le menu horizontal */
    html body header.slc-site-header
    nav.slc-main-nav a.slc-mobile-client {
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Supprime Espace client sous Commander */
    html body header.slc-site-header
    .slc-header-actions a.slc-desktop-client {
        display: none !important;
    }
}


/* =========================================================
   PC — RAPPROCHE COMMANDER DU MENU
   Espace client reste dans le menu
   ========================================================= */

@media (min-width: 1301px) {

    html body header.slc-site-header .slc-header-inner {
        grid-template-columns:
            285px
            max-content
            165px !important;

        column-gap: 26px !important;
        justify-content: start !important;
    }

    html body header.slc-site-header .slc-header-actions {
        justify-self: start !important;
        margin-left: 0 !important;
    }
}

/* PC intermédiaire */
@media (min-width: 901px) and (max-width: 1300px) {

    html body header.slc-site-header .slc-header-inner {
        grid-template-columns:
            240px
            max-content
            150px !important;

        column-gap: 16px !important;
        justify-content: start !important;
    }

    html body header.slc-site-header .slc-header-actions {
        justify-self: start !important;
        margin-left: 0 !important;
    }
}