/* ---------- Language Menu ---------- */

.navContainer {
    --button-size: 3vw;

    width: calc(4*var(--button-size));
    border: none;
    padding: 0;
    padding: 2vw;
    margin: 0;
    /*display: flex;
    justify-content: space-evenly;*/
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;

    button {
        height: var(--button-size);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: calc(var(--button-size)/2.5);
    }

    .roundButton {
        width: var(--button-size);
        height: var(--button-size);
        font-size: calc(var(--button-size)/2.5);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        font-weight: 600;
        box-sizing: border-box;
        background-color: transparent;
        /* background-color: var(--color2--whitish);
        border: solid 2px var(--color-dark-blue); */
        border: none;

        /* border: solid 2px var(--color-accent-1) ;
        color: var(--color-dark-blue); */
        img {
            height: 100%;
            filter: drop-shadow(var(--shadow-default));

        }

    }
}

#languageSelectionContainer {
    grid-column: 1/3;
    grid-row: 1/4;
    z-index: 10;
}

#languageSelectionId {
    input[type="radio"] {
        /* Add if not using autoprefixer */
        -webkit-appearance: none;
        appearance: none;
        margin: 0;
    }

    label {
        border: solid 2px var(--color-accent);
        color: var(--color2--whitish);
        background-color: var(--color-dark-blue-transparent);
        box-shadow: var(--shadow-default);
    }


    input[type="radio"]:not(:checked)+label {
        animation: languages-background-deactivate var(--animation-duration) ease-out;
    }

    input[type="radio"]:checked+label {
        animation: languages-background-activate var(--animation-duration) ease-out;
        background-color: var(--color-accent);
        color: var(--color2--whitish);
    }
}

@keyframes languages-background-activate {
    from {
        background-color: var(--color-dark-blue-transparent);
    }

    to {
        background-color: var(--color-accent);
    }
}

@keyframes languages-background-deactivate {
    from {
        background-color: var(--color-accent);
    }

    to {
        background-color: var(--color-dark-blue-transparent);
    }
}

#helpAndOtherPagesContainer {
    grid-column: 20/25;
    grid-row: 1/4;
    justify-self: right;
    color: var(--color-dark-blue);

    svg {
        height: 100%;
        width: 100%;
    }

    #creditsNavId {
        border: none;
        font-size: 1.8em;
    }

    button {
        z-index: 7;
        padding: 0;
    }

    #mainMenuButtonId {
        z-index: 10;
    }

    .roundButton {
        box-shadow: none;
    }
}



/* ---------- main Menu Section  ---------- */


.mainMenuSection {
    margin-left: 60px;
    grid-column: 14/25;
    grid-row: 6/18;
    z-index: 5;
    background-color: transparent;
    margin: 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: var(--color2--whitish);
    font-family: 'Cinzel', 'serif';
    text-shadow: 0 4px 6px #0000006d;

    h1 {
        font-size: 4.8rem;
        /*9rem*/
        margin: 0;
        font-weight: bold;
        line-height: 0.8em;
        font-family: 'Cinzel', 'serif';
        text-shadow: 0 4px 6px #0000006d;
    }

    h2 {
        min-width: 10rem;
        font-size: 3.3rem;
        margin: 0;
        font-weight: 400;
        border-bottom: solid 5px var(--color-accent);
        text-align: center;
        box-shadow: 0 4px 6px -6px #0000006d;
        margin-bottom: 5rem;
    }

    /* &:before {
        content: '';
        line-height: 0;
        font-size: 0;
        width: 0;
        height: 0;
        border-bottom: 100vh solid var(--color-dark-blue);
        border-left: calc(100vw/12) solid transparent;
        position: absolute;
        left: calc(500vw/12);
        z-index: 6;
    }*/

    #mainMenuNav {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        z-index: 10;
        height: calc(500vh/12);

        button {
            background-color: var(--color-dark-blue);
            color: var(--color2--whitish);
            border: solid 1px var(--color-grey);
            height: calc(100vh/8);
            width: calc(100vw/3);
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            box-shadow: var(--shadow-default);
            border-radius: 1vh;

            div {

                text-align: left;
                margin: 0;
            }

            h3 {
                font-size: 2rem;
                font-weight: 600;
                margin: 0;
                margin-left: 2rem;
            }

            p {
                font-size: 1.4rem;
                font-weight: 400;
                margin: 0;
                color: var(--color-grey);
            }

            img {
                height: 66%;
                margin: 0 calc(100vh/48) 0 calc(100vh/48);
                /* Version avec les bulles */
                /* margin: 0 calc(100vh/48) 0 calc(100vh/48);
                    border: var(--color-grey) 1px solid;
                    border-radius: 50%;
                    padding: 1em;
                    background-color: #bdbdbd30; */

            }

            svg {
                transform: scale(2.6);
                height: 20%;
                width: 10%;
                padding: 2.6%;
            }
        }
    }
}

/* ----------- OVERLAY ARTICLES -----------*/
/* For credits, help, zodiac intro*/
#overlayArticleBlur {
    grid-column: 1/25;
    grid-row: 1 /25;
    z-index: 8;
    backdrop-filter: blur(5px);
    background-color: var(--color-dark-blue-very-transparent);
}

.closeArticleButton {
    --height-close-button: 3em;
    position: sticky;
    z-index: 2;
    top: 0;
    left: 100%;
    height: var(--height-close-button);
    width: var(--height-close-button);
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(var(--shadow-default));

    svg {
        width: inherit;
        height: inherit;
        fill: #a0a0a0;
    }
}


.articleContainer {
    grid-column: 6/20;
    grid-row: 4/22;
    z-index: 9;
    display: block;
    padding-top: 0.5em;

    .closeArticleButton {
        padding-right: 0.5em;
    }

    .article {
        margin: 0 10em 2em 10em;
    }

    background-color: #163459;
    scrollbar-color: #676767 #163459;

    h1:before {
        background-color: var(--color-accent);
    }


    overflow-y: auto;
    color: var(--color2--whitish);

    h1 {
        &:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 75px;
            height: 5px;
            /*background-color: var(--color-accent-1);*/
        }

        margin: 0.3em 0;
        padding-top: 0.3em;
        /*font-family: "Amiri",
        serif;*/
        font-size: 2.3em;
        font-weight: normal;
        position: relative;
        /*For positionning before pseudo-element*/
    }

    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: 1.3em;
        margin: 1.2em 0 0.8em 0;
    }

    .article>p {
        font-size: 1.2em;
        margin: 0.8em 0;
        line-height: 1.55em;

        img {
            max-width: 100%;
            height: auto;
        }
    }

    scrollbar-width: thin;
}



/* -------- Side article ------------------*/

#toursArticleContainerId {
    grid-column: 19/25;
    grid-row: 5 / 23;
}

/* -------- Voyager Fade between scenes ------------------*/

.fadeOutVoyagerSceneChange {
    background-color: var(--color-dark-blue);
    animation: fade-in var(--animation-duration) ease-in;
}

.fadeInVoyagerSceneChange {
    background-color: var(--color-dark-blue);
    animation: fade-out var(--animation-duration) ease-in;
    opacity: 1;
}

/* ------------ History Page --------------*/

#timeline {
    z-index: 5;
    grid-row: 21/23;
    grid-column: 4/17;
    display: flex;
    align-items: center;
    justify-content: stretch;
    margin: 0;
    padding: 0;

    button {
        /* height: 100%; */
        flex-grow: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        border-radius: 0;
        /* border: none; */
    }


}

#stepsButtonsContainerId {
    grid-row: 7/17;
    grid-column: 2/5;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    button {
        width: 100%;
        min-height: calc(100vh/12);
    }
}

button.current_step {
    background-color: var(--color-accent);
    color: var(--color-dark-blue);
}


/*-------- History introduction -----------*/

#introGoButton {
    grid-row: 21/23;
    grid-column: 10/14;
    background-color: var(--color-accent);
    color: var(--color-dark-blue);
}

/* ----------- Pop up scene --------------*/

#popupSceneContainer {
    grid-column: 3/23;
    grid-row: 3/23;
    position: relative;

    iframe {
        width: 100%;
        height: 100%;
        border: none;
        position: absolute;
        top: 0;
        left: 0;
    }
}

/* ----------- Scroll page --------------*/


#tourTextContainer {
    z-index: 5;
    grid-row: 1/25;
    grid-column: 19/25;
    overflow-y: auto;
    /* padding: 0; */

    >div {
        min-height: 30vh;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
        border-left: 0.25rem solid transparent;
        border-bottom: 0.25rem solid transparent;
        box-sizing: border-box;

        /* h1 {
            margin-top: 1rem;
            margin-bottom: 1rem;
            position: relative;

            &::before {
                content: "";
                background-color: transparent;
                margin-left: -1rem;
                margin-top: -3px;
                margin-bottom: -3px;
                height: calc(100% + 6px);
                border-width: 0;
                display: block;
                position: absolute;
                width: calc(1rem - 3px);
            }

            span {
                outline: 3px transparent solid;
            } */



        h1 {
            margin-top: 1rem;
            margin-bottom: 1rem;
            position: relative;

            &::before {
                content: "";
                background-color: transparent;
                margin-left: -1rem;
                margin-top: -3px;
                margin-bottom: -3px;
                height: calc(100% + 6px);
                border-width: 0;
                display: block;
                position: absolute;
                width: calc(1rem - 3px);
            }

            span {
                outline: 3px transparent solid;
            }
        }

        /* border: 2px var(--color-ochre) solid; */
        &::after {
            content: '';
            display: block;
            width: 40%;
            align-self: center;
            border-bottom: var(--color-accent) 3px solid;
            flex-grow: 1;
        }

        &:nth-last-child(2) {
            &::after {
                content: none;
            }
        }

        &.current {
            border-color: var(--color-accent);
            transition: border 0.75s;

            /* size of the corners */
            mask: conic-gradient(#e51313 0 0) padding-box,
                conic-gradient(at top calc(2rem - 3px) left 0.25rem, transparent 180deg, black 180deg, black 270deg, transparent 270deg);

            h1 {
                span {
                    background-color: var(--color-accent);
                    color: contrast-color(var(--color-accent));
                    outline: 3px var(--color-accent) solid;
                    transition: background-color 0.75s,
                        outline-color 0.75s;
                }

                &::before {
                    transition: background-color 0.75s;
                    background-color: var(--color-accent);
                }
            }

        }


        &#scrollMarginDiv {
            height: 50%;

            &::after {
                content: none;
            }
        }
    }

}




/* Nouvelle charte graphique */


button {
    font-family: "Cinzel";
    color: var(--color2--whitish);
    font-weight: 500;
}

#introGoButton {
    font-size: var(--font-size-2);
    line-height: var(--line-height-2);
    letter-spacing: var(--letter-space-2);
}

#mainMenuNav {
    svg {
        transform: scale(2.6);
        height: 20%;
        width: 10%;
        padding: 2.6%;
        stroke-linecap: square;
        stroke-linejoin: miter;
        stroke-width: 1.6;
    }
}

#languageSelectionId {
    label {
        border: solid 2px var(--color2--whitish);
        border-width: 4px;
    }
}

.mainMenuSection {
    grid-row: 6/20;

    h1 {
        background-color: var(--color-accent);
        border-width: 0.5rem;
        corner-shape: scoop;
        border-radius: 2rem;
        border-style: solid;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 33vw;
        height: 10rem;
        font-size: var(--font-size-5);
        line-height: var(--line-height-5);
        letter-spacing: var(--letter-space-5);
        font-weight: 600;
    }

    #mainMenuNav {
        justify-content: space-evenly;

        button {
            width: 25vw;
            border-width: 0.33rem;
            corner-shape: bevel;
            border-radius: 1.33rem;
            border-style: solid;

            h3 {
                font-size: var(--font-size-2);
                line-height: var(--line-height-2);
                letter-spacing: var(--letter-space-2);
                font-family: "Cinzel";
                font-weight: 600;
            }
        }
    }
}

#stepsButtonsContainerId {
    grid-row: 5 / 21;
    grid-column: 2 / 5;
    justify-content: center;
    gap: calc(100vh / 12);

    button {
        width: 100%;
        min-height: calc(100vh/12);
        corner-shape: bevel;
        border-width: 0.33rem;
        border-color: var(--color2--whitish);
        border-style: solid;
        border-radius: 0.8rem;
    }
}

#timeline {
    grid-row: 22/24;
    grid-column: 3/19;

    button {
        flex-grow: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: var(--font-size-2);
        line-height: var(--line-height-2);
        letter-spacing: var(--letter-space-2);
        border-radius: 0;
        border-style: inherit;

        &:last-of-type {
            font-size: var(--font-size-1);
            line-height: var(--line-height-1);
            letter-spacing: var(--letter-space-1);
        }
    }

    button.current_step {
        border-image-source: url(../assets/border-images/brique_vertical_borders_4_selected.png);
    }
}

.timelineEnd {
    box-sizing: border-box;
    border-image-repeat: repeat round;
    /* pointer-events: none; */
}

#timelineLeftEnd {
    border-image-source: url(../assets/border-images/brique_vertical_borders_4_left_end.png);
    width: calc(48px * 3);
}

#timelineRightEnd {
    border-image-source: url(../assets/border-images/brique_vertical_borders_4_right_end.png);
    width: calc(48px * 3);
}

.simpleButton {
    corner-shape: bevel;
    border-width: 0.33rem;
    border-color: var(--color2--whitish);
    border-style: solid;
    border-radius: 0.8rem;
    font-size: var(--font-size-1);
    line-height: var(--line-height-1);
    letter-spacing: var(--letter-space-1);

    span {
        flex-grow: 1;
    }

    svg {
        transform: scale(2.6);
        height: 20%;
        width: 10%;
        padding: 2.6%;
        stroke-linecap: square;
        stroke-linejoin: miter;
        stroke-width: 1.6;
    }
}

#historyPageTitle {
    grid-row: 2/4;
    grid-column: 6/18;
    z-index: 2;
    display: flex;
    align-content: center;
    justify-content: center;
    font-family: "Cinzel";
    font-size: var(--font-size-3);
    line-height: var(--line-height-3);
    letter-spacing: var(--letter-space-3);
    margin: 0;
    color: var(--color2--whitish);
    font-weight: 500;
}

main {
    --text-click-3D-model: "Cliquer pour voir l'objet !"
}

#toursArticleContainerId {
    grid-row: 5 / 24;

}

.toursArticleContainer {
    font-size: var(--font-size-1);
    line-height: var(--line-height-1);
    letter-spacing: var(--letter-space-1);

    h1 {
        font-size: var(--font-size-2);
        line-height: var(--line-height-2);
        letter-spacing: var(--letter-space-2);
    }

    figure[data-scene] {
        &::before {
            content: var(--text-click-3D-model);
            color: var(--color-accent);
            font-family: "Kalam";
            position: fixed;
            position-anchor: --clickable-object;
            bottom: calc(anchor(bottom) + 0.3rem);
            left: calc(anchor(left) + 1rem);
            font-size: var(--font-size-1);
            line-height: var(--line-height-1);
            letter-spacing: var(--letter-space-1);
        }

        >img {
            border-width: 0.33rem;
            anchor-name: --clickable-object;
        }
    }
}

#tourTextContainer {
    padding-top: calc(100vh / 24);
    margin-top: calc(200vh/24);
    mask-image: linear-gradient(to bottom, transparent 0%, white 6%);

    &>div {
        &.current {
            mask: conic-gradient(#e51313 0 0) padding-box,
                conic-gradient(at top calc(2rem - 4px) left 0.25rem, transparent 180deg, black 180deg, black 270deg, transparent 270deg);
        }

        & h1 {
            &::before {
                margin-top: -4px;
                height: calc(100% + 7px);
            }
        }

        &:first-of-type {
            padding-top: 0;

            &.current {
                mask:
                    conic-gradient(#e51313 0 0) padding-box,
                    conic-gradient(at top calc(1rem - 4px) left 0.25rem, transparent 180deg, black 180deg, black 270deg, transparent 270deg);
            }
        }
    }
}