/* ----------------------------------
   LIGHTBOX
---------------------------------- */

.kj-lightbox{
    display:none;

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.9);

    z-index:99999;

    flex-direction:column;
    justify-content:center;
    align-items:center;

    padding:20px;
}

.kj-lightbox.active{
    display:flex;
}


/* ----------------------------------
   CONTENEUR PRINCIPAL
---------------------------------- */

.kj-main{

    display:flex;
    flex-direction:column;

    margin:auto;

    max-width:90vw;
}

/* ----------------------------------
   MÉDIA
---------------------------------- */

.kj-lightbox-content{

    width:auto;

    height:85vh;

    display:flex;
    justify-content:center;
    align-items:center;
}

.kj-lightbox-content img{

    max-width:100%;
    max-height:95%;

    width:auto;
    height:auto;

    object-fit:contain;
}

.kj-lightbox-content iframe{

    width:min(90vw, 1400px);

    height:min(78vh, 800px);

    border:0;
  aspect-ratio:16/9;
  height:auto;
}


/* ----------------------------------
   INFOS
---------------------------------- */

.kj-lightbox-info{

    width:100%;

    margin-top:8px;

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    gap:40px;
}

.kj-info-text{

    flex:1;
}

.kj-info-button{

    flex-shrink:0;
}


/* ----------------------------------
   TITRE
---------------------------------- */

.kj-title{

    margin:0 0 12px;

    color:#fff;
}


/* ----------------------------------
   DESCRIPTION
---------------------------------- */

.kj-description{

    color:#fff;

    line-height:1.6;

    margin:0;
}

.kj-description p:first-child{
    margin-top:0;
}

.kj-description p:last-child{
    margin-bottom:0;
}

.kj-description a{

    color:inherit;

    text-decoration:underline;
}


/* ----------------------------------
   BOUTON
---------------------------------- */

.kj-site-link{

    display:inline-block;

    color:#fff;

    text-decoration:none;

    border:1px solid #fff;

    padding:10px 18px;

    border-radius:4px;

    white-space:nowrap;
}

.kj-site-link:hover{

    background:#fff;

    color:#000;
}


/* ----------------------------------
   FLÈCHES
---------------------------------- */

.kj-prev,
.kj-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    color:#fff;

    font-size:60px;

    cursor:pointer;

    user-select:none;

    z-index:999999;

    padding:20px;
}

.kj-prev{
    left:20px;
}

.kj-next{
    right:20px;
}

.kj-prev:hover,
.kj-next:hover{
    opacity:.7;
}


/* ----------------------------------
   FERMETURE
---------------------------------- */

.kj-close{

    position:absolute;

    top:40px;
    right:30px;
    color:#fff;

    font-size:40px;

    cursor:pointer;
}


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

@media(max-width:768px){

    .kj-lightbox-content{
        height:60vh;
    }

    .kj-lightbox-info{

        flex-direction:column;

        gap:20px;
    }

    .kj-info-button{
        width:100%;
    }

    .kj-site-link{
        width:100%;
        text-align:center;
    }

}
/* ----------------------------------
   MASONRY
---------------------------------- */
  .kj-masonry {
        columns: 3;
        column-gap: 0px;
    }

    .kj-item {
        break-inside: avoid;
        margin-bottom: 0px;
        position: relative;
    }

    .kj-item img {
        width: 100%;
        height: auto;
        display: block;
    }

    .kj-video-icon {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: rgba(0,0,0,.7);
        color: white;
        font-size: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    @media(max-width:980px){
        .kj-masonry {
            columns: 2;
        }
    }

    @media(max-width:767px){
        .kj-masonry {
            columns: 1;
        }
    }