@charset "UTF-8";

/* ===== PAGE ŒUVRE ===== */

/* FIX SCROLL */
html, body {
    overflow-y: auto !important;
    height: auto !important;
}

/* CONTENEUR GLOBAL */
.page-oeuvre .global{
    height: auto !important;
    min-height: 100vh;
    overflow: visible;
}

/* WRAP PRINCIPAL */
.page-oeuvre .oeuvre-wrap{
    position: relative;
    width: 100%;
    margin-top: 50px;
    padding-bottom: 60px;
}

/* MEDIA */
.page-oeuvre .oeuvre-media{
    width:100%;
    max-width:100%;
}

.page-oeuvre .oeuvre-media img{
    display:block;
    width:100%;
    height:auto;
}

/* CONTENT */
.page-oeuvre .oeuvre-content{
    display:flex;
    flex-direction:column;
    gap:24px;
    min-width:0;
}

/* THUMBS */
.page-oeuvre .oeuvre-thumbs{
    display:none;
}

.page-oeuvre .oeuvre-thumbs img{
    display:block;
    width:92px;
    height:92px;
    object-fit:cover;
    cursor:pointer;
    opacity:.6;
    transition:opacity .3s ease, transform .3s ease;
}

.page-oeuvre .oeuvre-thumbs img:hover{
    opacity:1;
    transform:scale(1.03);
}

.page-oeuvre .oeuvre-thumbs img.active{
    opacity:1;
    outline:1px solid #232222;
    outline-offset:0;
}

.page-oeuvre .oeuvre-links{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:8px;
    width:100%;
}

.page-oeuvre .oeuvre-link-row{
    width:100%;
    border-top:1px solid #232222;
    border-bottom:1px solid #232222;
    padding:10px 0;
}

.page-oeuvre .oeuvre-link-row a{
    display:block;
    width:100%;
}

/* MOBILE */
@media (max-width:421px){
    html,
    body{
        padding:16px !important;
        box-sizing:border-box;
    }

    .page-oeuvre .global{
        margin:0 auto !important;
        min-height:calc(100vh - 32px);
        height:auto !important;
    }

    .page-oeuvre .oeuvre-layout{
        display:flex;
        flex-direction:column;
        gap:24px;
    }

    .page-oeuvre .oeuvre-media{
        width:100%;
        max-width:100%;
    }

    .page-oeuvre .oeuvre-thumbs{
        display:none;
    }
}

/* TABLET */
@media (min-width:421px) and (max-width:899px){
    .page-oeuvre .oeuvre-layout{
        display:grid;
        grid-template-columns:minmax(340px, 520px) minmax(240px, 320px);
        gap:40px;
        align-items:start;
    }

    .page-oeuvre .oeuvre-media{
        width:100%;
        max-width:520px;
    }

    .page-oeuvre .oeuvre-thumbs{
        display:grid;
        grid-template-columns:repeat(4, 92px);
        gap:14px;
        width:100%;
        max-width:100%;
        margin-top:18px;
        align-content:start;
    }
}

/* DESKTOP */
@media (min-width:900px){
    .page-oeuvre .oeuvre-layout{
        display:grid;
        grid-template-columns:520px 320px;
        gap:40px;
        align-items:start;
    }

    .page-oeuvre .oeuvre-media{
        width:520px;
        max-width:520px;
    }

    .page-oeuvre .oeuvre-thumbs{
        display:grid;
        grid-template-columns:repeat(4, 92px);
        gap:14px;
        width:520px;
        max-width:520px;
        margin-top:18px;
        align-content:start;
    }
}


/* LIGHTBOX */
.page-oeuvre dialog#lightbox{
    padding:0 !important;
    border:0 !important;
    outline:none !important;
    box-shadow:none !important;
    background:transparent !important;
    max-width:none !important;
    max-height:none !important;
}

.page-oeuvre dialog#lightbox::backdrop{
    background:rgba(0,0,0,.88) !important;
}

.page-oeuvre #lightbox > div{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:24px !important;
    max-width:92vw !important;
    max-height:92vh !important;
}

.page-oeuvre #lightbox-img{
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:calc(92vw - 48px) !important;
    max-height:calc(92vh - 48px) !important;
    object-fit:contain !important;
    border:0 !important;
    outline:none !important;
    box-shadow:none !important;
}

.page-oeuvre dialog#lightbox:focus,
.page-oeuvre dialog#lightbox:focus-visible,
.page-oeuvre #lightbox-img:focus,
.page-oeuvre #lightbox-img:focus-visible{
    outline:none !important;
    box-shadow:none !important;
}


/* LIENS — STYLE CADRE */
.page-oeuvre .oeuvre-link-row{
    border:none !important;
    padding:0 !important;
}

.page-oeuvre .oeuvre-link-row a{
    display:block;
    width:100%;
    text-decoration:none;
    color:#232222;
    letter-spacing:.3em;
    padding:14px 18px;
    border:1px solid #232222;
    margin-bottom:16px;
}


/* HOVER LIENS DESKTOP UNIQUEMENT */
@media (min-width:900px){
    .page-oeuvre .oeuvre-link-row a:hover{
        color:#503723;
        border-color:#503723;
    }
}