/* =========================================
   MENU PRINCIPAL REFERENCE
========================================= */

.menu-reference-somouest-wrap{
    background:#eef3f9;
    border-top:1px solid rgba(9,42,94,.08);
    border-bottom:1px solid rgba(9,42,94,.08);
    box-shadow:none;
}

.menu-reference-somouest-inner{
    padding:0 16px;
}

.menu-reference-somouest-toggle{
    min-height:64px;
    padding:0;
    background:#eef3f9;
}

.menu-reference-somouest-toggle-picto{
    width:22px;
    height:22px;
    flex:0 0 22px;
}

.menu-reference-somouest-toggle-picto img{
    max-width:22px;
    max-height:22px;
}

.menu-reference-somouest-toggle-title{
    color:#163c7a;
    font-size:18px;
    font-weight:700;
    line-height:1.1;
    letter-spacing:0;
}

.menu-reference-somouest-burger{
    width:38px;
    height:38px;
    flex:0 0 38px;
    border-radius:12px;
    background:#dce8f7;
    color:#163c7a;
    box-shadow:inset 0 0 0 1px rgba(22,60,122,.10);
}

.menu-reference-somouest-burger svg{
    width:18px;
    height:18px;
}

.menu-reference-somouest-list{
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 0;
    background:#eef3f9;
}

.menu-reference-somouest-list li{
    display:block;
    flex:0 0 auto;
}

.menu-reference-somouest-list li.menu-reference-somouest-item-ensembles{
    margin-left:auto;
}

.menu-reference-somouest-list a{
    gap:10px;
    min-height:44px;
    padding:0 18px;
    border-radius:14px;
    color:#173a76;
    font-size:16px;
    font-weight:700;
    letter-spacing:0;
}

.menu-reference-somouest-list a:hover{
    background:#e1ebf8;
    border-color:rgba(23,58,118,.10);
    color:#173a76;
    box-shadow:0 8px 18px rgba(16,42,91,.07);
}

.menu-reference-somouest-list a.menu-reference-somouest-selemenu{
    border-color:rgba(23,58,118,.16);
    box-shadow:
        0 8px 18px rgba(16,42,91,.08),
        inset 0 0 0 1px rgba(23,58,118,.03);
}

.menu-reference-somouest-icon{
    width:22px;
    height:22px;
    flex:0 0 22px;
}

.menu-reference-somouest-icon img{
    max-width:22px;
    max-height:22px;
}

/* ===== BOUTON MATCHING ===== */

.menu-reference-somouest-ensembles-link{
    background:#163c7a !important;
    color:#ffffff !important;
    border-color:#163c7a !important;
    box-shadow:0 10px 22px rgba(12,36,81,.18) !important;
}

.menu-reference-somouest-ensembles-link:hover{
    background:#1b468d !important;
    color:#ffffff !important;
    border-color:#1b468d !important;
    box-shadow:0 12px 24px rgba(12,36,81,.22) !important;
}

.menu-reference-somouest-ensembles-link.menu-reference-somouest-selemenu{
    background:#163c7a !important;
    color:#ffffff !important;
    border-color:#163c7a !important;
    box-shadow:
        0 16px 34px rgba(12,36,81,.32),
        inset 0 0 0 2px rgba(255,255,255,.25) !important;
    position:relative;
}

.menu-reference-somouest-ensembles-link.menu-reference-somouest-selemenu::after{
    content:"";
    width:8px;
    height:8px;
    margin-left:10px;
    border-radius:50%;
    background:#ffffff;
    box-shadow:0 0 0 3px rgba(255,255,255,.18);
    flex:0 0 8px;
}

.menu-reference-somouest-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 9px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    color:#ffffff;
    font-size:11px;
    font-weight:800;
    line-height:1;
    letter-spacing:.02em;
    text-transform:uppercase;
}

@media (max-width: 1220px){
    .menu-reference-somouest-list{
        gap:8px;
    }

    .menu-reference-somouest-list a{
        padding:0 14px;
        font-size:15px;
    }
}

@media (max-width: 980px){
    .menu-reference-somouest-inner{
        padding:0 16px;
        overflow:visible;
    }

    .menu-reference-somouest-toggle{
        display:flex;
    }

    /* IMPORTANT:
       sur mobile, les menus s'ouvrent dans le flux normal
       pour éviter toute superposition entre menu origine
       et sous-menu modèles */
    .menu-reference-somouest-list{
        display:none;
        position:static;
        width:calc(100% + 32px);
        margin:0 -16px;
        padding:0 0 12px 0;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        overflow:visible;
        background:#eef3f9;
        border-top:1px solid rgba(9,42,94,.08);
        box-shadow:none;
    }

    #menu-reference-somouest-check:checked ~ .menu-reference-somouest-list{
        display:flex;
    }

    #menu-reference-somouest-check-modeles-tetes:checked ~ .menu-reference-somouest-list{
        display:flex;
    }

    #menu-reference-somouest-check:checked ~ .menu-reference-somouest-toggle .menu-reference-somouest-burger{
        background:#163c7a;
        color:#ffffff;
    }

    #menu-reference-somouest-check-modeles-tetes:checked ~ .menu-reference-somouest-toggle .menu-reference-somouest-burger{
        background:#163c7a;
        color:#ffffff;
    }

    .menu-reference-somouest-list li{
        width:100%;
        flex:0 0 auto;
    }

    .menu-reference-somouest-list li.menu-reference-somouest-item-ensembles{
        margin-left:0;
    }

    .menu-reference-somouest-list a{
        display:flex;
        justify-content:flex-start;
        width:100%;
        min-height:56px;
        margin:0;
        padding:0 20px;
        border:0;
        border-bottom:1px solid rgba(9,42,94,.08);
        border-radius:0;
        background:#eef3f9;
        color:#173a76;
        box-shadow:none;
        font-size:16px;
        font-weight:700;
        line-height:1.1;
        white-space:normal;
        transform:none;
    }

    .menu-reference-somouest-list a:hover{
        background:#e2ebf7;
        border-color:rgba(9,42,94,.08);
        box-shadow:none;
        transform:none;
    }

    .menu-reference-somouest-list a.menu-reference-somouest-selemenu{
        background:#ffffff;
        color:#173a76;
        box-shadow:none;
        border-color:rgba(9,42,94,.08);
    }

    .menu-reference-somouest-ensembles-link{
        background:#163c7a !important;
        color:#ffffff !important;
        border-color:rgba(9,42,94,.08) !important;
        box-shadow:none !important;
    }

    .menu-reference-somouest-ensembles-link:hover{
        background:#1b468d !important;
        color:#ffffff !important;
        box-shadow:none !important;
        transform:none !important;
    }

    .menu-reference-somouest-ensembles-link.menu-reference-somouest-selemenu{
        box-shadow:inset 0 0 0 2px rgba(255,255,255,.25) !important;
    }

    .menu-reference-somouest-ensembles-link.menu-reference-somouest-selemenu::after{
        margin-left:auto;
    }

    .menu-reference-somouest-pill{
        background:rgba(255,255,255,.18);
    }

    /* ===== SOUS-MENU MODELES TETES ===== */

    .menu-reference-somouest-wrap--modele-tetes{
        width:100% !important;
        margin:0 !important;
        position:relative !important;
        overflow:visible !important;
    }

    .menu-reference-somouest-wrap--modele-tetes .menu-reference-somouest-inner{
        width:100% !important;
        margin:0 !important;
        padding:0 16px !important;
        overflow:visible !important;
    }

    .menu-reference-somouest-wrap--modele-tetes .menu-reference-somouest-toggle{
        display:flex !important;
    }

    .menu-reference-somouest-wrap--modele-tetes .menu-reference-somouest-toggle-left{
        gap:0 !important;
    }

    .menu-reference-somouest-wrap--modele-tetes .menu-reference-somouest-toggle-picto{
        display:none !important;
    }

    .menu-reference-somouest-wrap--modele-tetes .menu-reference-somouest-list{
        display:none;
        position:static !important;
        width:calc(100% + 32px) !important;
        margin:0 -16px !important;
        padding:0 0 12px 0 !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:0 !important;
        overflow:visible !important;
        background:#eef3f9 !important;
        border-top:1px solid rgba(9,42,94,.08) !important;
        box-shadow:none !important;
    }

    .menu-reference-somouest-wrap--modele-tetes .menu-reference-somouest-list li{
        width:100% !important;
        flex:0 0 100% !important;
    }

    .menu-reference-somouest-wrap--modele-tetes .menu-reference-somouest-list a{
        display:flex !important;
        width:100% !important;
        min-width:100% !important;
        max-width:100% !important;
        justify-content:flex-start !important;
        align-items:center !important;
        min-height:56px !important;
        margin:0 !important;
        padding:0 28px !important;
        border:0 !important;
        border-bottom:1px solid rgba(9,42,94,.08) !important;
        border-radius:0 !important;
        background:#eef3f9 !important;
        color:#173a76 !important;
        box-shadow:none !important;
        font-size:16px !important;
        font-weight:700 !important;
        line-height:1.1 !important;
        white-space:normal !important;
        transform:none !important;
    }

    .menu-reference-somouest-wrap--modele-tetes .menu-reference-somouest-list a:hover{
        background:#e2ebf7 !important;
        border-color:rgba(9,42,94,.08) !important;
        box-shadow:none !important;
        transform:none !important;
    }

    .menu-reference-somouest-wrap--modele-tetes .menu-reference-somouest-list a.menu-reference-somouest-selemenu{
        background:#ffffff !important;
        color:#173a76 !important;
        box-shadow:none !important;
        border-color:rgba(9,42,94,.08) !important;
    }
}