html {
    font-size: 1vw;
    font-family: tosail, sans-serif;
    line-height: var(--lineHShortenReg) !important;
    background-color: var(--color2);
    color: var(--color1);
    overflow: hidden;
}

/** {
    line-height: var(--lineH) !important;
}*/

/* html::-webkit-scrollbar {
    display: none;
} */

img {
    display: block;
    width: 100%;
    pointer-events: none;
}

.relative {
    position: relative;
}

/* ------------------------------------------------------------------ iframe trick */
.iframeContainer {
    position: relative;
    padding-top: 60%;
}

iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
}

/* ------------------------------------------------------------------ ticket line */
.ticketLine {
    border-top: 1px solid var(--color1);
    padding-top: 0px;
}

.ticketLine:last-child {
    border-bottom: 1px solid var(--color1);
}

.ticketLine * {
    padding-top: 0rem;
    line-height: 1em !important;
}

.ticketLine a {
    text-decoration: none;
}

.ticketLine>*:nth-child(2) {
    flex-grow: 10;
}

.ticketLine .ellipsis {
    overflow: hidden;
}

.ticketLine .ellipsis div {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticketLine .ellipsis a {
    white-space: nowrap;
}

/* ------------------------------------------------------------------ main links */
a,
.link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a:hover,
.link:hover {
    color: var(--color4);
    /* color: red;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black; */
}

a.selected{
    color: var(--color4);

}

.coloredLink {
    color: var(--color3);
}

/* ------------------------------------------------------------------ generic text align */
.textCenter {
    text-align: center;
}

.textRight {
    text-align: right;
}

.textLeft {
    text-align: left;
}

/* ------------------------------------------------------------------ Structure */


#reload:not(.hide) {
    opacity: 1;
    transition: opacity var(--anime);
}

#reload.hide {
    opacity: 0;
}

/* ------------------------------------------------------------------ Structure (navigation) */
#navigation {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* height: var(--headerH); */
    padding: var(--m) 0px;
}

#navigation.absolute {
    z-index: 2;
    position: absolute;
    width: 100%;
}

#navigation::after {
    display: block;
    content: "";
    background-color: var(--color2);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity var(--anime);
    z-index: -1;
}

#navigation.bg::after {
    opacity: 1;
}

/* ------------------------------------------------------------------ Structure (menu) */
#menu {
    position: fixed;
    width: 100%;
    top: -100vh;
    left: 0px;
    background-color: var(--color2);
    width: 100%;
    z-index: 3;
    transition: top var(--anime);
}

#menu .scrollable {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-between;
    height: 100vh;
}

.menuList {
    font-family: tosailc, sans-serif;
    line-height: var(--lineHShortenCom) !important;
    font-size: var(--size88);
    text-transform: uppercase;
}

#menu.menuOpen {
    top: 0px;
}

.menuClick {
    cursor: pointer;
}

/* ------------------------------------------------------------------ Structure (footer) */
#footer {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* height: var(--footerH); */
    gap: calc(var(--m));
    font-size: var(--size19);
    font-family: tosail, sans-serif;
    line-height: var(--lineHShortenReg) !important;
    padding: var(--dm) 0px;
}

.socials {
    text-align: center;
    font-size: var(--size25);
    font-family: "tosailc", sans-serif;
    line-height: var(--lineHShortenCom) !important;
    font-feature-settings: 'ss10' 1;
}



.content {
    min-height: calc(100vh - var(--footerH) - var(--headerH));
}

/* ------------------------------------------------------------------ Spacing */
.spaceTop {
    padding-top: var(--lineGap);
}

.spaceBottom {
    padding-bottom: var(--lineGap);
}

/* ------------------------------------------------------------------ Structure */

.fixed {
    position: fixed;
    top: 0px;
    pointer-events: none;
    padding-top: var(--fixedH);
    z-index: 4;
}


#languages,
#logo,
#breadcrumb,
#popup,
.compassContainer,
.appPlayer,
#appAnchors {
    pointer-events: all;
}

.appAnchors, .appFilters {
    /* background-color: yellow; */
    line-height: var(--lineHMentor);
}

#languages {
    z-index: 1;
    font-size: var(--size19);
    font-family: tosail, sans-serif;
    /* line-height: var(--lineHShortenReg) !important; */
}
#languages a+a {
    padding-left: var(--m);
}

#breadcrumb {
    font-size: var(--size19);
    font-family: tosail, sans-serif;
    /* line-height: var(--lineHShortenReg) !important; */
    text-align: center;
    z-index: 2;
}

#logo {
    font-family: tosailc, sans-serif;
    line-height: var(--lineHShortenCom) !important;
    font-size: var(--size88);
    text-transform: uppercase;
    margin-bottom: var(--m);
    margin-top: var(--m);
}

.popup {
    z-index: 1;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: tosailc, sans-serif;
    line-height: var(--lineHShortenCom) !important;
    font-size: var(--size50);
    background-color: var(--color3);
    color: var(--color1);
    top: calc(var(--dm) + var(--dm) + var(--size88) + var(--size19) + var(--size19) + 6rem + var(--m));
    left: var(--dm);
    width: var(--column1);
    /* padding-left: calc(var(--m) * 2);
    padding-right: calc(var(--m) * 2); */
    padding-top: calc(var(--m) * 1);
    padding-bottom: calc(var(--m) * 1);
}

.marquee {
    position: relative;
    width: 100%;
    display: none;
}

.marquee span {
    padding-right: 2rem;
}

/* ------------------------------------------------------------------ Group Heading */
.groupHeading {
    position: relative;
    float: left;
    height: 100vh;
    color: var(--color1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: var(--size88);
}

.groupHeading .imgContainer {
    left: 0px;
    top: 0px;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.groupHeading .imgContainer::after {
    content: "";
    display: block;
    pointer-events: none;
    left: 0px;
    top: 0px;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: var(--color2);
    mix-blend-mode: hard-light;
}

.groupHeading .imgContainer img {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.groupHeading ul li {
    float: left;
}

.groupHeading .downArrow {
    font-size: var(--size88);
    position: absolute;
    bottom: var(--m);
    left: 50%;
    transform: translateX(-50%);
}

/* ------------------------------------------------------------------ Group Intro */
.groupIntro {
    width: 100%;
}

/* ------------------------------------------------------------------ Poster */
.poster {
    font-family: tosailc, sans-serif;
    line-height: var(--lineHShortenCom) !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    text-align: center;
    background-color: var(--color1);
    color: var(--color3);
    position: relative;
    width: var(--column1);
    font-size: var(--size19);
    min-height: 25em;
    padding: var(--dm);
}

/*modifié par Laura, à améliorer*/
.posterLocation {
    font-family: tosailc, sans-serif;
    line-height: var(--lineHShortenCom) !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    text-align: center;
    background-color: var(--color1);
    color: var(--color3);
    position: relative;
    width: var(--column6);
    font-size: var(--size19);
    padding: var(--dm);
    border-radius: var(--m);
}

.posterRounded {
    width: var(--column3);
    border-radius: var(--m);
}

.posterDouble {
    width: var(--column2);
}

.posterTriple {
    width: var(--column3);
}

.poster.filtered {
    /* opacity: 0.25; */
    display: none;
}

.poster * {
    z-index: 1;
}

.poster .imgContainer {
    left: 0px;
    top: 0px;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.poster .imgContainer::after {
    content: "";
    display: block;
    pointer-events: none;
    left: 0px;
    top: 0px;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: var(--color2);
    mix-blend-mode: hard-light;
}

.poster .imgContainer img {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.poster:hover .imgContainer {
    display: none;
}

.poster .date {
    padding-bottom: var(--dm);
}

.poster .dateHM {
    padding-top: var(--dm);
}

.download {
    font-family: tosailc, sans-serif;
    line-height: var(--lineHShortenCom) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    color: var(--color1);
    position: relative;
    width: var(--column1);
    font-size: var(--size19);
    min-height: 20em;
    padding: var(--m);
    text-transform: uppercase;
}

.download svg {
    position: absolute;
    top: 0px;
    height: 100%;
    width: 100%;
}

/* logo partner */
.logoPartner {
    justify-content: center;
    align-items: center;
    display: flex;
    padding: var(--dm);
}

/* ------------------------------------------------------------------ Plates */
.plate {
    font-family: tosailc, sans-serif;
    line-height: var(--lineHShortenCom) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2em;
    height: 1.25em;
    border: 1px solid;
    border-color: inherit;
    border-radius: 100%;
    text-align: center;
    text-transform: uppercase;
}

.plate.plateBig {
    font-size: var(--size88);
}

.plate.plateMedium {
    font-size: var(--size50);
}

.plate.plateSmall {
    font-family: tosail, sans-serif;
    line-height: var(--lineHShortenReg) !important;
    font-size: var(--size19);
    width: 8em;
    height: 5em;
    text-transform: none;
}

.plate:empty {
    display: none;
}

/* ------------------------------------------------------------------ Day menu */
.dayMenu {
    background-color: var(--color1);
    color: var(--color3);
    padding: var(--m);
}

/* ------------------------------------------------------------------ Flag */
.flag

/* ,form button */
    {
    cursor: pointer;
    font-size: var(--size190);
    font-family: tosailc, sans-serif;
    line-height: var(--lineHShortenCom) !important;
    height: 15rem;
    display: flex;
    color: var(--color3);
    align-items: center;
    justify-content: center;
    /* background-image: url("../assets/flag.svg"); */
    /* background-size: 100% 100%; */
    text-transform: uppercase;
    background-repeat: no-repeat;
    position: relative;




    /* background-image: url("../assets/flagCenter.png"), url("../assets/flagLeft.png"), url("../assets/flagRight.png");
    background-repeat: repeat-y, repeat-y, repeat-y;
    background-position: 50% 0%, 0% 0%, 100% 0%;
    background-size: calc(100% - var(--f) * 2) 100%, var(--f) 10%, var(--f) 10%; */
}

.flag svg {
    position: absolute;
    top: 0px;
    height: 100%;
    width: 100%;
    z-index: -1;
}

/* .flag {
    cursor: pointer;
    font-size: var(--size190);
    font-family: tosailc, sans-serif;
    min-height: 15rem;
    display: flex;
    color: var(--color3);
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    position: relative;
    min-width: var(--column2);
}
.flag>svg {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
} */


.flag:hover,
form button:hover {
    color: var(--color4);
}




@media screen and (orientation: portrait) {
    html {
        font-size: calc(2.5vw);
    }

    #footer {
        flex-flow: column;
        gap: calc(var(--f));
        padding-bottom: calc(var(--lineGap) + var(--compass));
    }

    #footer .flexRow {
        gap: calc(var(--f));
    }


    .rTextCenter {
        text-align: center;
    }

    .rTextRight {
        text-align: right;
    }

    .rTextLeft {
        text-align: left;
    }

    .poster {
        width: var(--column4);
    }

    .popup {
        /* z-index: 1; */
        position: static;
        width: var(--column8);
        left: var(--f);
    }
    .home .popup {
        position: fixed;
        top: calc(var(--m) + var(--dm) + var(--size88) + var(--size19) + var(--size19));
    }

    .download {
        width: var(--column4);
        min-height: 30em;
    }


}