:root {
    --body-margin: 10px;
}

::selection {
    background: black;
    color: white;
}

h2 {
    font-size: 8rem;
    line-height: .8;
    margin-top: var(--body-margin);
}




html,
body {
    font-family: "Neue Haas";
    height: 100%;
    line-height: .9;
    letter-spacing: -0.005em;
    margin: 0;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
}


.swiper {
    height: 100dvh;
}

.swiper-wrapper {
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.page.album__release .informations {
    -webkit-user-select: none;
    user-select: none;
}



section.page {
    height: 100dvh !important;
    box-sizing: border-box;
    scroll-snap-align: center;
    /* plutôt que center */
}

section.introduction {
    width: 100%;
    padding: var(--body-margin);


    h1 {
        -webkit-user-select: none;
        user-select: none;
        font-size: 17.5dvw;
        padding-top: 2.5rem;
        line-height: .75;
        display: flex;
        flex-direction: row;
        width: calc(100dvw - (var(--body-margin) * 2));
        justify-content: space-between;
    }


}

section.album__release {
    position: relative;

    .informations {
        color: white;
        width: 100%;
        display: flex;
        position: absolute;
        justify-content: space-between;
        padding: var(--body-margin);

    }
}

section.album__release,
section.full__image {


    picture {
        min-width: 100dvw;
        min-height: 100dvh;
        object-fit: cover;

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

        }
    }


}

section.concert__tour,
section.content__more {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--body-margin);

    justify-content: space-between;
    padding: calc(var(--body-margin));

    p {
        grid-column: span 5;
        height: fit-content;

    }

    div.tour__container {

        height: fit-content;
        grid-column: 8 /span 5;

        h3 {
            margin-bottom: 1rem;
        }

        div.concert__item {
            display: flex;
            flex-direction: row;


            gap: calc(var(--body-margin));

            .concert__date {

                min-width: 10ch;

            }


            .concert__city {
                min-width: 10ch;
            }

            .concert__place {

                a {
                    color: inherit;
                    text-decoration: none;
                }
            }
        }




    }
}

section.content__more {
    .content__more_inner {
        grid-column: 9 / span 3;
        display: flex;
        flex-direction: column;
        gap: calc(var(--body-margin) * 2);
        justify-content: flex-end;

        a {
            color: inherit;
            text-decoration: none;
            text-decoration-thickness: .05rem;
            text-underline-offset: .1rem;
        }
    }
}

section.listen {
    position: fixed;
    bottom: var(--body-margin);
    z-index: 9999;
    transition: all 0.1s ease-in-out;
    left: var(--body-margin);

    a {
        color: inherit;

        text-decoration: none;
    }
}

section.listen.white {
    color: white;
}

@media (width < 868px) {

    a {
        text-decoration: none;
        font-size: 19px;
        line-height: 1;
        color: inherit;
    }

    section.introduction {
        h1 {
            font-size: 17vw;
            padding-top: 0;
            margin-top: var(--body-margin);
        }
    }



    section.album__release {
        div.informations {

            flex-direction: column;

            h2 {
                /* color: black; */
                font-size: 17vw;
            }

            h2:first-of-type {
                height: 40dvh;
            }
        }
    }

    section.concert__tour,
    section.content__more {

        display: flex;
        flex-direction: column;

        justify-content: flex-start;

        p,
        h2,
        div {
            grid-column: span 12;
            font-size: 19px;
            line-height: 1;


        }

        div.tour__container {
            grid-column: span 12;

            .items_container {
                columns: 2;


            }

            div.concert__item {
                flex-direction: column;
                margin-bottom: 1em;
                gap: 0;
                break-inside: avoid;
                /* empêche la coupure */
                page-break-inside: avoid;
                -webkit-column-break-inside: avoid;
            }
        }


    }

    section.content__more {
        justify-content: flex-end;

        padding: calc(var(--body-margin));
        padding-bottom: calc(var(--body-margin) + 2.4em);
    }





}