/* =============================================================================
   ROOT & BASE
   ============================================================================= */

:root {
    interpolate-size: allow-keywords;
}

main {
    margin: 0;
    padding: 0;
}

img {
    /* max-width: calc(var(--max-width) - var(--bm) * 2); */
    width: 100%;
    max-height: auto;
    height: auto;

}


/* =============================================================================
   ARTICLE — BASE
   ============================================================================= */

main article {
    --right-column-width: calc(100vw - var(--bm) * 5 - var(--section-width));
    width: 100%;
    max-width: 100% !important;
    display: grid;
    grid-template-columns: repeat(2, calc(100vw - var(--right-column-width)) 1fr);
    margin-left: 0 !important;

    section.main-content {
        margin-left: var(--article-margin);
        width: var(--max-width);
        --places-width: calc(var(--max-width) * 1 + 100vw);
        max-width: var(--places-width) !important;


        grid-column: 1;

    }

    section.right-column {
        display: flex;
        border-radius: var(--border-radius);
        flex-direction: column;
        justify-content: right;
        grid-column: 2;
        width: 100%;
        width: var(--right-column-width);
        max-width: var(--right-column-width) !important;




    }



    figure {
        margin-block: var(--bm);
    }
}


/* =============================================================================
   ARTICLE — PLACES
   ============================================================================= */

article.places {
    --section-width: 70vw;




    .swiper {
        width: 100%;

        .swiper-slide {
            max-width: var(--max-width);


            & picture {
                & img {
                    --swiper-height: 50vh;
                    object-fit: cover;
                    width: auto !important;
                    max-width: 100%;
                    height: auto !important;
                    max-height: var(--swiper-height);
                    min-height: var(--swiper-height);
                }
            }
        }
    }



}

article.places article.places aside {
    top: calc(var(--bm) * 1);
}


/* =============================================================================
   COLONNES — BASE PARTAGÉE
   ============================================================================= */

section.right-column {


    height: 100vh;
    position: sticky;
    top: 0;

    margin-top: 0;
    right: var(--bm);
    overflow-y: scroll;
    scroll-snap-align: center;
    transition:
        opacity var(--animation-duration) var(--animation-easing),
        scale var(--animation-duration) var(--animation-easing),
        filter calc(var(--animation-duration) - 400ms) var(--animation-easing);




}

section.right-column,
section.right-column>.cards {

    width: var(--right-column-width);
}


/* =============================================================================
   COLONNE — GAUCHE
   ============================================================================= */


article>*,
.related {
    transition: all var(--animation-duration) var(--animation-easing);
    opacity: 1;
    transform: none;
}

article:has(>section.right-column details[open])>.main-content,
article:has(>section.right-column details[open])+.related {

    opacity: 0;
    transform: translateX(calc(var(--bm) * 30 + var(--section-width) * -1));

}





/* =============================================================================
   COLONNE — DROITE
   ============================================================================= */

article:has(>section.right-column details[open])>.main-content {}

.right-column,
details::details-content {

    transition: all var(--animation-duration) var(--animation-easing) !important;
}

article:has(>section.right-column details[open])>.right-column {

    transition: all var(--animation-duration) var(--animation-easing) !important;
    width: 100vw;
    /* right: calc(var(--bm) * -1); */
    right: calc(100vw - var(--right-column-width) - var(--bm) * 1);
}


article.places {
    min-width: none;
    max-width: none;

    overflow-x: visible;

    .heading {
        width: 100%;
        min-width: 0 !important;
    }

    .cards {
        display: flex;
        flex-direction: column;
        gap: var(--bm);
        left: 0;
        padding-inline: 0;


        .card summary {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            gap: .2rem;
            height: 100%;

        }
    }
}


/* =============================================================================
   COLONNE — NOT IN VIEW
   ============================================================================= */

article.places .place-column:not(.in-view) {
    /* Réservé pour les styles hors-vue */
}


/* =============================================================================
   DETAILS — BASE
   ============================================================================= */

details {
    position: relative;
}

details[open] {
    background-color: var(--near) !important;
    color: white;

    img.workshop-picture {
        opacity: 0;
    }
}

details summary:hover h3,
details summary:hover span {}


/* =============================================================================
   DETAILS — CONTENU ANIMÉ
   ============================================================================= */

details::details-content {
    position: fixed;
    top: 0;
    left: calc(100vw - var(--section-width) - var(--bm) * 4);
    z-index: 999;
    display: block;
    width: var(--section-width);
    max-width: var(--section-width);
    max-height: calc(100dvh - var(--bm) * 2);
    margin: var(--bm);
    padding-inline: var(--bm);
    overflow: hidden;
    overflow-y: scroll;
    border-radius: var(--border-radius);
    background-color: var(--far-away);
    color: black;
    block-size: 0;
    transition-property: block-size, content-visibility opacity;
    transition-duration: var(--animation-duration);

    transition-behavior: allow-discrete;

    opacity: 0;

}

h1 {
    margin-top: .5lh;
    text-align: center;
}

details[open]::details-content {
    block-size: auto;
    opacity: 1;

    block-size: calc-size(auto, size);

}


/* =============================================================================
   DETAILS — THUMBNAIL AU HOVER
   ============================================================================= */

details summary:hover figure.thumbnail {
    opacity: 1;
}

details[open] summary:hover figure.thumbnail {
    opacity: 0;
}


.workshop-content {
    position: relative;
}

details:not([open]) a.button.close {
    display: none;
}

a.button.close {
    /* position: fixed;

    left: 50%;
    transform: translateX(-50%);
    margin-top: var(--bm); */

}

/* =============================================================================
   COMPOSANT — WORKSHOP
   ============================================================================= */

.workshop {
    aspect-ratio: auto !important;
    min-height: 10lh;
    background-color: white;
    transition: all var(--animation-duration) var(--animation-easing);



    p {
        max-width: 80ch;
    }

    summary {
        list-style: none;
        cursor: pointer;
        align-content: left;

        h3,
        span {
            z-index: 1;
            width: auto;
            hyphens: auto;
            text-align: center;




        }

        &:hover {
            text-decoration: underline !important;
            text-decoration-style: simple !important;
            text-underline-offset: .2em !important;
            text-decoration-thickness: .01em !important;
        }
    }

    summary::marker,
    summary::-webkit-details-marker {
        display: none !important;
    }

    figure.thumbnail {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        margin-block: 0;


        picture {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 1;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    /* .swiper {
        --swiper-height: 50vh;
        height: var(--swiper-height);
        max-height: var(--swiper-height);
        width: 100%;

        .swiper-slide {
            height: var(--swiper-height);

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }
    } */

    section.description {
        margin-block: var(--bm);
    }
}


/* =============================================================================
   COMPOSANT — LIST ITEM
   ============================================================================= */

section.list-item {
    --c-margin: calc(var(--bm) * 4);
    position: relative;

    section.subtitles {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        width: 100%;
        margin-bottom: 1rem;
    }

    img.drawing {
        position: absolute;
        top: 30%;
        left: 55%;
        width: 20%;
        mix-blend-mode: multiply;
        transition: opacity 0.3s ease-in-out;

        &:hover {
            opacity: .1;
        }
    }
}


/* =============================================================================
   COMPOSANT — SPACES (SWIPER)
   ============================================================================= */

#spaces {
    overflow-x: hidden;

    /* .swiper {
        width: 100%;
        height: 40vh;
        margin-block: var(--bm);

        .swiper-slide {
            height: 40vh;

            img {

                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    } */
}


/* =============================================================================
   RESPONSIVE — MOBILE (< 968px)
   ============================================================================= */

@media (width < 968px) {




    article>* {
        transition: opacity var(--animation-duration) var(--animation-easing);
        opacity: 1;
    }

    article:has(>section.right-column details[open])>.main-content {
        opacity: 1;
        transform: none;
        overflow-y: visible;
    }



    main article.places {
        width: 100%;
        display: block;
        max-width: none;
        min-width: none;
        padding: var(--bm);


        section.main-content {
            width: 100%;
            max-width: calc(100vh - var(--bm) * 2);
        }



        section.right-column {
            width: 100%;
            max-width: calc(100vh - var(--bm) * 2) !important;
            overflow-x: hidden;
            position: relative;
            height: fit-content;
            overflow-y: hidden;
            margin-inline: var(--bm);


            .cards {
                left: auto;
                overflow: hidden;
                height: fit-content;
                width: 100% !important;
                gap: var(--bm);
            }

            details.card.workshop {
                padding-block: var(--bm);
                width: 100% !important;
                overflow: hidden;
                min-height: 10lh;

            }

            details[open] {
                aspect-ratio: auto !important;
                height: fit-content !important;
                min-height: fit-content !important;

            }

            details,
            summary {
                width: 100%;
                box-sizing: border-box;



            }

            details[open] {
                background-color: white !important;
                color: black;
                position: sticky;
                top: 0px;



                img.workshop-picture {
                    opacity: 0;
                }
            }

            details::details-content {
                position: relative;
                top: auto;
                left: auto;
                z-index: 999;
                display: block;
                width: auto;
                max-width: calc(100vw - var(--bm) * 2);
                height: fit-content !important;

                max-height: fit-content !important;
                margin: 0;
                padding-inline: 0;
                overflow: hidden;
                overflow-y: scroll;
                border-radius: var(--border-radius);
                background-color: white;
                color: black;
                block-size: 0;
                transition-property: block-size, content-visibility opacity;
                transition-duration: var(--animation-duration);

                transition-behavior: allow-discrete;

                opacity: 1;

            }

            .list-item.workshop-content {


                padding-inline: var(--bm);
                background-color: none;

                margin-block: var(--bm);

                h1 {
                    display: none;
                }
            }

            details[open]::details-content {
                block-size: auto;
                opacity: 1;

                block-size: calc-size(auto, size);

            }

            details[open] summary {}
        }
    }



    article:has(>section.right-column details[open])>.right-column {

        transition: all var(--animation-duration) var(--animation-easing) !important;
        width: 100% !important;
        /* right: calc(var(--bm) * -1); */
        right: var(--bm);
    }





    #spaces .swiper {
        --swiper-height: 50vh;
        ;
        height: var(--swiper-height);
        width: 100%;
        left: 0;

        .swiper-slide img {
            width: 100% !important;
            height: 100% !important;
            left: 0;
            object-fit: contain;
            min-height: auto !important;
        }
    }

    .workshop .swiper.swiper-image {
        height: 100%;
        max-height: var(--swiper-height);
        width: 100%;


        margin: auto;
        padding-inline: var(--bm);

        max-width: 100%;




        .swiper-slide {
            max-width: 100% !important;
            height: 100% !important;
            align-items: center;
            width: 100%;

            picture {
                width: 100%;
                height: 100%;
                object-fit: contain;

                img {


                    width: 100%;
                    height: 100% !important;
                    min-height: auto !important;
                    object-fit: contain;

                    object-fit: cover;
                    width: 100% !important;
                    max-width: 100%;
                    height: auto !important;
                    max-height: fit-content;
                    min-height: auto;


                }
            }
        }
    }
}