/*
|--------------------------------------------------------------------------
| VC Language Switcher
|--------------------------------------------------------------------------
*/


.vc-language-switcher {

    position: relative;

    width: 170px;

    font-family: "Manrope", sans-serif;

    color: #fcfbf7;

}



/*
|--------------------------------------------------------------------------
| Bouton principal
|--------------------------------------------------------------------------
*/


.vc-language-button {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;


    padding: 12px 14px;


    background: linear-gradient(
        180deg,
        #132235 0%,
        #101c2d 100%
    );


    border: 1px solid rgba(252,251,247,.12);

    border-radius: 24px;


    cursor: pointer;


    color: #fcfbf7;


    font-family: "Manrope", sans-serif;

    font-size: 16px;

    font-weight: 500;


    line-height: 1;


    transition:

        border-color .25s ease,

        background .25s ease;

}



.vc-language-button:hover {

    border-color: rgba(252,251,247,.3);

}



.vc-language-button:focus-visible {

    outline: 2px solid #d2af6a;

    outline-offset: 3px;

}





/*
|--------------------------------------------------------------------------
| Langue actuelle
|--------------------------------------------------------------------------
*/


.vc-language-current {

    display: flex;

    align-items: center;

    gap: 10px;


    white-space: nowrap;

}



.vc-language-flag {

    width: 24px;

    height: 16px;


    object-fit: cover;


    display: block;


    flex-shrink: 0;

}



.vc-language-name {

    font-weight: 500;

}





/*
|--------------------------------------------------------------------------
| Flèche
|--------------------------------------------------------------------------
*/


.vc-language-arrow {

    width: 16px;

    height: 16px;


    flex-shrink: 0;


    transition:

        transform .25s ease;

}



.vc-language-arrow path {

    stroke: #fcfbf7;

}



.vc-language-switcher.open 
.vc-language-arrow {

    transform: rotate(180deg);

}





/*
|--------------------------------------------------------------------------
| Dropdown
|--------------------------------------------------------------------------
*/


.vc-language-dropdown {


    position: absolute;


    top: calc(100% + 6px);


    left: 0;

    right: 0;



    padding: 6px;



    background: linear-gradient(
        180deg,
        #132235 0%,
        #101c2d 100%
    );



    border: 1px solid rgba(252,251,247,.12);



    border-radius: 24px;



    box-shadow:

        0 10px 30px rgba(0,0,0,.35);



    opacity: 0;


    visibility: hidden;



    transform:

        translateY(-6px);



    transition:

        opacity .2s ease,

        transform .2s ease,

        visibility .2s ease;



    z-index: 9999;

}





.vc-language-switcher.open 
.vc-language-dropdown {


    opacity: 1;


    visibility: visible;



    transform:

        translateY(0);

}





/*
|--------------------------------------------------------------------------
| Liens du dropdown
|--------------------------------------------------------------------------
*/


.vc-language-link {


    display: flex;


    align-items: center;


    gap: 10px;



    width: 100%;



    padding: 12px;



    color: #fcfbf7;



    font-family: "Manrope", sans-serif;


    font-size: 16px;


    font-weight: 500;



    text-decoration: none;



    transition:

        background-color .2s ease,

        padding-left .2s ease;

}





.vc-language-link:hover {


    background: rgba(252,251,247,.06);


    padding-left: 16px;

}





/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/


@media (max-width: 767px) {


    .vc-language-switcher {

        width: 150px;

    }


}