#toProduction{
    display: block;
    position: relative;
}

#subtitle{
    z-index: 2;
    position: sticky;
    top: calc(var(--DrTitle) + 25px);
}

.prod{
    display: block;
    position: relative;
    width: 50%;
    font-size: var(--CenText);
    height: calc(50vh - ((5vw + var(--DrTitle) + 20px)/2));
    overflow: hidden;
    white-space: none;
}


.prod img{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: 100%;
    height: auto;
}

.titleProd{
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: white;
    border-top: 1px solid black;
    padding: .7vw 0 .5vw 0;
    width: 100%;
    color: black;
    text-align: center;
    transition: .2s;
    transform: translate(0, 100%);
}
.prod:hover .titleProd{
    transform: translate(0 , 0);

}

#txtAgen{
    display: block;
    position: fixed;
    left: 50%;
    z-index:2;
    top:  calc(var(--DrTitle) + 26px);
    overflow-y: scroll;
    overflow-x: hidden;
    height: calc(100vh - (5vw + var(--DrTitle) + 20px));
    width: 45%;
}

#txtAgen::-webkit-scrollbar{
    width: 0px;
    background-color: transparent;
}

#texteDeleg{
    display: block;
    min-height: calc(50vh - ((5vw + var(--DrTitle) + 20px)/2));
    width: 100%;
    position: relative;
    font-size: var(--CenText);
  
}

#texteDeleg div{
    margin: 1.5vw;
}


#agendaMult{
    display: block;
    position: relative;
    color: black;
    background-color: white;
    margin-top: 1.5vw;
    min-height: calc(50vh - ((5vw + var(--DrTitle) + 20px)/2));
    padding: 0 1.5vw ;
    padding-bottom: 1.5vw;
 
}




#agen{
    display: block;
    background-color:white;
    z-index: 2;
    top: 0;
    font-size: var(--DrTitle);
    position: sticky;
    border-bottom: 1px solid black;
    padding: 1.3vw 0 10px 0;
    font-family: druk;
}

.annee{
    font-family: druk;
    padding: 10px 0 10px 0;
    font-size: var(--DrLow);
    border-bottom: 1px solid black;
    position: relative;
}

.deploy{
    display: block;
    position: absolute;
    font-family: century;
    height: .7vw;
    transform-origin: center;
    background-image: var(--bg-image);
    right: 0;
    top: 50%;
    transition: .1s;
    cursor: pointer;
    transform: translate(0 , -50%);
    margin-right: 3vw;
}





.deploy img{
    height: 100%;
    width: auto;
}

.monthProd{
    display: block;
    background-color: black;
    color: white;
    padding: 10px;

}

.contentYear{
    display: none;
    font-size: var(--CenLow);
    margin: 0 0 10px 0;
}
.contentYear:first-of-type{
    display: block;
}

.contentYear:last-of-type{
    padding-bottom: 1.5vw;
}

.productions{
    display: flex;
    font-size: var(--CenLow);
    text-align: left;
    margin: 10px 5px 5px 5px;
    justify-content: space-between;
}

.jour{
    width: 7%;
}
.representation{
    width: 30%;
}
.lieu{
    width: 20%;
}
.ville{
    width: 20%;;
}
.pays{
    width: 7%;
}


@media (orientation:portrait){
    
    #texteDeleg{
        position: relative;
        top: 0;
        left: 0%;
        width: 100%;
    }


    .prod{
        width: 100%;
        height: 30vh;
    }

    .prod img{
        min-width: 100%;
        min-height:100%;
        height: auto;
        width: auto;
        max-width: 150%;
    }
    

    .titleProd{
        padding: 1dvh 0;
        transform: translate(0,0%);
    }

    #agendaMult{
        position: relative;
        bottom: unset;
        width: 100%;
        padding: 0 ;
        padding-bottom: 1.5vw;
        height: auto;
        overflow-y: auto;
        right: unset;
    }

    #txtAgen{
        position:relative;
        top: 0;
        left: 0;
        border-top: 1px solid black;
        z-index: inherit;
        overflow-y: auto;
        height: auto;
        width: 100%;
    }

    #agen{
        padding-top: var(--DrTitle);
        z-index: auto;
        position: sticky;
    }

    #texteMob{
        margin: 5dvw;
        margin-bottom: 0;
    }

    #texteDeleg{
        display: none;
    }
    #agendaMult{
        margin-top: 0;
        padding: 0 5dvw;
        width: 90dvw;
        min-height: unset;
    }

    .deploy{
        height: 2.8vw;
        margin-right: 3vw;
    }
    
    .jour{
        width: 10%;
    }

    .representation{
        width: 30%;
    }
    
    .lieu{
        width: 25%;
    }

    .ville{
        width: 25%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .pays{
        display: none;
    }
    
    
            

}