/* Event & Article */
.event {
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        border-top-left-radius: 64px;
        height:380px;
}
.event-header,
.article-header {
        position: relative;
        background:#fff;
}
.event .genres,
.article .genres{
        position: absolute;
        display: flex;
        flex-wrap: wrap;
        bottom: 15px;
        left: 0px;
        max-width: 160px;
        flex-direction: column;
        align-items: start;
        gap: 2px;
}
.event-header img {
        opacity:.8;
}
.genre {
        display: inline-block;
        text-transform: uppercase;
        font-size: 13px;
        padding: 1px 7px 0px 13px;
        color: #FFF;
        font-weight: 500;
}
.event-header .lieu ,
.article-header .lieu{
        position: absolute;
        top: 16px;
        right: 16px;
}
.event-header img,
.article-header img {
        width: 100%;
        object-fit: cover;
}
.event-header img {
        height: 380px;
}
.article-header img {
        height: 200px;
}
.article-main,
.event-content {
        background-color: var(--bofema-vert-kaki);
        color: #fff;
        padding: 12px 16px;
        flex: 1;
}
.green .article-main,
.green .event-content {
        background-color: var(--bofema-vert-kaki) !important;
}
.article:hover .article-main .title,
.event:hover .event-content .title{
        /*color: #575757;*/
}
.article-main .inner-article-main{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        margin-top: -1px;
}
.article-main .inner-article-main{
        align-items: flex-end;
}
.article-main .inner-article-main .button {
        margin-top:-5px;
}
.article:hover .article-main .inner-article-main .button{
        background-color: #3f3f3f;
}

.event-content{
        position:absolute;
        bottom:0;
        left:0;
        right:0;
        display: flex;
        flex-direction: column;
        gap: 12px;
        transition: .3s ease-out;
}
.event:hover .event-content {
         padding-bottom: 50px;
 }
.event-content .genres {
        position:absolute;
        bottom:calc(100% + 20px);
}
.event-content .title,
.event-content .artists,
.event-content .event-date .date,
.event-content .event-date .hour{
        font-family: 'BD Good Wood';
        line-height: 1;
        text-transform: uppercase;
}

.event-content .title,
.article-main .title{
        font-size: 24px;
        transition: .2s color;
        font-family: 'BD Good Wood';
        line-height: 1;
        text-transform: uppercase;
}
.article-main .title{
        margin-bottom: 4px;
}
.event-content hr{
        width: 70%;
        height: 2px;
        opacity: 1;
        margin: 2px 0;
}
.event-content .artists{
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-size: 18px;
        color: var(--default-text-color);
}
.event-content .event-date{
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
}
.event-content .event-date svg {
        width: 12px;
        height: 12px;
        margin-top: -2px;
}
.event-content .event-date svg path {
        fill: #fff;
}

.event .event-header:after,
.article .article-header:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgb(255 255 255);
        opacity: 0;
        transition: opacity .3s;
}
.event:hover .event-header:after,
.article:hover .article-header:after {
        opacity: .4;
}
.event .past-event-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width:  100%;
        height: 100%;
        background-color: #C5C5C599;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: opacity .5s ease-in-out;
}
.event .past-event-overlay .past-event-text {
        padding: 16px 32px;
        text-transform: uppercase;
        background-color: #F6F6F6;
        font-family: 'BD Good Wood';
        font-size: 24px;
        color: #555555;
        opacity: 0.8;
}
.event:hover .past-event-overlay {
        opacity: 0;
}

.article {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding-top: 34px;
}
.article-main {
        background-color: #fff;
        color: var(--default-text-color);
}
.article-main .resume {
        line-height: 1.2;
        margin-top: 4px;
        font-weight: 100;
}
.article-category {
        position: absolute;
        top: 0;
        left: 0;
        padding: 4px 12px;
        font-size:16px;
        font-family: 'BD Good Wood';
        line-height: 1;
}

.lieu-container {
        position: absolute;
        top: 40px;
        left: 0;
        right: 0;
        width: 100%;
}
.lieu {
        display: flex;
        align-items: center;
        gap: 8px;
}
.lieu .title {
        position: relative;
        font-size: 18px;
        font-family: 'BD Good Wood';
        line-height: 1;
        margin-top: 2px;
        color:#fff;
}
.lieu .title:before,.lieu .title:after {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        /*background-color: var(--default-text-color);*/
        background-color:#fff;
}
.lieu .title:before {
        top: -6px;
}
.lieu .title:after {
        bottom: -6px;
}
.lieu svg {
        width: 32px;
        height: 32px;
}

/* Galeries */
.main-content.galeries {
        padding-bottom: 56px;
        margin-top: 32px;
}
.galeries .categories .category {
        margin-bottom: 32px;
}
.galeries .categories .category h2 {
        margin-bottom: 24px;
}
.galeries .categories .category:last-of-type {
        margin-bottom: 0;
}
.galeries .splide {
        cursor: grab;
}
.galeries .splide__slide img {
        height: 160px;
        width: 100%;
        object-fit: cover;
}

.media{
        position: relative;
}
.media .title {
        margin-top: 12px;
        font-family: 'BD Good Wood';
        font-size: 20px;
        line-height: 1;
}
.media .container-img{
        position: relative;
}
.media .container-img svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
}
.media .container-img .icon-play{
        width: 72px;
}
.media .container-img .icon-playlist{
        width: 80px;
}

.splide.see-next-prev .splide__slide {
        /*opacity: 0.75;*/
        transition: .1s opacity;
}
.splide.see-next-prev .splide__slide.is-visible {
        opacity: 1;
}
.splide.see-next-prev .splide__list{
        padding-right: 104px !important;
}
.splide.see-next-prev .splide__slide:last-child {
        margin-right: -104px !important;
}
.splide .splide__arrows.splide__arrows--ltr {
        position: absolute;
        top: -40px;
        right: 0;
        display: flex;
        gap: 8px;
}
.splide .splide__arrow {
        position: relative;
        inset: initial;
        transform: none;
        background: transparent;
        border-radius: 2px;
        height: initial;
        width: initial;
        padding: 8px 0px;
}
.splide .splide__arrow svg {
        height: 20px;
        width: 20px;
}

.media.flipbook ._df_button {
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin: 0;
        padding: 0;
        border-radius: 0;
        height: 160px;
        width: 100%;
}

/* Equipe */
.membres-equipe {
        padding: 50px 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
}

.carte-membre-equipe:nth-child(6n + 1) {
        background-color: #64C2C8;
}
.carte-membre-equipe:nth-child(6n + 2) {
        background-color: #DD7500;
}
.carte-membre-equipe:nth-child(6n + 3) {
        background-color: #707942;
}
.carte-membre-equipe:nth-child(6n + 4) {
        background-color: #00A783;
}
.carte-membre-equipe:nth-child(6n + 5) {
        background-color: #F8CDE2;
}
.carte-membre-equipe:nth-child(6n + 6) {
        background-color: #12ABAA;
}

.carte-membre-equipe{
        padding: 16px;
}

.carte-membre-equipe .site{
        display: inline-block;
        text-transform: uppercase;
        font-family: "Adria Slab";
        font-weight: 800;
        padding: 0 6px;
        line-height: 1.2;
        color: #fff;
}
.carte-membre-equipe .site.dijon{
        background-color: #E4032B;
}
.carte-membre-equipe .site.besancon{
        background-color: #7E3EF6;
}

.carte-membre-equipe .nom{
        font-family: "BD Good Wood";
        font-size: 24px;
        line-height: 1;
        margin: 16px 0;
}

.carte-membre-equipe .separator {
        width: 50%;
        height: 2px;
        background-color: black;
        margin-bottom: 24px;
}

.carte-membre-equipe .poste {
        text-transform: uppercase;
        margin: 16px 0;
}

/* Partenaires */
.partenaires {
        display: flex;
        flex-direction: column;
        gap: 72px;
}

.partenaires h3{
        font-size: 24px;
        margin-bottom: 24px;
}

.partenaires .partenaires-liste{
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
}

.partenaires .partenaires-liste .partenaires-liste-item{
        height: 100px;
}
.partenaires .partenaires-liste .partenaires-liste-item img{
        height: 100%;
        width: auto;
}
.partenaires .partenaires-liste + .partenaires-bloc-text {
        margin-top:40px;
}


/* LightGallery */

.lg-outer .lg-thumb-outer {
        background-color: transparent;
}
.lg-backdrop {
        background-color: #000a10e0;
}
.lg-outer .lg-thumb-item{
        border-radius: 0;
}
.lg-outer .lg-thumb-item.active,
.lg-outer .lg-thumb-item:hover {
        border-color: #0a58ca;
}
.lg-outer.lg-components-open:not(.lg-zoomed) .lg-sub-html {
        display: flex;
        flex-direction: column;
        font-family: 'BD Good Wood';
        font-size: 24px;
}
.lg-outer.lg-components-open:not(.lg-zoomed) .lg-sub-html span {
        font-size: 14px;
}
.lg-outer.lg-grab img.lg-object,
.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image {
        max-width: 70vw
}

/* Modal newsletter */
#newsletter-modal {
        display: none;
}
#newsletter-modal.active {
        display: block;
}

#newsletter-modal {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 35vw;
        border-radius: 10px;
        background-color: white;
        overflow: hidden;
        z-index: 100;
}

#newsletter-modal .close-newsletter-modal {
        position: absolute;
        top: 5px;
        right: 5px;
        padding: 6px;
        width: 40px;
        cursor: pointer;
}
#newsletter-modal .img-cover {
        width: 100%;
        height: 180px;
}
#newsletter-modal .img-cover img {
        height: 100%;
        width: 100%;
        object-fit: cover;
}
#newsletter-modal .newsletter-modal-content {
        padding: 20px 30px 30px;
}

#newsletter-modal .newsletter-modal-content > p {
        margin-bottom: 40px;
}
#newsletter-modal .newsletter-modal-content h2 {
        margin-bottom: 32px;
}
.newsletter-subscription-form .row > div {
        margin-top: 8px;
}

div.modal-overlay{
        display: none;
}
div.modal-overlay.active{
        display: block;
}
div.modal-overlay{
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #0B0B0BC6;
        z-index: 99;
}

.newsletter-subscription-form .row{
        margin-bottom: 12px;
}

.newsletter-subscription-form label {
        display: block;
        margin-bottom: 6px;
}

.newsletter-subscription-form input{
        width: 100%;
        padding: 7px;
        border: 1px solid #ddd;
        border-radius: 4px;
}
.newsletter-subscription-form p{
        max-width: none;
}

.newsletter-subscription-form .terms-and-conditions input{
        width: auto;
}

.newsletter-subscription-form .form-submit{
        background-color: #1e1f22;
        color: #fff;
}

/* Recherche */
.sub-menu-wrapper .search-form .search-icon {
        display: inline-block;
        width: 22px;
        padding: 2px;
        cursor: pointer;
}

.page-recherche .results-section{
        display: flex;
        flex-direction: column;
        margin-top: 16px;
        margin-bottom: 16px;
}
.page-recherche .results .container-inner{
        padding: 20px 0;
}
.page-recherche .results .container-inner .splide__arrows.splide__arrows--ltr{
        top: -40px;
}
.page-recherche .results h3{
        font-size: 24px;
        margin-bottom: 16px;
}
.page-recherche .results .article-main{
        padding: 10px 0;
}

/* Modal */
.modal-body .close {
        width: 24px;
        position: absolute;
        top: 12px;
        right: 12px;
        cursor: pointer;
}
.crous-modal-content h2 {
        margin-bottom: 32px;
}

/* 404 */
.no-result {
        max-width: 100%;
        width: 100%;
        text-align: center;
        background-color: #ddd;
        padding: 80px;
        font-size: 18px;
        font-weight: 700;
}
.error404 h1 {
        margin-bottom: 16px;
}
.error404 .button {
        margin-bottom: 32px;
}

/* Graphic elements */
.graphic-elements .sun{
        top: 600px;
        left: -150px;
        height: 200px;
}
.graphic-elements .sun path{
        fill: #f8cde2;
}
.graphic-elements .multiple-rectangles{
        top: 1000px;
        height: 240px;
        width: auto;
}
.graphic-elements .zig-zag{
        top: 1500px;
        left: 0;
        height: 300px;
}
.graphic-elements .confettis{
        top: 2100px;
        left: -150px;
        height: 250px;
}
.graphic-elements .cloud-dots{
        top: 3400px;
        left: -20px;
        height: 250px;
        z-index: 1;
}