@media (max-width:600px) {
  
    #cpicker {
        display: none !important;
    }

    /*////////////////////////////////////////// home /////////////////////////////////////*/
    #home{
        top: 2vh;
    }
    #menuHome{
        grid-template-columns: 45vw 45vw;
        grid-template-rows: 45vw 45vw;
        left: 2vw;
        bottom: 5vw;

    }
    #menuHome li {
        align-self: center;
        justify-self: center;
    }
    #menuHome img{
        height: 37vw;
    }
    [data-url='le-collectif']{
        right: -5vw;
        position: relative;
    }
    [data-url='le-collectif'] .logtitle{
        margin-right: 10vw;
    }
    .logtitle{
        right: unset !important;
        bottom: -2.5vh !important;
        position: absolute !important;
        visibility: visible !important;
        color: var(--color3);
        z-index: 4;
        mix-blend-mode: unset;
        justify-self: center;
    }

    /*////////////////////////////////////////// menu /////////////////////////////////////*/
        #menu{
            height: fit-content;
            max-height:unset;
           height:14vw;
            transition: 1s ease-in-out;
            padding: 1vh 14vw 1vh 1vh;
            z-index: 4;
            transition: 0.5s;
            background-color: rgba(255,255,255,0);

          
        }
        #menu ul {
            width: fit-content;
            font-size: 4.5vw;
            display: flex;
            flex-wrap: wrap;
            gap: 1vw 3vw;
            display: none;
            transition: ease-in 0.5s;
        }
        #menu ul [data-url='le-collectif']{
            right: unset;
            
        }
        #logo{
            width: 40vw;
            top: 0px;
            max-height: fit-content;
            /* display: none; */
        }
        .languages{
            top: 17vw;
            visibility: hidden;
            border-radius: 3vh;
            right: 0vh;
            z-index: 5;
            background-color: var(--color1);
            padding: 1.5vh;

        }
        .languages ul {
            flex-direction: column;
            gap: 2vw;
        }
        .languages ul li{
            opacity: 1;
        }
        #mobile{
            display: block;
            width: 10vw;
            font-size: 8vw;
            color: var(--color2);
            transform: rotate(-90deg) translate(0vh, -2vh);
            border: none;
            background-color:  transparent;
            position: fixed;
            transform-origin: center center;
            transition: 0.1s ease-in;
            right: 0vw;
            top: 3vh;
           
        }
       
        #menu a{
            left: 0vw;
            width: 50vw;
            transition: 0.4s ease-in-out;
        }

        .logoAnim{
            left: -50vw !important;
            width: 0vw !important;
        }
        

        

    /*////////////////////////////////////////// pieces /////////////////////////////////////*/

        #thumbs{
            width: 100vw;
            height: fit-content;
            row-gap: 2vh;
        }
        .preview{
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1vh;
            
        }
        .previewPiece{
            width: 47vw;
            height: 62vw;
        }
        #previews{
            display: none;
        }
        .pieceTitleM{
            display: inline;
            font-size: 3.5vw;
            color: var(--color2);
        }
        /*////////////////////////////////////////// agenda /////////////////////////////////////*/

        #agenda{
            width: 100vw;
            height: 90vh;
            top: 9vh;
            left: 0vh;
            display: flex;
            flex-direction: column;
            grid-template-columns: unset;
            font-size: 1.7vh !important;
            overflow-y: scroll ;
        }
        .avenir .ev{
            width: 93vw ;
            height: 8vw ;
        }
        .passe .ev{
            width: 93vw ;
            height: 8vw ;
            font-size: 1.7vh;
        }
        .passe .ev span{
            font-size: 1vh;
        }
        
        .infoEvent .date, .infoEvent .heure {
            font-size: 1vh;
            justify-self: center;
          }
        .infoEvText p {
            font-size: 1.2vh;
        }
        .colAg button span {
            font-size: 1.6vh;
            transform: rotate(90deg) translateY(-2vw);
          }
        .colAg{
            height: fit-content;
            overflow: hidden;
        }
        #aVenir{
            height: fit-content;
            line-height: 7vw;
            align-self: flex-start;
            margin-left: 4vw;
            margin-bottom: 1.5vh;
            font-size: 2vh;
        }
        #ps {
            font-size: 2vh;
            align-self: flex-start;
            margin: 2vw 0vh 1vh 4vw;
    
            
        }

/*////////////////////////////////////////// pieces /////////////////////////////////////*/

#imagePiece{
    width: 100%;
    padding: 15vw 0vw 30vh 0vw;
    flex-direction: column-reverse;
    box-sizing: border-box;
    row-gap: 10vh;
    align-items: center;
}
#imagePiece video{
    width: 100vw;
    margin-top: 10vh;
    margin-bottom: 25vh;

}
#imagePiece video .controls{
    height: 1vh;
}

#imagePiece img{
    max-width: 95vh;
    max-width: 85vw;
}

.imgPCntr{
    margin: 0 !important;
}

.pieceCredits{
    position: fixed;
    top: unset;
    bottom: 1vh;
    z-index: 10;
    right: 5vw;
    font-size: 1.2vh;
}

.pieceTexte{
    font-size: 1.45vh;
    width: 88vw;
    max-height: unset;
    background-color: var(--color1);
    box-sizing: content-box;
    padding: 0vh 0 5vh 0;
    bottom: 0px;
    box-shadow: 0px 0px 3vh 4vh var(--color1);
    
}

#containTextPiece .box{
    font-size: 2.5vw;
    display: none;
}


#pTitle{
    top: 5.5vw;
    right: 18vw;
    font-size: 4.5vw;
    /* transition: 0.3s ease-in; */
    max-width: 35vw;
    text-align: center;
    line-height: 5vw;
  
}

/*////////////////////////////////////////// presse /////////////////////////////////////*/

#coupures{
    max-width: 90vw;
}
#coupures li {
    font-size: 2vh;
}

.imgGal{
    max-width: 85vw;
    margin: 0;
}


/*////////////////////////////////////////// collectif /////////////////////////////////////*/

#mainCol{
    left: 0;
    width: 100vw;
    height: 93vh;
    top: 7vh;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    padding-bottom: 18vh;
}
#members{   
    flex-direction: row;
   position: fixed;
   bottom: 2vh;
   z-index: 3;
   box-sizing: border-box;
    padding: 1vw;
}
#members img{
    max-height: unset;
    max-width: 16.5vw;
}
#members li{
    font-size: 2.5vw;
    margin: 0 -0.5vw;
}

#members li span{
box-sizing: border-box;
background-color: var(--color2);
border-radius: 1vh;
margin: 1vw 0;
color: var(--color1);
padding: 1vw;
}
#members li:nth-of-type(2n) {
    flex-direction: column-reverse;

}
#colContent{
    display: flex;
    flex-direction: column;
    height: fit-content;
    padding: 4vh 5vw 4vh 5vw;
    width: 100vw;
    box-sizing: border-box;


}
.memInfo{
    overflow-y: unset;
}
.bio{
    font-size: 1.7vh;
    line-height: 2vh;
}
.bd{
    right: 5vw;
}
.nom{
    left: 5vw;
}

#contact {
    justify-content: center;
    font-size: 2.2vh;
    margin-top: 3vh;
    
}
#contact ul {
    width: 60vw;
}
#contact li {
    justify-content: space-between;
}
#contact>span{
    display: none;
}



#containerFullScreen img{

    max-height: unset;
    max-width: 95vw;
}

}