body{
    background-color: black;
}

#logo{
    display: none;
}

#menu-secondaire{
    pointer-events: none;
    z-index: 999999999;

}

#menu{
    z-index: 999999999;
}

#menu-secondaire a{
    /* pointer-events: all;
    color: black !important; */
    display: none;
}

@media(orientation: landscape){
    .item{
        text-transform: uppercase;
        width: 33vw;
        height: 33.2vw;
        padding: calc(1vw/6);
        position: relative;
        padding-bottom: 1vw;
        transition: .15s;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: rgb(194, 194, 194);
    }

    #en-tournee .item:hover{
        cursor: pointer;
        background-color: var(--white);
        color: var(--orange);
        transition: .2s;
    }


    #en-creation .item:hover{
        cursor: pointer;
        color: var(--violet);
        transition: .2s;
    }

    #passes .item:hover{
        cursor: pointer;
        color: white;
    }

    .item:hover img{
        filter: none;
        transition: .5s;
    }

    .filtre-name{
        display: inline-block !important;
    }

    .wraper-img {
        margin-top: 1vw;
        width: 31vw;
        height: 31vw;
        border-radius: 100000px;
        overflow: hidden;
        display: flex;
        justify-content: center;
    }

    .item img{
        height: 100%;
        position: relative;
        filter: grayscale(1) contrast(110%);
    }

    .categorie{
        width: 100vw;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-top: 5vw;
        position: relative;
    }

    .mosaique{
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        overflow: hidden;
        transition: .5s;

        padding-top: 2.5vh;
        padding-bottom: 20vh;

    }

    #en-tournee .titre-fixe, #transmission .titre-fixe{
        color: rgb(0, 0, 0);
        background-color: rgb(255, 255, 255);
    }

    #en-tournee, #transmission{
        background-color: rgb(255, 255, 255);
    }

    /* #en-tournee .mosaique{
        background-color: white;
    } */

    #en-creation, #workshops-rencontres{
        background-color: rgb(194, 194, 194);
    }

    #en-creation .item, #workshops-rencontres .item{
        color: white;
    }

    #en-creation .titre-fixe, #workshops-rencontres .titre-fixe{
        color: rgb(0, 0, 0);
        background-color: rgb(194, 194, 194);
    }

    #passes, #publications{
        background-color: rgb(136, 136, 136);
        padding-bottom: 10vh;
    }

    #passes .titre-fixe, #publications .titre-fixe{
        color: rgb(0, 0, 0);
        background-color: rgb(136, 136, 136);
    }

    .titre-fixe{
        text-align: center;
        width: 100%;
        padding-top: .25vw;
        font-size: var(--fs3);
        /* left: 50%;
        transform: translateX(-50%); */
        z-index: 999;
        position: absolute;
        top: 0px;
        /* color: white !important; */
        display: flex;
        justify-content: center;
    }

    .titre-fixe section{
        width: fit-content;
    }

    .titre-fixe:hover{
        cursor: default;
    }

    .titre-fixe section:hover ul{
        max-height: 50vh;
        transition: .2s;
    }

    .resetFiltre{
        margin-left: .5em;
        opacity: 50%;
    }

    .resetFiltre:hover{
        cursor: pointer;
        text-decoration: line-through wavy;
        transition: .2s;
    }

    #en-tournee li{
        background-color: white;
    }

    #en-creation li{
        background-color: rgb(194, 194, 194);
    }

    #passes li{
        background-color: rgb(136, 136, 136);
    }

    ul{
        max-height: 0px;
        overflow: hidden;

        display: flex;
        align-items: center;
        flex-direction: column;
        width: fit-content;
        margin: 0;
        padding: 0;
        position: absolute;
        transition: .2s;
        left: 50%;
        transform: translateX(-50%);
    }

    li{
        padding-left: .7vw;
        padding-right: .7vw;
        padding-top: .4vw;
        padding-bottom: .4vw;
        pointer-events: all;
        width: fit-content;
        list-style-type: none;
        line-height: 1;
    }

    .arrowRight:hover, .arrowLeft:hover{
        cursor: pointer;
    }

    h1{
        text-align: center;
        width: calc(100% - 1vw);
        line-height: 1;
        font-family: BDO-bold;
        position: absolute;
        margin: .1vw;
        font-size: var(--fs2);
        bottom: 0;
    }

    h2{
        text-align: center;
        width: calc(100% - 1vw);
        line-height: 1;
        font-family: BDO-bold;
        position: absolute;
        margin: .3vw;
        font-size: var(--fs1);
        top: 0;
        text-transform: uppercase;
    }

    h2:hover{
        text-decoration: underline dotted;
    }

    /* #barre-1 a:first-of-type{
        display: none;
    }

    #barre-1 a:last-of-type{
        display: none;
    } 

    #barre-1{
        justify-content: center;
    }

    #menu-cross{
        left: 50%;
        position: relative;
        transform: translateX(-50%);
    }*/

    .hover-violet:hover{
        color: var(--violet) !important;
    }

    .hover-orange:hover{
        color: var(--orange) !important;
    }

    .hover-vert:hover{
        color: var(--vert) !important;
    }

    .hover-jaune:hover{
        color: var(--jaune) !important;
    }

    .hover-rauge:hover{
        color: var(--rouge) !important;
    }

    #test{
        width: 100%;
        text-align: center;
        font-size: var(--fs1);
        padding-top: .5vw;
        padding-bottom: .5vw;
        background-color: black;
        color: white;
    }
}

/* -----------------------------  MOBILE  ------------------------------------------------------------- */

@media(orientation: portrait){
    .item{
        text-transform: uppercase;
        width: 48vw;
        height: 48vw;
        padding: 1vw;
        position: relative;
        padding-bottom: 3vw;
        transition: .15s;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: rgb(194, 194, 194);
    }

    #en-tournee .item:hover{
        cursor: pointer;
        background-color: var(--white);
        color: var(--orange);
        transition: .2s;
    }


    #en-creation .item:hover{
        cursor: pointer;
        color: var(--violet);
        transition: .2s;
    }

    #passes .item:hover{
        cursor: pointer;
        color: white;
    }

    .item:hover img{
        filter: none;
        transition: .5s;
    }

    .filtre-name{
        display: inline-block !important;
    }

    .wraper-img {
        margin-top: 1vw;
        width: 48vw;
        height: 48vw;
        border-radius: 100000px;
        overflow: hidden;
        display: flex;
        justify-content: center;
    }

    .item img{
        height: 100%;
        position: relative;
        filter: grayscale(1) contrast(110%);
    }

    .categorie{
        width: 100vw;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-top: 5vw;
        position: relative;
    }

    .mosaique{
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        overflow: hidden;
        transition: .5s;

        padding-top: 2.5vh;
        padding-bottom: 20vh;

    }

    #en-tournee .titre-fixe{
        color: rgb(0, 0, 0);
        background-color: rgb(255, 255, 255);
    }

    #en-tournee{
        background-color: rgb(255, 255, 255);
    }

    /* #en-tournee .mosaique{
        background-color: white;
    } */

    #en-creation{
        background-color: rgb(194, 194, 194);
    }

    #en-creation .item{
        color: white;
    }

    #en-creation .titre-fixe{
        color: rgb(0, 0, 0);
        background-color: rgb(194, 194, 194);
    }

    #passes{
        background-color: rgb(136, 136, 136);
        padding-bottom: 10vh;
    }

    #passes .titre-fixe{
        color: rgb(0, 0, 0);
        background-color: rgb(136, 136, 136);
    }

    .titre-fixe{
        text-align: center;
        width: 100%;
        padding-top: .25vw;
        font-size: var(--fs3);
        /* left: 50%;
        transform: translateX(-50%); */
        z-index: 999;
        position: absolute;
        top: 0px;
        /* color: white !important; */
        display: flex;
        justify-content: center;
    }

    .titre-fixe section{
        width: fit-content;
    }

    .titre-fixe:hover{
        cursor: default;
    }

    .titre-fixe section:hover ul{
        max-height: 50vh;
        transition: .2s;
    }

    .resetFiltre{
        margin-left: .5em;
        opacity: 50%;
    }

    .resetFiltre:hover{
        cursor: pointer;
        text-decoration: line-through wavy;
        transition: .2s;
    }

    #en-tournee li{
        background-color: white;
    }

    #en-creation li{
        background-color: rgb(194, 194, 194);
    }

    #passes li{
        background-color: rgb(136, 136, 136);
    }

    ul{
        max-height: 0px;
        overflow: hidden;

        display: flex;
        align-items: center;
        flex-direction: column;
        width: fit-content;
        margin: 0;
        padding: 0;
        position: absolute;
        transition: .2s;
        left: 50%;
        transform: translateX(-50%);
    }

    li{
        padding-left: .7vw;
        padding-right: .7vw;
        padding-top: .4vw;
        padding-bottom: .4vw;
        pointer-events: all;
        width: fit-content;
        list-style-type: none;
        line-height: 1;
    }

    .arrowRight:hover, .arrowLeft:hover{
        cursor: pointer;
    }

    h1{
        font-weight: normal;
        text-align: center;
        width: calc(100% - 1vw);
        line-height: 1;
        font-family: BDO-black;
        position: absolute;
        margin: 1vw;
        font-size: var(--fs4);
        bottom: 0;
        transform: translateY(40%);
    }

    h2{
        font-weight: normal;
        text-align: center;
        width: calc(100% - 1vw);
        line-height: 1;
        font-family: BDO-bold;
        position: absolute;
        margin: 1vw;
        font-size: var(--fs2);
        top: 0;
        text-transform: uppercase;

    }

    h2:hover{
        text-decoration: underline dotted;
    }

    /* #barre-1 a:first-of-type{
        display: none;
    }

    #barre-1 a:last-of-type{
        display: none;
    } 

    #barre-1{
        justify-content: center;
    }

    #menu-cross{
        left: 50%;
        position: relative;
        transform: translateX(-50%);
    }*/

    .hover-violet{
        color: var(--violet) !important;
    }

    .hover-orange{
        color: var(--orange) !important;
    }

    .hover-vert{
        color: var(--vert) !important;
    }

    .hover-jaune{
        color: var(--jaune) !important;
    }

    .hover-rougae{
        color: var(--rouge) !important;
    }

    #test{
        width: 100%;
        text-align: center;
        font-size: var(--fs1);
        padding-top: .5vw;
        padding-bottom: .5vw;
        background-color: black;
        color: white;
    }
}