body{background: url('/template/charte/imgs/accueil.png') no-repeat; background-size: cover; background-position: top center;}
body > div{padding-top: 0;}

header{height: 0px!important;position: absolute;}
header .logo{display: none;}
header #nav-trigger *{color: white!important;}
header.show #nav-trigger *{color: var(--black)!important;}

/*
------------------------------
        Section 1 : Zoom
------------------------------
*/

img{width: 100%; max-width: max-content;}
#zoom{width: 100%; position: relative;}
#zoom img{/*filter: grayscale(1);*/transition: all 1s ease;}
#zoom .layout{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(0,0,0,0.2), rgba(0,0,0,.5) 50%);}
#zoom .zoom-logo{width: max-content; height: max-content; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);max-width: 50%;}
#zoom .zoom-logo img{width: 100%;}
#zoom .line-fx{right: 8vw; bottom: 0; width: 1px; background-color: white;height: 0;transition: all 1s ease; position: absolute;}

#zoom:hover img{filter: grayscale(0);}
#zoom:hover .line-fx{height: calc(100% - 80px);}

/*
------------------------------
        Section 2 : Tuiles
------------------------------
*/

#tiles .row{display: flex; width: 100%;padding: 0;margin: 0;height: 523px;}
#tiles .row > p{display: none;}
#tiles .col{flex-basis: 33.333%; padding: 0;margin: 0; position: relative;}
#tiles .col img{max-width: 100%;max-height: 523px; height: 100%; /*filter: grayscale(1);*/transition: all 1s ease; object-fit: cover; object-position: top center;}
/*#tiles .col p, #tiles .col span{font-size: 50px;text-transform: uppercase; width: max-content;margin-bottom: 0; position: absolute;}*/
#tiles .col p, #tiles .col span{font-size: 36px;text-transform: uppercase; width: max-content;margin-bottom: 0; position: absolute;}
#tiles .col p{left: 50%; bottom: 15px; transform: translateX(-50%)}
#tiles .col span{font-size: 440px; line-height: 440px; font-weight: 900; top: 50%; left: 50%; transform: translate(-50%, -50%);opacity: 0.3;}
#tiles .col a{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#tiles .minibloc > p{display: none;}

/*#tiles .col:hover img{filter: grayscale(.7); opacity: .5;}*/
#tiles .col:hover span{font-size: 250px; opacity: 1;}
#tiles .col:hover p{bottom: 70%;}

/*
-------------------------------------
        Section 3 : Présentation
-------------------------------------
*/

/*#presentation{min-height: 700px; display: flex; width: 100%; justify-content: center;}*/
#presentation{min-height: 550px; display: flex; width: 100%; justify-content: center;}
#presentation > div{height: max-content;margin-top: 160px;}
#presentation p{font-size: 35px; color: var(--black);text-transform: uppercase; letter-spacing: 0.27em;}
/*#presentation h1{margin-top: 52px;color: var(--black); !*font-size: 94px;*!font-size: 4vw; font-weight: 900;text-transform: uppercase; letter-spacing: 0.03em; opacity: 0;}*/
#presentation h1{margin-top: 52px;color: var(--black);font-size: 3.5vw; font-weight: 900;text-transform: uppercase; letter-spacing: 0.03em; opacity: 0;}

/*
------------------------------
        Section 3 : Agenda
------------------------------
*/

#agenda{min-height: 300px; display: flex;justify-content: space-between;position: relative;padding-bottom: 80px;}
#agenda .owl-agenda{max-width: 1230px; width: 100%;margin-top: 57px;margin-bottom: 60px;}
/*#agenda h2{font-size: 60px; font-weight: bold; text-decoration: underline; text-transform: uppercase;margin-top: 30px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}*/
#agenda h2{font-size: 50px; font-weight: bold; text-decoration: underline; text-transform: uppercase;margin-top: 30px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
/*#agenda .owl-item{height: 594px;background-color: transparent;align-items: center;position: relative;display: flex; justify-content: center;}*/
#agenda .owl-item{height: 420px;background-color: transparent;align-items: center;position: relative;display: flex; justify-content: center;}
#agenda .agenda-item-container{max-width: 410px;min-width: 410px; height: 100%;display: flex; justify-content: center;flex-direction: column;position: relative;align-items: center}
#agenda .agenda-item{display: flex; justify-content: center;width: 100%; max-width: 378px; height: 378px;border-radius: 50%;-webkit-border-radius: 50%; background: #FAFAFA;box-shadow: rgba(0,0,0,0.3) 3px 3px 3px;flex-direction: column;align-items: center;transition: all .2s ease;}
#agenda .agenda-item .text{max-width: 265px;width: 100%;height: 274px;}
#agenda .agenda-item p{color: black;margin-bottom: 0;transition: all .2s ease;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
/*#agenda .date{font-size: 48px; font-weight: bold;letter-spacing: -0.05em;}*/
#agenda .date{font-size: 40px; font-weight: bold;letter-spacing: -0.05em;}
/*#agenda p:nth-child(2){font-size: 40px; font-weight: 300;line-height: 1.0em;margin-top: 7px;}*/
#agenda p.nom{font-size: 30px; font-weight: 300;line-height: 1.0em;margin-top: 7px;}
#agenda .spectacle{font-size: 20px; font-weight: 300;text-transform: uppercase;margin-top: 50px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
#agenda .text a:not(.layout-link){display: none;opacity: 0;position: absolute; bottom: 30px; right: 50px;transition: opacity .2s ease; color: white;font-size: 21px; font-weight: 300;text-transform: uppercase;}
#agenda .layout-link{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#agenda .agenda-item:before{content:"";width: 35px; height: 38px;border-color: white; border-width: 9px 0 0 9px; border-style: solid;position: absolute; left: 20px; top:50px;opacity: 0; display: none; transition: opacity .2s ease .1s;}
#agenda .agenda-item:after{content:"";width: 35px; height: 38px;border-color: white; border-width: 0 9px 9px 0; border-style: solid;position: absolute; right: 20px; bottom:80px; opacity: 0; display: none; transition: opacity .2s ease .1s;}
#agenda .gotoAgenda{position: absolute; left: 50%; transform: translateX(-50%); color: black; background-color: white; box-shadow: rgba(0,0,0,0.3) 3px 3px 10px;padding: 25px 50px;bottom: 0;text-transform: uppercase;transition: all .2s ease;}
#agenda .gotoAgenda:hover{background-color: black; color: white;}

/* Navigation */
#agenda .owl-nav{width: 100%;}
#agenda .owl-nav button{position: absolute; top: 50%; transform: translateY(-50%)}
#agenda .owl-nav .owl-prev{left:0;margin-left: -50px;}
#agenda .owl-nav .owl-next{right: 0;margin-right: -50px;}
#agenda .owl-nav button i{font-size: 54px;}
#agenda .owl-nav button:focus{outline: none;}
#agenda .owl-nav button:hover{background-color: transparent;transform: translateY(-50%) scale(1.3);}

/* Effet hover */
/*#agenda .agenda-item:hover{border-radius: 50px;width: 100%; max-width: 100%; height: calc(100% - 15px); background-color: black;}*/
#agenda .agenda-item:hover{border-radius: 50px;width: 100%; max-width: 100%; background-color: black;}
/*#agenda .agenda-item:hover::after, #agenda .agenda-item:hover::before{opacity: 1;display: inherit;}*/
#agenda .agenda-item:hover p{color: white;}
#agenda .agenda-item:hover a:not(.layout-link){display: inherit; opacity: 1}
#agenda .agenda-item:hover .text{height: 100%;}
#agenda .agenda-item:hover .date{margin-top: 50px;}
#agenda .agenda-item:hover .spectacle{margin-top: 50px;}

/*
------------------------------
        Section 3 : Actus
------------------------------
*/

#news .row{margin-top: 116px;margin-bottom: 82px;position: relative}
#news .col{display: flex; flex-direction: column;}
/*#news h2{font-weight: bold; font-size: 60px; text-transform: uppercase; text-align: right;text-decoration: underline; margin-top: 37px;}*/
#news h2{font-weight: bold; font-size: 50px; text-transform: uppercase; text-align: right;text-decoration: underline; margin-top: 37px;}
#news h3{max-width: 380px; width: 100%;text-align: right;align-self: center;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-transform: uppercase;margin-top: 50px;}
#news p{max-width: 380px; width: 100%; font-size: 16px;margin-top: 20px;text-align: right;align-self: center;display: -webkit-box;-webkit-line-clamp: 8;-webkit-box-orient: vertical;overflow: hidden;line-height: 2.0em;}
#news a{position: absolute; width: 100%; height: 100%; z-index: 3; top: 0; left: 0;}

@media (max-width: 1700px){
    #agenda .owl-agenda{margin-right: 50px;}
}

@media (max-width: 1420px){
    #agenda{flex-direction: column;align-items: center;}
    #agenda .owl-agenda{width: calc(100% - 100px)}
    #agenda .owl-agenda{margin-right: 0px;}
}

@media (max-width: 1366px){
    #zoom .zoom-logo{max-width: 38%;}
    #tiles .row{height: 313px;}
    #tiles .col p, #tiles .col span{font-size: 25px;}
    #tiles .col span{font-size: 300px;}
    #tiles .col:hover span{font-size: 175px;}

    #presentation p{font-size: 25px;}
    #presentation h1{font-size: 36px;}
    #presentation{min-height: 395px;}

    #agenda{min-height: 210px;}
    #agenda .owl-agenda{max-width: 875px;}
    #agenda h2{font-size: 35px;margin-top: 21px;}
    #agenda .owl-item{height: 294px;}
    #agenda .agenda-item-container{max-width: 287px;min-width: 287px;}
    #agenda .agenda-item{max-width: 265px; height: 265px;}
    #agenda .agenda-item .text{max-width: 185px;height: 192px;}
    #agenda .date{font-size: 28px;}
    #agenda p.nom{font-size: 21px;}
    #agenda .spectacle{font-size: 14px;margin-top: 35px;}
    #agenda .text a:not(.layout-link){bottom: 21px; right: 35px;font-size: 14px;}
    #agenda .agenda-item:before{width: 24px; height: 26px; border-width: 1px 0 0 1px; left: 14px; top:35px;}
    #agenda .agenda-item:after{width: 24px; height: 26px;border-width: 0 1px 1px 0; right: 14px; bottom:56px;}
    #agenda .gotoAgenda{box-shadow: rgba(0,0,0,0.3) 3px 3px 7px;padding: 17px 35px;}

    /* Navigation */
    #agenda .owl-nav .owl-prev{left:0;margin-left: -35px;}
    #agenda .owl-nav .owl-next{right: 0;margin-right: -35px;}
    #agenda .owl-nav button i{font-size: 35px;}

    /* Effet hover */
    #agenda .agenda-item:hover{border-radius: 35px;}
    #agenda .agenda-item:hover .date{margin-top: 35px;}
    #agenda .agenda-item:hover .spectacle{margin-top: 35px;}

    #news .row{margin-top: 82px;margin-bottom: 57px;}
    #news img{max-width: 530px;}
    #news h2{font-size: 35px;}
    #news h3{max-width: 266px;}
    #news p{max-width: 266px; font-size: 12px;}
}

@media (max-width: 1200px){
    #tiles .row{height: auto;}
    #tiles .col{max-height: 400px;height: 400px;}
    #tiles .col span{font-size: 27vw;line-height: 27vw}
    #tiles .col p{font-size: 4vw;line-height: 4vw}
    #tiles .col:hover span{font-size: 20vw;}

    #agenda h2, #news h2{font-size: 6vw;}

    #news .row{flex-direction: column;}
    #news .col > div, #news h2, #news p{text-align: center;}
    #news p,#news h3{max-width: 70%;text-align: center;}

}

@media (max-width: 800px){
    #presentation p{font-size: 4vw;}
    #presentation h1{font-size: 6vw;}
    #presentation{min-height: max-content}
    #presentation > div{margin-top: 10vw;margin-bottom: 10vw;}
    #news .row{margin-top: 15vw; margin-bottom: 7vw;}
}

@media (max-width: 520px){
    /*#agenda .owl-item{height: 90vw;}*/
    /*#agenda .agenda-item-container{min-width: 0; width: 100%;}*/
    /*#agenda .agenda-item{border-radius: 50px;width: 100%; max-width: 100%; height: calc(100% - 15px); background-color: black;}*/
    /*#agenda .agenda-item::after, #agenda .agenda-item::before{opacity: 1;display: inherit;}*/
    /*#agenda .agenda-item p{color: white;font-size: 7vw;}*/
    /*#agenda .agenda-item a{display: inherit; opacity: 1}*/
    /*#agenda .agenda-item .text{height: 100%;max-width: 70%;}*/
    /*#agenda .agenda-item .date{margin-top: 50px;font-size: 8vw;}*/
    /*#agenda .agenda-item .spectacle{margin-top: 50px;font-size: 4vw;}*/
    /*#agenda .text a{font-size: 3vw;bottom: 25px;}*/

    #agenda .owl-item{height: 300px;}
    #agenda .agenda-item{border-radius: 50px;width: 100%; max-width: 100%;}
    #agenda .agenda-item-container{min-width: 0; width: 95%; height: 95%;}
    #agenda .agenda-item p{text-align: center; padding: 0 15px;}
    #agenda .agenda-item .date{font-size: 6vw;margin-top: 50px;}
    #agenda .agenda-item .spectacle{font-size: 4vw;}

    #agenda .agenda-item:hover .text{height: 274px;}
    #agenda .agenda-item:hover{background: #FAFAFA;}
    #agenda .agenda-item:hover p,
    #agenda .text a:not(.layout-link){color: black;}
    #agenda .text a:not(.layout-link){opacity: 1;display: block;font-size: 3vw;bottom: 15px;}

    /*#agenda .agenda-item:hover .date{margin-top: 0px;}*/

}

@media (max-width: 480px){
    #zoom figure img{height: 200px; object-fit: cover; object-position: top center;}
    #zoom figure img, #tiles .col img{filter: none;}

    #tiles .col{flex-basis: 100%!important;max-height: 200px;}
    #tiles .col span{font-size: 40vw;line-height: 40vw;}
    #tiles .col p{font-size: 6vw;line-height: 6vw;}
    #tiles .col img{height: 200px;object-position: top center; object-fit: cover;}
    #tiles .col:hover span{font-size: 20vw;}

    #agenda .gotoAgenda{font-size: 2.8vw;padding: 20px 30px;text-align: center;}

    #news p{max-width: 90%;font-size: 3vw;margin-top: 20px;}
    #news h3{text-align: center; font-size: 5vw;}
}