/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*-----------------------------------@DEFAULT-------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------------*/
/*--------------------------------@HEADER MODULE----------------------------------*/
/*--------------------------------------------------------------------------------*/

header .header-main .header-nav > li.html:has( .searchbar__module ) {
    width:100%;
    height:calc( 100% - 1px ); /* To avoid hidden separator */

    margin:0!important;

    position:absolute;
    z-index:10;
    top:0;
    right:0;

    transform:translateY(50%);

    opacity:0;
    visibility: hidden;
}
header .header-main .header-nav > li.html:has( .searchbar__module.active ) {
    transform:translateY(-50%);

    opacity:1;
    visibility: visible;

    transition:
    transform calc(1/3*1s) ease-in-out,
    opacity calc(1/3*1s) ease-in-out;
}
header .header-main .header-nav > li.html:has( .searchbar__module.deactivated ) {
    transition:
    transform calc(1/3*1s) ease-in-out,
    opacity calc(1/3*1s) ease-in-out;
}

header .header-main .header-nav .searchbar__module {
    width:100%;
    height:100%;

    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

header .header-main .header-nav .searchbar__module .searchbar {
    width:calc( 8/12*100% );

    display:flex;
    flex-direction: row;
    align-items:center;

    position:relative;
}

/*--------------------------------------------------------------------------------*/
/*-------------------------------------@FORM--------------------------------------*/
/*--------------------------------------------------------------------------------*/

.searchbar .searchbar__form {
    width:100%;

    display:flex;
    flex-direction: row;

    margin:0;

    border:1px solid var(--color-white-smoke);
    border-radius:50px;
}

/* @LABEL */

.searchbar .searchbar__form label[ for="s" ] {
    width:100%;

    display:flex;
    flex-flow:row nowrap;
    align-items:center;

    border-radius:2px;

    transition: all .33s ease-in-out;
}

/* @INPUT */

.searchbar__form label {
    margin:0;
}

.searchbar__form input[ type="text" ] {
    height:auto;

    flex:1;

    padding:12px 24px;
    margin:0;

    font-family:var(--text-family-primary);
    font-size:var(--text-body-m-size);
    line-height:var(--text-body-m-line-height);
    letter-spacing: 0em;
    text-transform:initial;
    font-weight:400;
    text-align:left;
    color:var(--color-black-eerie);
    text-decoration: none;

    background-color:transparent;

    border:0;

    -webkit-box-shadow:none;
    box-shadow:none;

    transition:color var(--transition-timing-mid) ease-in-out;
}
.searchbar__form input[ type="text" ]:focus {
    color:var(--color-black-eerie);

    outline:none;

    -webkit-box-shadow:none;
    box-shadow:none;
}

.searchbar__form input[ type="text" ]::placeholder {
    color:var(--color-gray-french);
}

/* @SEARCH SUBMIT */

.searchbar .searchbar__button-search {
    width:53px;
    height:53px;

    display:flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;

    background-color:transparent;

    border:0;

    cursor:pointer;

    transition:background-color var(--transition-timing-mid) ease-in-out;
}
.searchbar .searchbar__button-search:hover {
    background-color:var(--color-green-08);
}

.searchbar .searchbar__button-search .searchbar__button__icon {
    line-height:1;
}

.searchbar .searchbar__button-search svg{
    position:relative;

    transition:all .33s ease-in-out;
}

.searchbar .searchbar__button-search button[ type="submit" ] {
    display:none;
}

/*--------------------------------------------------------------------------------*/
/*---------------------------------@BUTTON CLOSE----------------------------------*/
/*--------------------------------------------------------------------------------*/

.searchbar .searchbar__button-close {
    height:53px;
    aspect-ratio: 1/1;

    padding:0;
    margin-left:16px;

    font-family:var(--text-family-primary);
    font-size:var(--text-body-m-size);
    line-height:var(--text-body-m-line-height);

    border:1px solid var(--color-white-smoke);
    border-radius:100%;

    cursor:pointer;

    transition: all calc(1/3*1s) ease-in-out;
}
.searchbar .searchbar__button-close:hover {
    border-color:var(--color-blue-prussian);
}

.searchbar .searchbar__button-close .searchbar__button__icon {
    width:100%;
    height:100%;

    display:flex;
    justify-content: center;
    align-items: center;
}

/*--------------------------------------------------------------------------------*/
/*-----------------------------------@RESULTS-------------------------------------*/
/*--------------------------------------------------------------------------------*/

.searchbar__results {
    width:100%;
    max-width:100%;

    position:absolute;
    top:calc( 100% + var(--gap-xs) );

    background-color:var(--color-white);

    border-radius:4px;

    overflow: hidden;
}

.searchbar__results .item {
    display:flex;
    flex-direction: row;
    align-items: center;
    grid-gap:var(--gap-xs);

    padding:12px;

    text-decoration: none;

    background-color:var(--color-white);

    transition:all calc(1/3*1s) ease-in-out;
}
.searchbar__results a.item:hover {
    background-color:var(--color-white-smoke);
}

.searchbar__results .item:not( :last-child ) {
    border-bottom:1px solid var(--color-white-smoke);
}

.searchbar__results .item .item__thumbnail {
    width:56px;
    height:56px;

    flex-shrink: 0;

    position:relative;

    background-color:var(--color-white-smoke);

    border-radius:4px;

    overflow: hidden;

    transition:background-color calc(1/3*1s) ease-in-out;
}
.searchbar__results .item:hover .item__thumbnail {
    background-color:var(--color-white);
}

.searchbar__results .item .item__thumbnail img {
    width:100%;
    height:100%;

    position:absolute;

    object-fit: cover;

    mix-blend-mode: darken;
}

.searchbar__results .item .item__title {
    margin:0;

    font-family:var(--text-family-body);
    font-size:var(--text-body-m-size);
    line-height:var(--text-body-line-height);
    letter-spacing: 0em;
    text-transform:initial;
    font-weight:400;
    text-align:left;
    color:var(--color-black-eerie);
    text-decoration: none;
}
.searchbar__results a.item:hover .item__title {
    color:var(--color-green-12);
}


@media ( min-width: 1025px ) {

    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*-------------------------------------#DEFAULT-----------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/

}

@media ( min-width:768px ) and ( max-width:1024px ) {

    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*-------------------------------------$DEFAULT-----------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/

    /*--------------------------------------------------------------------------------*/
    /*-------------------------------------$FORM--------------------------------------*/
    /*--------------------------------------------------------------------------------*/

    .searchbar .searchbar__form  {
        border-radius:0;
    }

    /*--------------------------------------------------------------------------------*/
    /*--------------------------------$BUTTON CLOSE-----------------------------------*/
    /*--------------------------------------------------------------------------------*/

    .searchbar .searchbar__button-close {
        display:none;
    }

    /*--------------------------------------------------------------------------------*/
    /*-----------------------------------$RESULTS-------------------------------------*/
    /*--------------------------------------------------------------------------------*/

    .searchbar__results {
        display:none;
    }

}

@media ( max-width:767px ) {

    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*-------------------------------------%DEFAULT-----------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/

    /*--------------------------------------------------------------------------------*/
    /*-------------------------------------%FORM--------------------------------------*/
    /*--------------------------------------------------------------------------------*/

    .searchbar .searchbar__form  {
        border-radius:0;
    }

    .searchbar__form input[ type="text" ] {
        padding:12px 16px;
    }

    /*--------------------------------------------------------------------------------*/
    /*--------------------------------%BUTTON CLOSE-----------------------------------*/
    /*--------------------------------------------------------------------------------*/

    .searchbar .searchbar__button-close {
        display:none;
    }

    /*--------------------------------------------------------------------------------*/
    /*-----------------------------------%RESULTS-------------------------------------*/
    /*--------------------------------------------------------------------------------*/

    .searchbar__results {
        display:none;
    }

}