:root {
    --body-margin: .5em;
    --easing: cubic-bezier(0.337, 0.457, 0.042, 0.995);
    --font-size: 16px;
    --animation-speed: 400ms;
    --tablet: 968px;
}


::selection {
    background: #ebebeb;
    color: #000000;
}


main.About,
main.Home :not(.image_description) {
    h2 {
        font-size: 2em;
        margin: 0;
        padding: 0;
    }
}

body {
    font-family: "Neue Haas Grotesk Text", sans-serif;
    margin: var(--body-margin)
}

html,
body,
section,
article {
    scroll-behavior: smooth;
}


a:hover {
    text-decoration: underline;
    text-underline-offset: .12em;
    text-decoration-thickness: .09em;
    text-decoration-color: inherit;
}


body.htmx-request a:hover {
    cursor: wait;
}

body.htmx-request:hover,
body.htmx-swapping:hover,
body.htmx-settling:hover {
    cursor: wait;
}

.htmx-request .swiper {
    opacity: 1;

}

.htmx-request #indicator svg {
    opacity: 1;
    transition: opacity 0.2s 0.2s;
}


#indicator {
    align-items: center;
    background: inherit;
    display: flex;
    inset: 0;
    justify-content: center;
    position: absolute;
    visibility: hidden;
}

#indicator svg {
    opacity: 0;
    transition: opacity .2s 0s;
}

:is(.indicator, #indicator) svg {
    animation: spin 1s infinite;
    height: 1.5rem;
    opacity: .8;
    width: 1.5rem;

}

@keyframes spin {
    to {
        transform: rotate(1turn)
    }
}


main {
    transition: all 800ms var(--easing);
    ;

}

main.About {
    transform: translateY(-100vh);
    height: 100%;
    width: 100dvw;

}

main.About>.swipers {
    height: 100vh;
}


.swipers {
    transition: all 300ms var(--easing);
    filter: blur(0px);
    opacity: 1;
}

.transitioning {

    filter: blur(10px);


}



body:has(>main.Home) {
    overflow-y: hidden;
}



main {

    input {
        display: none;
    }



    input[type="radio"] {
        display: none;
    }

    .active {
        opacity: 1 !important;
    }

    label:has(input:checked) {
        opacity: .4;
    }

    body {
        font-size: var(--font-size);
        padding: var(--body-margin) !important;
        overflow: hidden;
        display: grid;
    }

    .half:has(media-player) {
        display: block;
    }

    .vds-kb-action {
        display: none;
    }

    media-controls {
        display: none;
    }

    .vds-buffering-indicator {
        display: none;
    }

    media-player {
        /* display: flex;
        align-items: start;
        object-fit: cover;
        height: 100vh; */
        pointer-events: none;


    }


}

:where(.vds-poster) {

    display: flex !important;
    justify-content: center;
    align-items: center;
    /* width: 50vw !important; */


}

.vds-poster :where(img) {
    min-width: 50vw !important;
    height: 100% !important;
    object-fit: cover !important;
    width: auto !important;
    /* object-fit: cover !important; */

}

[data-media-player][data-layout=video]:not([data-fullscreen]) {
    border: none !important;
    border-radius: 0 !important;
    z-index: 0 !important;

}



section.about {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--body-margin) * 1);
    overflow: hidden;
    padding: var(--body-margin);
}



section.about>.menu-fixed {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2em var(--body-margin);
    position: relative;
    border-bottom: .1em solid black;


}


section.menu-fixed {
    display: block;
    background-color: white;

}

section.results {

    overflow: auto;
}

ul.tags-list {
    position: sticky;
    top: 0;
}

form {
    width: 100%;
    overflow: auto;
    position: sticky;
    top: 0;
    z-index: 1;
}

article.table#references .tags-list {

    background-color: white;
    padding: .5em;
    border-bottom: .1em solid black;
    display: flex;
    flex-direction: row;
    gap: 1em;
    width: max-content;
    min-width: 100%;

    li label {
        cursor: pointer;
    }
}


ul.tags-list li:hover {
    opacity: .4;
    cursor: pointer;
}

section.left-container {
    grid-column: 1 / 7;
    grid-template-columns: repeat(6, 1fr);
    display: grid;
    grid-template-rows: 3.5em auto max-content;
    gap: 1em var(--body-margin);
}

section.about .contacts {
    grid-column: 1 / 7;
    grid-row: 3;
    align-content: end;

}

section.about .internship {
    grid-column: 4/7;
    grid-row: 1;
    max-width: 90%;
}

section.statement.mobile {
    display: none;
}

section.statement.desktop {
    display: block;
}


section.about .right-container {
    grid-column: 7 / 13;
    grid-row: 1;
    margin-top: 1.5em;

}

h2 {}

section.results {
    h2 {
        border-bottom: .1rem solid black;
    }
}

a {
    font-size: 1em;
}



ul.cat-nav {
    display: inline-flex;
    flex-direction: row;
    gap: 2em;
    grid-row: 2;
    grid-column: 1 / -1;
    align-items: flex-end;
    transition: all calc(var(--animation-speed) * 1.5) ease-in-out .30s;
    margin: -.1em;
}

@media (960px <=width <=1400px) {
    ul.cat-nav {
        gap: 1vw;

    }

}

ul.cat-nav.right {
    position: absolute;
    left: 100vw
}

ul.cat-nav {

    li {
        opacity: .4;
    }

    a {

        font-size: 2em;
        text-decoration: none;

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



ul.cat-nav input:checked+label>a {
    opacity: .4;
}

section.menu {

    grid-column: 1 / 13;
}

section.results .table-row {

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    border-top: .1em solid black;
    gap: 1em;
    padding: .5em 0;
    box-sizing: border-box;
}

section.results .table-row:first-child {
    border-top: none !important;
}

section.results article#references .table-row:first-child {
    border-top: none !important;
}

article.table {
    padding-bottom: 2em;
    scroll-behavior: smooth;
}

article.table>section>.table-row {
    padding: .5em 0;
}

section#references-results.htmx-swapping {
    opacity: 0;
}

section#references-results {
    transition: opacity .2s ease-in-out;
    opacity: 1;
    display: block;
    position: relative;
}

article.table .table-row {

    :nth-child(1) {
        grid-column: 1/2;
    }

    :nth-child(2) {

        grid-column: 2/7;
    }

    :nth-child(3) {

        grid-column: 7/9;
    }

    :nth-child(4) {
        grid-column: 12/13;
    }
}


article.table .table-row {



    :nth-child(1) {

        grid-column: 1/2;
    }

    :nth-child(2) {

        grid-column: 2/6;
    }

    :nth-child(3) {

        grid-column: 6/12;
    }

    :nth-child(4) {

        grid-column: 12/13;
    }
}


article.table .table-row {

    :nth-child(1) {

        grid-column: 1/3;
    }

    :nth-child(2) {

        grid-column: 3/7;
    }

    :nth-child(3) {

        grid-column: 7/11;
    }

    :nth-child(4) {
        grid-column: 12/13;
    }
}


article.table#credits {

    padding-top: 1em;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
    height: 100%;

    p {
        margin-bottom: 1rem;
    }

    :nth-child(1) {
        grid-column: 1/ 2;
    }

    :nth-child(2) {
        grid-column: 2/3;
    }

}

ul.cat-nav.desktop {

    visibility: visible;
}

ul.cat-nav.mobile {
    display: none;
    visibility: hidden;
}


.desktop-links,
.desktop-thumbnails {
    display: inline;
    background-color: transparent;
    opacity: 1;
}

.mobile-links,
.mobile-thumbnails {
    background-color: red;
    opacity: .2;
    display: none;
}

@media (max-width: 968px) {

    .desktop-links,
    .desktop-thumbnails {
        background-color: red;
        opacity: .2;
        display: none;
    }

    .mobile-links,
    .mobile-thumbnails {
        display: inline;
        background-color: transparent;
        opacity: 1;
    }
}






main.Home>.about {
    display: none;

    transition: display 1000ms ease-in-out allow-discrete;


}


@starting-style {
    main.About>.about {
        opacity: 0;
    }
}


@media (width <=968px) {

    body.home {
        position: fixed;
        overflow-y: hidden;
    }

    html:has(body.about>main.About) {
        overflow: hidden
    }

    .swiper-wrapper {
        height: 100dvh !important;
        overflow-y: hidden !important;
        position: fixed;
    }

    .swiper-image_description.left {
        width: 100%;
    }

    .swiper-mobile .swiper-slide {
        /* height: 100dvh; */
        height: 100vh;
    }

    .swiper-image_description.right {
        display: none;
    }


    main article.table#credits>section {
        padding-bottom: 1em;
    }

    section.about>.menu-fixed {
        display: grid;
        z-index: 300;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1em;

        .left-container {
            grid-column: 1 / 3;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: auto auto auto;
            gap: 0 1em;
            grid-row: 2;
            padding-bottom: 1.5em;
        }



        section.statement.desktop {
            display: none;
        }

        section.statement.mobile {
            display: block;

            left: 50%;
            position: relative;
            width: 50%;
        }

        .right-container {
            grid-column: 1 / 3;
            margin-top: 0;
            grid-row: 1;


            section.informations {
                margin-top: 1.5em;

            }
        }


    }

    section.about .contacts {
        grid-column: 1 / 2;
        grid-row: 2;
        align-content: start;
        font-size: .5rem;


        div.social {
            display: flex;
            gap: 3em;
        }
    }

    section.about .internship {
        grid-column: 2 / 3;
        align-content: start;
        z-index: 20000;
        grid-row: 2;
        max-width: 100%;
    }




    ul.cat-nav {

        grid-row: 3;
    }


    section.results>article#references .table-row {
        grid-template-columns: repeat(6, 1fr);

        :nth-child(1) {
            grid-column: 1 / 2;
        }

        :nth-child(2) {
            grid-column: 2 / 4;
        }

        :nth-child(3) {
            grid-column: 4 / 7;
        }

        :nth-child(4) {
            display: none;
            grid-column: 12 / 13;
        }
    }

    section.results>article:not(#references) .table-row {
        grid-template-columns: repeat(6, 1fr);


        :nth-child(1) {
            grid-column: 1 / 3;
        }

        :nth-child(2) {
            grid-column: 3 / 7;
        }

        :nth-child(3) {
            display: none;
            grid-column: 4 / 7;
        }

        :nth-child(4) {
            display: none;
            grid-column: 12 / 13;
        }
    }

    main article.table#credits {
        display: flex;
        flex-direction: column;

    }

    ul.cat-nav {

        flex-wrap: wrap;
        transform: none !important;
        gap: .3rem 1em;
        position: sticky;

        height: 100%;
    }

    ul.cat-nav.right {
        display: none;
    }

    article.table {
        position: relative;
    }



    #references form {
        top: calc(5.75em);
        overflow-x: scroll;

        >ul {
            transition: all 100ms ease-in-out;
        }

        >ul.fixed {
            padding-left: 9em !important;

        }


    }

    ul.cat-nav.desktop {
        display: none;
        visibility: hidden !important;
    }

    ul.cat-nav.mobile {
        position: sticky;
        top: calc(1.5em);
        box-shadow: -0px -2em 0px 0px rgba(255, 255, 255, 1);
        -webkit-box-shadow: -0px -2em 0px 0px rgba(255, 255, 255, 1);
        -moz-box-shadow: -0px -2em 0px 0px rgba(255, 255, 255, 1);
        height: auto;
        background-color: rgb(255, 255, 255);
        visibility: visible;
        display: flex;
        z-index: 200;
        border-bottom: .1em solid black;
    }


    section.about {

        height: 100dvh;
        overflow: scroll;


    }

    body:has(>main.About) {
        /*   */
    }

    main.About {

        /* height: 200vh; */

    }

    section.about {

        height: 100dvh;

        overflow: scroll;

    }

    section.about>.menu-fixed {
        border-bottom: 0em solid black;
    }


    section.results {
        height: auto;
        overflow: visible;
        padding-top: .5em;
    }


    article.table {
        /* scroll-margin-top: 6.25em; */
        /* ajuste la valeur selon ton besoin */

    }

    ul.cat-nav.mobile li:has(a:hover) {

        opacity: 1 !important;



    }

    .cat-nav.mobile li.main-cat a:hover {
        opacity: 1 !important;

        cursor: pointer;
    }

}


@view-transition {
    navigation: auto;
}

body.about {
    view-transition-name: bodyAbout;
}

body.home {
    view-transition-name: bodyHome;
}


@keyframes move-out {
    from {
        transform: translateY(0%);
    }

    to {
        transform: translateY(-100%);
    }
}

@keyframes move-down {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0%);
    }

}

@keyframes move-in {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0%);
    }
}

@keyframes move-up {
    from {
        transform: translateY(0%);
    }

    to {
        transform: translateY(100%);
    }
}

@keyframes opacity {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


/* De About à Home */
::view-transition-old(bodyAbout) {
    animation: move-up 0.8s var(--easing) forwards;
}


::view-transition-new(bodyHome) {
    animation: move-down .8s var(--easing) forwards;
}

/* De Home à About */
::view-transition-new(bodyAbout) {
    animation: move-in 0.8s var(--easing) forwards;
}

::view-transition-old(bodyHome) {
    animation: move-out 0.8s var(--easing) forwards;
}

@media (width <=968px) {
    section.about>.menu-fixed {
        .left-container {
            display: grid;
            grid-template-columns: 1fr;

            flex-direction: column;
            gap: 1em;

        }

        .contacts,
        .internship {
            grid-column: 1 / 1;

        }

        .contacts {
            grid-row: 1;

        }

        .internship {
            grid-row: 2;

        }
    }

    @view-transition {
        navigation: auto;
    }



    /* De About à Home */
    ::view-transition-old(bodyAbout) {
        animation: move-up 0.8s var(--easing) forwards;
    }


    ::view-transition-new(bodyHome) {
        animation: opacity 1.2s var(--easing) forwards !important;
    }

    /* De Home à About */
    ::view-transition-new(bodyAbout) {
        animation: move-in 0.8s var(--easing) forwards;
    }

    ::view-transition-old(bodyHome) {
        animation: move-out 0.8s var(--easing) forwards;
    }
}