body, html {
    min-height: 100%;
}
body {
    margin: 0;
    font-family: "OpenSauceOne";
    /* font-family: "SpaceGrotesk"; */
    line-height: 1.3;
    font-weight: 400;
    color: #fff;
    background-color: #00d9ff;
    font-size: 100vh;
}
p, ul, h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
}
*, *::before, *::after {
    box-sizing: border-box;
}

.intro-screen,
.main-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: visible;
    transition-property: opacity, visibility;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
}
.main-screen {
    background-color: #0f00e1;
    opacity: 0;
    visibility: hidden;
}
body.main-screen-active .intro-screen {
    opacity: 0;
    visibility: hidden;
}
body.main-screen-active .main-screen {
    opacity: 1;
    visibility: visible;
}

.intro-screen .lSSlideWrapper {
    transition-timing-function: cubic-bezier(.71,0,.27,0.9) !important;
}
#intro-slideshow {
    padding: 0;
    margin: 0;
    list-style: none;
}
.slide-intro {
    height: 100vh;
    position: relative;
}

.slide-intro.intro-1 .svg-offrez {
    position: absolute;
    top: 0.478em;
    width: 0.3528em;
    left: calc(50% - 0.174em);
}
.slide-intro.intro-1 .svg-vous-une {
    position: absolute;
    width: 0.3096em;
    top: 0.577em;
    left: calc(50% - 0.165em);
}
.slide-intro.intro-1 .svg-arrow-down {
    position: absolute;
    top: 0.694em;
    left: calc(50% + 0.15em);
    width: 0.03em;
}

.slide-intro.intro-2 .svg-pause {
    position: absolute;
    width: 0.3em;
    top: 0.22em;
    left: calc(50% - 0.145em);
}
.slide-intro.intro-2 .svg-arrow-down {
    position: absolute;
    width: 0.03em;
    top: 0.7832em;
    left: calc(50% + 0.15em);
}

.slide-intro.intro-3 .svg-musicale {
    position: absolute;
    top: 0.15em;
    left: calc(50% - 0.18em);
    width: 0.37em;
}
.slide-intro.intro-3 .svg-hemispheres-et-cie {
    position: absolute;
    top: 0.6452em;
    left: calc(50% - 0.16em);
    width: 0.252em;
}
.slide-intro.intro-3 .svg-vous-souhaite-une-bonne-annee {
    position: absolute;
    top: 0.672em;
    left: calc(50% - 0.162em);
    width: 0.264em;
}
.player-button {
    overflow: visible;
    font-size: 1em;
    font-family: inherit;
    border: none;
    background: transparent;
    padding: 0;
}
.slide-intro.intro-3 .svg-player {
    position: absolute;
    top: 0.77em;
    left: calc(50% - 0.041em);
    width: 0.082em;
    animation: playermove1 1.5s infinite;
    cursor: pointer;
}

@keyframes playermove1 {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
}

@keyframes playermove2 {
    0%, 100% {
        transform: scale(1);
    }
    17% {
        transform: scale(1.2);
    }
    34% {
        transform: scale(1);
    }
    55% {
        transform: scale(1);
    }
    66% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(1);
    }
}



.header-text {
    position: absolute;
    font-weight: 700;
    top: 0.8em;
    font-size: 0.025em;
    left: calc(50% - 9.1em);
    line-height: 1.23;
    margin: 0;
    letter-spacing: 0.04em;
}
.header-banner {
    top: 0.3em;
    position: absolute;
    width: calc( 50% + 0.106em );
    text-align: right;
}
.header-banner-content {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    /* position: relative; */
    background-color: #ff008e;
    padding: 0.028em 0.075em 0.014em 0em;
}
.svg-playlist {
    width: 0.25em;
    margin-bottom: 0.01em;
    position: relative;
}
.svg-logo-hemispheres {
    width: 0.102em;
    /* margin-right: 0.015em; */
    margin-right: 0.148em;
    position: relative;
}
.header-banner::before {
    content: "";
    position: absolute;
    bottom: 0;
    /* right: -0.121em; */
    right: -0.1219em;
    width: 0.227055em;
    /* height: 0.32625em; */
    height: 0.32em;
    background-image: url(../images/musique-maestro-2026.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}



.playlist-slideshow-container {
    padding-top: 0.46em;
    margin-right: auto;
    margin-left: auto;
    max-width: 0.47em;
}
.playlist-slideshow-container .lSSlideOuter {
    text-align: center;
}
#playlist-slideshow {
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 0.0135em;
}
.slide-playlist-title {
    text-transform: uppercase;
    font-size: 2em;
    line-height: 1;
    margin-bottom: 0.8em;
    font-weight: 900;
    padding-top: 0.65em;
    letter-spacing: 0.05em;
}
.slide-playlist-video {
    height: 15.8em;
    width: 28em;
    margin: 0 auto 1.4em;
}

/* BUGFIX avec lightslider on resize */
.ytmCuedOverlayHost,
.ytmVideoCoverHost {
    transition-duration: 0s;
}

.slide-playlist-explanation {
    letter-spacing: 0.12em;
    margin-bottom: 0.05em;
    font-weight: 300;
}
.slide-playlist-author {
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 0;
}

.lSAction > a {
    top: 0.016em;
    width: 0.035em;
    height: 0.0225em;
    background: none;
    margin-top: 0;
    opacity: 1;
    transition-property: opacity, visibility;
}
.lSAction > .lSPrev {
    left: calc(50% - 0.134em);
    transform: rotate(0deg);
}
.lSAction > .lSNext {
    left: calc(50% + 0.1em);
    transform: rotate(180deg);
}
.svg-previous {
    width: 100%;
    height: 100%;
    display: block;
}
#playlist-slideshow.first + .lSAction > .lSPrev,
#playlist-slideshow.last + .lSAction > .lSNext {
    opacity: 0;
    visibility: hidden;
}



.mainscreen-footer {
    position: absolute;
    bottom: 1.8em;
    left: calc(50% - 15.8em);
    font-size: 0.0145em;
}
.footer-logos {
    list-style: none;
    padding: 0;
    margin: 0 0 0.6em;
    display: flex;
}
.logo-item {
    margin-right: 0.8em;
}
.logo-item img {
    width: 2.1em;
}
.footer-text {
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0.1em;
}
.footer-text a {
    text-decoration: none;
    color: #ff008e;
}