.work-gradient{
    position: absolute;
    width: 100%;
    height: 200vh;
    top: -50vh;
    right: 0;
    background: radial-gradient(farthest-corner at 180% 75vh, #ebf0f2 -400%, #121212 60%);
    z-index: -3;
    pointer-events: none;
}
@media screen and (max-width: 1360px) {
    .w-search, .w-search *{
        display: none !important;
        pointer-events: none !important;
    }
}

@media screen and (min-width:1000px) {
    .wtel-containerprojet, .wtel-containerprojet *, .portfoliotel{
        display: none;
    }
    .w-containerall{
        position: relative;
        color: #ebf0f2;
        margin-bottom: 100px;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin-top: 80px;
    }
    .w-title{
        position: relative;
        color: #ebf0f2;
        font-size: 3vw;
        line-height: 3vw;
        margin: 50px 10px 3vw 0px;
        text-align: center;
    }
    .w-title-active{
        animation: wtitleactive 1.1s cubic-bezier(0,.87,.67,1) 0.3s;
    }
    @keyframes wtitleactive{from{top: 250px;}to{top: 0;}}

    .w-title span{
        color: #befc03;
    }

    
    /*FILTRES*//*FILTRES*//*FILTRES*//*FILTRES*//*FILTRES*/
    .w-title-indic{
        display: none;
    }
    .w-search-container{
        position: relative;
        display: flex;
        align-items: center;
        margin: 0 130px 50px 130px;
        gap: 20px 8px;
        box-sizing: border-box;
        flex-wrap: wrap;
        padding: 18px 22px;
        border-radius: 28px;
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        border: 1px solid #ebf0f21a;
    }
    .w-search-container-active{
        animation: wsearchcontainer 1.2s cubic-bezier(0,.87,.67,1) 0.3s;
    }
    @keyframes wsearchcontainer{from{top: 350px;}to{top: 0;}}
    .w-filter-container{
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 16px;
    }
    .w-filterall{
        display: flex;
        gap: 8px;
    }
    .w-filter-title{
        margin-right: 15px;
        opacity: 0.6;
        white-space: nowrap;
    }
    .w-filter{
        padding: 8px 12px;
        border-radius: 15px;
        color: #ebf0f299;
        border: 1px solid #ebf0f200;
        transition: all 0.3s ease;
        cursor: pointer;
        display: flex;
        align-items: center;
        white-space: nowrap;
        background: #ebf0f208;
        font-size: 16px;
    }
    .w-filter-tick{
        position: relative;
        width: 0;
        height: 0;
        border-bottom: 1px solid #befc03;
        border-left: 1px solid #befc03;
        transform: rotate(-45deg) translateY(-3px);
        transition: all 0.3s ease, opacity 0.3s ease;
        opacity: 0;
    }
    .w-filter-tick-focused{
        opacity: 1;
        width: 9px;
        height: 5px;
        margin-right: 5px;
        transition: all 0.3s ease, opacity 0.3s ease 0.1s;
    }

    .w-filter:hover{
        color: #befc03
    }
    .w-filter-focused{
        border: 1px solid #befc03;
        color: #befc03;
        opacity: 1;
    }






    /*RECHERCHE*//*RECHERCHE*//*RECHERCHE*//*RECHERCHE*//*RECHERCHE*/
    .w-search{
        position: relative;
        display: flex;
        align-items: center;
        overflow: hidden;
        flex-grow: 1;
        justify-content: end;
    }
    .w-search-bar{
        background: none;
        border: none;
        outline: none;
        color: #befc03;
        font-size: 16px;
        padding: 8px 12px;
        color: #befc03;
        flex-shrink: 1;
    }
    .w-search-bar::placeholder{
        color: #ebf0f2;
        opacity: 0.2;
    }
    .w-search2{
        display: flex;
        align-items: center;
        background: #ebf0f208;
        border-radius: 15px;
    }

    /*RECHERCHE ICON*//*RECHERCHE ICON*//*RECHERCHE ICON*/
    .w-search-icon{
        display: flex;
        flex-direction: column;
        align-items: center;
        rotate: -45deg;
        margin-left: 12px;
    }
    .w-search-icon :nth-child(1){
        width: 10px;
        height: 10px;
        border-radius: 20px;
        border: 2px solid #befc03;
    }
    .w-search-icon :nth-child(2){
        width: 2px;
        height: 6px;
        background: #befc03;
    }


    /*CLEAR*//*CLEAR*//*CLEAR*//*CLEAR*//*CLEAR*/
    .w-clear-icon{
        position: relative;
        display: flex;
        align-items: center;
        margin-right: 2px;
        cursor: pointer;
        padding: 16px;
    }
    .w-clear-icon :nth-child(1){
        position: absolute;
        width: 2px;
        height: 12px;
        background: #befc03;
        rotate: -45deg;
    }
    .w-clear-icon :nth-child(2){
        position: absolute;
        width: 2px;
        height: 12px;
        background: #befc03;
        rotate: 45deg;
    }



    /*ERREUR*//*ERREUR*//*ERREUR*//*ERREUR*/
    .w-error{
        height: 100%;
        width: 100%;
        position: absolute;
        color: #befc03;
        font-size: 28px;
        opacity: 0;
        display: flex;
        align-items: center;
        text-align: center;
        flex-direction: column;
        line-height: 34px;
        pointer-events: none;
        margin-top: 100px;
    }
    .w-error span{
        font-size: 16px;
        color: #ebf0f2;
        opacity: 0.6;
    }
}









/*PROJETS*//*PROJETS*//*PROJETS*//*PROJETS*//*PROJETS*/
@media screen and (min-width: 1000px) {
    .w-containerprojets {
        position: relative;
        margin: 0 80px;
        min-height: 40vh;
    }
    .w-containerprojets-active {
        animation: wcontainerprojets 1.3s cubic-bezier(0, .87, .67, 1) 0.3s;
    }
    @keyframes wcontainerprojets {from {top: 400px;}to {top: 0;}}
    
    .w-containerprojet {
        position: relative;
        height: calc(8vw + 70px);
        opacity: 1;
        display: flex;
        align-items: center;
        column-gap: 40px;
        transition: all 0.4s cubic-bezier(.3, -0.01, .13, .98);
    }
    /*en mode hover*/
    .w-containerprojet-hide {
        opacity: 0.05;
        transform: scale(0.97);
    }
    /*après une recherche*/
    .hide {
        opacity: 0;
        height: 0;
        margin-top: 0;
        pointer-events: none;
        transition: all 0.5s cubic-bezier(.37, -0.01, .05, .99), opacity 0.2s ease;
    }



    /*NOM ET DESCRIPTION*//*NOM ET DESCRIPTION*//*NOM ET DESCRIPTION*/
    .w-infos {
        display: flex;
        align-items: center;
        flex-grow: 1;
        margin-left: 30px;
        width: 0;
    }
    .w-new{
        color: #befc03;
        background-color: #befc031A;
        padding: 5px 10px;
        border-radius: 20px;
        border: 1px solid #befc0380;
        width: fit-content;
        font-size: 18px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        margin-left: 20px;
    }
    .w-nom {
        transform: translateY(-0.5vw);
        font-size: 7vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .w-description {
        position: absolute;
        margin-left: 0.3vw;
        opacity: 0;
        font-size: 16px;
        line-height: 22px;
        transition: all 0.4s ease, transform 0s linear 0.4s;
        transform: translateY(2vw);
        min-width: 300px;
        max-width: 600px;
    }
    .w-containerprojet:hover .w-description {
        transform: translateY(calc(30px + 3vw));
        opacity: 0.6;
        transition: all 0.5s ease 0.2s, transform 0.7s cubic-bezier(0, .87, .67, 1);
    }
    /*HUD*//*HUD*//*HUD*//*HUD*//*HUD*//*HUD*/
    .w-numero {
        color: #befc03;
        font-size: 24px;
        width: 30px;
    }
    .w-date {
        background: transparent;
        opacity: 0.6;
    }
    .w-categorie {
        display: flex;
        align-items: center;
        column-gap: 10px;
    }
    .w-tag {
        background: #ebf0f208;
        color: #befc03;
        border-radius: 15px;
        padding: 8px 12px;
        white-space: nowrap;
        width: fit-content;
        font-size: 16px;
    }


    /*PREVIEW*//*PREVIEW*//*PREVIEW*//*PREVIEW*//*PREVIEW*/
    .w-preview {
        position: fixed;
        min-width: 100vw;
        height: 100vh;
        z-index: -1;
        opacity: 0;
        pointer-events: none;
        user-select: none;
        transition: all 0.6s ease;
        display: flex;
        justify-content: center;
        /* filter: blur(10px); */
    }
    .w-preview video {
        width: 100%;
        min-height: 100%;
        object-fit: cover;

    }
    .w-voile {
        position: absolute;
        background: #000;
        height: 100%;
        width: 100%;
        opacity: 0.8;
    }
    .w-preview-hidden{
        display: none;
    }
}