/*********************************************************************************************************************************/
/*********************************************************************************************************************************/
/*********************************************************************************************************************************/
/*********************************************************************************************************************************/
/************************************************** THEME LOST SYMPHONIES ********************************************************/
/*********************************************************************************************************************************/
/*********************************************************************************************************************************/
/*********************************************************************************************************************************/
/*********************************************************************************************************************************/

html{
    font-family: 'kranto-text-condensed', sans-serif;
    font-weight: 400;
    font-style: normal;
    scroll-behavior: smooth;
}

body{
    padding: 0;
    margin: 0;
    font-family: 'kranto-text-condensed', sans-serif;
    font-weight: 400;
    font-style: normal;
}

a{
    text-decoration: none;
}

*{
    transition: 0.2s;
}

header{
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 3;
    background-color: #3732ff;
}

.header-top{
    padding: 0 2rem;
    -webkit-box-shadow: 0px 5px 14px 6px rgba(0,0,0,0.65); 
    box-shadow: 0px 5px 14px 6px rgba(0,0,0,0.65);
}

.header-top-logo{
    position: absolute;
    top: 1rem;
    left: 2rem;
    width: 9rem;
}
.header-top-logo:hover{
    opacity: 0.9;
}

.nav-bar>ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;

}


.nav-bar li>a{
    color: white;
    font-size: 1.375rem;
    text-transform: uppercase;
    font-weight: 600;
    display: block;
    position: relative;
    padding: 1.675rem 1.75rem;
}
.nav-bar li>a.active:after{
    content: '';
    width: 47px;
    position: absolute;
    bottom: -20px;
    height: 35px;
    background: transparent;
    left: 50%;
    background-image: url(../img/asset.svg);
    transform: translateX(-50%);
    background-repeat: no-repeat;
    pointer-events: none;
}

.nav-bar li>a.active, .nav-bar li>a:not(.active):hover{
    background: #12193a;
    color: #face02;
}


section{    
    height: 100vh;
    width: 100%;
    padding: 6rem 0;
    box-sizing: border-box;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
}


@media screen and (max-width: 1440px){
    html {
        font-size: 15px;
    }
}

@media screen and (max-width: 1366px){
    html {
        font-size: 14.5px;
    }
}

@media screen and (max-width: 1280px){
    html {
        font-size: 14px;
    }
}

@media screen and (max-width: 1080px){
    html {
        scroll-padding-top: 3rem;
    }
    .nav-bar li>a.active:after{
        transform: translateX(-50%) scale(0.75);
    }
}

@media screen and (max-width: 992px){
    section{    
        height: unset;
    }
    .header-top-logo {
        position: absolute;
        top: 1.25rem;
        left: 5.25rem;
        width: 7rem;
    }
    header{
        background-color: #3732ff;
        height: 5rem;
        -webkit-box-shadow: 0px 5px 14px 6px rgba(0, 0, 0, 0.65); 
        box-shadow: 0px 5px 14px 6px rgba(0, 0, 0, 0.65);
    }
    .header-top{
        -webkit-box-shadow: unset; 
        box-shadow: unset;
    }
}

@media screen and (max-width: 600px){
    html {
        scroll-padding-top: 3.5rem;
    }
}

@media screen and (min-width: 1921px){
    html {
        font-size: 24px;
    }
    
    .nav-bar li>a{
        font-size: 1.25rem;
    }
    .header-result span {
        font-size: 1.25rem;
    }
}

@media screen and (min-width: 2881px) {
    html {
        font-size: 34px;
    }
}


#legal h1{
    color: #09cbe9;
    font-size: 6rem;
}

h2{
    color: #ffffff;
    text-transform: uppercase;
    font-size: 3.75rem;
    font-family: "kranto-normal-condensed", sans-serif;
    font-weight: 800;
    font-style: italic;
    z-index: 1;
    line-height: 1;
    text-align: center;
}
h2 span{
    display: block;
    font-size: 2.25rem;
}


/******* MENU MOBILE *******/

.menu-mobile {
    display: none;
}


.menu-mobile-switch {
    display: block;
    position: absolute;
    left: 1.5rem;
    top: 1.25rem;
    cursor: pointer;
}

.menu-mobile-switch>svg {
    fill: white;
    width: 2.5rem;
    height: 2.5rem;
}

.menu-panel {
    display: none;
    padding: 4rem 0;
    background-color: #12193a;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: calc(100vh - 8rem);
    z-index: 3;
}

.menu-panel nav>ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.menu-panel nav>ul>li {
    border-top: 1px solid #3732ff;
    width: 100%;
}
.menu-panel nav>ul>li:last-child {
    border-bottom: 1px solid #3732ff;
}
.menu-panel nav>ul>li>a {
    color: white;
    font-size: 2rem;
    font-weight: 500;
    display: block;
    text-align: center;
    padding: 1.25rem 0;
    margin: 0.5rem 0;
    line-height: 1;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
    font-family: kranto-text-condensed, sans-serif;
    font-weight: 900;
    font-style: normal;
}

.header-result{
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    cursor: pointer;
    gap: 1rem;
    display: flex;
    font-size: 1.75rem;
    align-items: center;
    width: 23rem;
}
.header-result:hover{
    transform: rotate(4deg);
}

.burger-close{
    position: absolute;
    top: 2rem;
    cursor: pointer;
    width: 3rem;
    right: 2rem;
    filter: grayscale(1) brightness(2);
}

@media screen and (max-width: 1440px) {
    .header-result {
        top: 0rem;
        right: 0.5rem;
        transform: scale(0.875);
    }
    .header-result:hover{
        transform: scale(0.875) rotate(4deg);
    }
}
@media screen and (max-width: 1366px) {
    .nav-bar li>a {
        font-size: 1.5rem;
        padding: 1.675rem 1.25rem;
    }

}

@media screen and (max-width: 1080px){
    .nav-bar li>a{
        font-size: 1.15rem;
        padding: 1.675rem 1rem;
    }
    .header-result {
        top: 0rem;
        right: -2rem;
        transform: scale(0.65);
    }
    .header-result:hover{
        transform: scale(0.65) rotate(4deg);
    }    
}



@media screen and (max-width: 992px) {
    .menu-panel .header-logo {
        margin: 0 auto 4rem;
        display: flex;
    }    
    .menu-panel .header-logo>img {
        max-width: unset;
        width: 200px;
        margin: 0 auto;
    }
    .menu-mobile {
        display: block;
    }
    .nav-bar {
        display: none;
    }
    .header-result {
        right: -2.5rem;
        transform: scale(0.675);
        align-items: center;
    }
    .header-result:hover{
        transform: scale(0.675) rotate(4deg);
    }
    h2 span{
        display: block;
        font-size: 1.75rem;
    }
}

@media screen and (max-width: 768px){
    .menu-panel nav>ul>li>a {
        font-size: 1.75rem;
    }
}
@media screen and (max-width: 480px){
    .menu-panel nav>ul>li>a {
        font-size: 1.5rem;
    }
    .header-result {
        top: -1rem;
        right: -4.5rem;
        transform: scale(0.5);
    }
    .header-result:hover{
        transform: scale(0.5) rotate(4deg);
    }
}



.wrapper {
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 2rem;
    min-height: 80vh;
    display: flex    ;
    flex-direction: column;
    justify-content: space-around;
}




@media screen and (max-width: 1680px) {
    .wrapper {
        max-width: 1440px!important;
    }
}
@media screen and (max-width: 1440px) {
    .wrapper {
        width: 100%;
        max-width: 1280px!important;
    }
    section{
        padding: 4rem 0;
    }
}
@media screen and (max-width: 1280px) {
    .wrapper {
        width: 100%;
        max-width: 1160px!important;
    }
}

@media screen and (max-width: 1080px) {
    .wrapper {
        max-width: calc(100% - 6rem);
        padding: 0 3rem;
    }
    section{
        padding: 3rem 0;
    }
}

@media screen and (max-width: 992px) {
    .wrapper {
        max-width: calc(100% - 4rem);
        padding: 0rem 2rem;
        min-height: unset;
    }
    section{
        padding: 3rem 0;
    }
}
@media screen and (max-width: 800px) {
    h2 {
        font-size: 3rem!important;
    }

    .red-button,
    .black-button {
        font-size: 1.375rem;
    }
}

@media screen and (max-width: 604px){
    .wrapper {
        padding: 0 1rem;
        max-width: calc(100% - 2rem);
        margin: 0 auto;
    }
    h2 {
        font-size: 2.5rem!important;
    }
    section{
        padding: 2rem 0;
    }
}


@media screen and (max-width: 480px) {
    h2 {
        font-size: 2.25rem!important;
    }
    .header-top-logo {
        position: absolute;
        top: 1.575rem;
        left: 5rem;
        width: 6rem;
    }
}
@media screen and (max-width: 380px) {
    h2 {
        font-size: 1.875rem!important;
    }
}
@media screen and (min-width: 1921px) {
    .wrapper {
        width: 2200px;
        max-width: unset;        
    }
    section{
        padding: 6rem 0;
    }
    h2 {
        font-size: 3.5rem!important;
    }
    
    .header-result{
        top: 0.5rem;
        width: 14rem;
    }

}

@media screen and (min-width: 2881px) {
    .wrapper {
        width: 2560px;
    }
    
    .header-result{
        position: absolute;
        top: 1.125rem;
        right: 4rem;
        display: flex;
        font-size: 1.75rem;
        align-items: center;
        width: 10rem;
        transform: scale(1.375);
    }
    .header-result:hover{
        transform: scale(1.375) rotate(4deg);
    }
}







/*********************************************************************************************************************************/
/********************************************************** HOME *****************************************************************/
/*********************************************************************************************************************************/

#home{
    background-image: url('../img/home-bg.webp');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
}

#home .wrapper{
    width: 100%;
    max-width: 1680px;
}
.top-score{
    position: absolute;
    z-index: 0;
    top: 0;
}


h1{
    color: white;
    text-transform: uppercase;
    font-family: kranto-text-condensed, sans-serif;
    font-weight: 900;
    font-style: normal;
}

h1 span{
    display: block;
    font-size: 2.25rem;
    line-height: 1.15;
}


.available-on{
    text-align: center;
    color: white;
    font-weight: 500;
}




/**** Home left ****/

.home-left{
    display: flex;
    flex-direction: column;
    align-items: baseline;
    width: fit-content;
    gap: 2rem;
    margin-top: 0rem;
}

.home-left-button{
    color: white;
    text-transform: uppercase;
    background: #3732ff;
    padding: 0.75rem 1.75rem;
    font-size: 1.75rem;
    gap: 1rem;
    display: flex;
    margin: 0;
    line-height: 1;
    align-items: center;
    font-family: kranto-text-semicondensed, sans-serif;
    font-weight: 800;
    font-style: italic;
    transform: rotate(-5deg);
    margin-top: 2rem;
    cursor: pointer;
    transition: 0.05s;
    width: fit-content;
}

.home-left-button:hover{
    transform: rotate(-3deg); 
    transition: 0.05s;
}

.playable-on{
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    font-weight: 500;
    font-size: 1.25rem;
    gap: 0.5rem;
    width: fit-content;
}

.playable-on-mobile{
    display: none;
}

@media screen and (max-width: 1440px){
    .playable-on-desktop{
        display: none;
    }
    
    .playable-on-mobile{
        display: block;
    }
       
}

.created-in{
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    max-width: 100%;
}

.home-left-bottom {
    display: flex;
    flex-direction: column;
    gap: 6rem;
    position: absolute;
    bottom: 2rem;
}

/**** Footer de home ****/

.home-footer{
    position: absolute;
    bottom: 0rem;
    width: 100%;
    padding: 0 2rem;
    box-sizing: border-box;
    left: 0;
}




/* Code de la carte */

.copy-code{
    position: relative;
    cursor: pointer;
    width: max-content;
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.copy-code>div{
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
    bottom: 0.5rem;
}
.mapcode_text{
    color: white;
    font-size: 1.125rem;
    line-height: 1;
    font-weight: 500;
    text-transform: uppercase;
    display: block;
    text-align: center;
    color: #12193a;
    margin: 0 auto;
    align-items: center;
    font-family: kranto-text-semicondensed, sans-serif;
    font-weight: 800;
    width: max-content;
}
.mapcode_numbers{
    color: #12193a;
    font-size: 2.125rem;
    line-height: 1;
    font-weight: 600;
    display: block;
    text-align: center;
    font-family: kranto-text-semicondensed, sans-serif;
    font-weight: 900;
    font-style: normal;
    width: max-content;
}

#countdown, #countdown2{
    margin: 0;
}

.copy-code:hover .mapcode_numbers{
    color: white;
}

.map_code_copy{
    position: absolute;
    top: -1.75rem;
    font-weight: 600;
    color: white;
    font-size: 1rem;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: none;
}

#map-code-copied2{
    bottom: -1rem;
    top: unset;
}

.map_code_bg{
    width: 27rem;
}

.mapcode-top{
    position: absolute;
    top: -0.75rem;
    left: -2.25rem;
    width: 16.25rem;
}
.mapcode-bot{
    position: absolute;
    bottom: -0.5rem;
    right: -1rem;
    width: 16rem;
}

@media screen and (max-width: 1366px){
    .top-score {
        position: absolute;
        left: -12rem;
    }
    #home .wrapper {
        max-width: 1180px;
    }
}

@media screen and (max-width: 1280px){
    .top-score{
        display: none;
    }
    .playable-on-mobile{
        display: block;
    }
    .playable-on img:nth-child(1){
        display: none;
    }
    .home-left{
        margin-left: 4rem;
    }
        
    .left-menu_content{
        transform: scale(0.75) translateX(-8px);
    }
}

@media screen and (max-width: 1080px){ 

    .map_code_copy {
        top: -1.25rem;
    }

    .home-left{
        margin: 0rem 0 8rem 2rem;
    }
    
    .home-left .main-logo{
        max-width: 32vw;
        height: auto;
    }
    .home-left-bottom {
        gap: 3rem;
    }
    .created-in{
        right: 1rem;
    }
}

@media screen and (max-width: 992px){
    .top-score {
        display: none;
    }
    #home {
        padding: 10rem 0 6rem;
    }
    .copy-code{
        margin-top: 2rem;
    }
    .main-logo{
        max-width: 60vw;
        height: auto;
    }
    .home-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 2rem 0;       
    }  
    .home-left-bottom {
        display: flex;
        align-items: center;
        gap: 3rem;
        position: relative;
        bottom: unset;
    } 
    .playable-on {
        gap: 1rem;
        width: fit-content;
        align-items: center;
    }
    .created-in{
        position: relative;
        right: unset;
        bottom: 10rem;
        margin: 0 auto;
        display: block;
    }
    #home {
        padding: 10rem 0 16rem;
    }
}

@media screen and (max-width: 800px){
    .left-menu {
        display: none;
    }
    .home-left .main-logo{
        max-width: 50vw;
    }
    .home-left {
        margin: 4rem 0 0;       
    }  
}
@media screen and (max-width: 600px){
    .home-left {
        margin: 0rem 0 0;       
    }  
        
    .home-left-button{
        font-size: 1.375rem;
    }
    h1 span br{
        display: none;
    }
    h1 span{
        text-align: center;
    }
}

@media screen and (max-width: 480px){
    .home-left .main-logo{
        max-width: 70vw;
    }
    .map_code_bg{
        width: 24rem;
    }
    .home-left-button {
        font-size: 1.25rem;
    }
}


@media screen and (min-width: 1921px){
    .home-left{
        transform: scale(1.375);
        gap: 0rem;
        margin-bottom: 8rem;
    }
    #home .wrapper{
        max-width: 1920px;
    }
    .playable-on{
        transform: scale(1.25);
    }   
    .home-left-bottom {
        left: 8.75rem;
    } 
    .created-in{
        transform: scale(1.5) translateX(-3rem);
    }
    .home-left-button{
        transform: scale(1.25) rotate(-5deg);
    }
    
}

@media screen and (min-width: 2881px){
    .home-left{
        transform: scale(2);
    }
    .playable-on{
        transform: scale(1.5);
    }  
    #home .wrapper{
        max-width: 2560px;
    } 
    .created-in{
        transform: scale(2) translateX(-2rem);
    }
}






/*********************************************************************************************************************************/
/********************************************************* RECOMPENSES ************************************************************/
/*********************************************************************************************************************************/

#lots{
    background-image: url('../img/bg-lots.webp');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: baseline;
}

#lots .wrapper{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 77vh;
}

.lots{
    max-width: 100%;
    margin: 0 auto;
}

.lots-large, .lots-mobile{
    display: none;
}

#lots .disclaimer {
    position: relative;
    text-align: center;
    font-size: 1.125rem;
    color: white;
}

.ranking_bar{
    display: flex;
    gap: 0.875rem;
    justify-content: center;
}


.lots_box{
    padding: 2rem;
}

.lots_box_top{
    color: #3732ff;
    opacity: 0.3;
    text-transform: uppercase;
    font-family: "kranto-text-condensed", sans-serif;
    font-weight: 800;
    font-style: italic;
    font-size: 13rem; 
    position: absolute;
    left: 10%;
    top: 0rem;
    line-height: 0.9;
    z-index: 0;
}


.lots_box a{
    z-index: 1;
    display: inline-block;
    transform: scale(.925);
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.lots_box a img{
    -webkit-backface-visibility: hidden; 
    -ms-transform: translateZ(0); /* IE 9 */
    -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
     transform: translateZ(0);
  }
.lots_box a:hover{
    transform: scale(1);
}

.lots_img{
        align-items: center;
        justify-content: center;
        position: relative;
    display: none;
}

.lots_img.active{
    display: flex;
}

.ranking_bar>div{
    display: flex;
    gap: 0.875rem;
}

.lots_arrow-left, .lots_arrow-right{
    border: 3px solid #3732ff;   
    padding: 0.5rem 0.75rem;
    transform: skew(-10deg);
    cursor: pointer;
}

.lots_arrow-right path{
    transform: translateX(1px) skew(7deg);
}

.ranking_bar_number{
    border: 3px solid #3732ff;
    color: white;
    font-family: "kranto-normal-condensed", sans-serif;
    font-weight: 800;
    font-style: italic;
    padding: 0.75rem 2.5rem;
    text-transform: uppercase;
    font-size: 1.25rem;
    transform: skew(-10deg);
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
}
.ranking_bar_number.active, .ranking_bar_number:hover{
    background-color: #3732ff;
}
.ranking_bar_number sup{
    font-size: 0.75rem;
}

#ranking_bar_number-6{
    border-color: #face02;
}
#ranking_bar_number-6.active, #ranking_bar_number-6:hover{
    background-color: #face02;
}


.lego-nd{
    margin-right: -10rem;
    display: block;
}

#lots_img-2 .lots_box_top{
    left: unset;
    right: 0;
    top: 0;
}
#lots_img-3 .lots_box_top{
    left: 2rem;
    top: 7rem;
}
#lots_img-4 .lots_box_top{
    left: unset;
    right: -2rem;
    bottom: 4rem;
    top: unset;
}

#lots_img-5 .lots_box_top{
    left: unset;
    right: 4rem;
    bottom: 4rem;
    top: 4rem;
}




.setup-gaming{
    margin-left: -2rem;
    margin-top: 2rem;
}

.ps5{
    margin-right: -12rem;
    z-index: 2!important;
}

.ps_digitale, .grande-vague{
    margin-right: -2rem;
}

.lego-lama{
    margin-right:-8rem;
    margin-left: 4rem;
}

.lego-2ps{
    margin-right:-2rem;
}

.lego-resto{
    margin-left: -3rem;
}

.xbox{
    margin-left: -6rem;
}

.lego-banane{
    margin-left: -6rem;   
}

@media screen and (max-width: 1080px){
    .ranking_bar_number {
        padding: 0.75rem 1.75rem;
        font-size: 1.125rem;
    }
    .lots_box a img {
        max-width: 315px;
    }
    #lots h2{
        margin: 1.5rem 0 1rem;
    }
    .lots_box {
        padding: 1rem 2rem;
    }
}


@media screen and (max-width: 992px){
    #lots .wrapper{
        height: unset;
    }
    .ranking_bar_number {
        padding: 0.5rem 1rem;
        font-size: 1rem;
    }

    .lots_arrow-left, .lots_arrow-right {
        display: none;
    }
    .ranking_bar>div {
        display: flex    ;
        gap: 0.75rem;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    .lots_box_top {
        left: unset!important;
        top: 0rem!important;
        right: unset!important;
    }
    .lots_box a img {
        max-width: 345px;
    }
    .lots_box a {
        margin-top: 4rem;
    }
    .lots_img.active{
        gap: 2rem;
    }
    .lots_box .lego-lama img{
        max-width: 300px;
        margin-left: 0rem;
    }
    .lots_box .xbox {
        margin-left: -3rem;
    }

    .manette img{
        max-width: 390px;     
    }
    .lego-lama {
        margin-right: -6rem;
        margin-left: 2rem;
    }
}

@media screen and (max-width: 600px){
    .lots_box a img {
        max-width: 250px;
    }
    .ranking_bar {
        max-width: 80%;
        margin: 0 auto;
    }
    .lots_box_top {
        font-size: 8rem;
        left: 50% !important;
        top: 0rem !important;
        transform: translateX(-50%);
        width: max-content;
    }
    .lots_img.active {
        display: flex;
        justify-content: space-between;
    }
    .ranking_bar_number {
        transform: unset;
    }
}


@media screen and (max-width: 480px){
    .lots_box a img {
        max-width: 210px;
    }

    .manette img{
        max-width: 260px !important;
    }
    .lots_box .lego-lama img {
        max-width: 210px;
        margin-left: 0rem;
    }  
    .lego-lama {
        margin-right: -7rem;
        margin-left: 0rem;
    } 
    .lots_box{
        padding: 1rem;
    }
    .lots_box a {
        margin-top: 3rem;
    }
    .ranking_bar {
        max-width: 90%;
        margin: 0 auto;
    }
    .lots_box .xbox {
        margin-left: -1rem;
    }
}

@media screen and (max-width: 420px){
    .lots_box a img {
        max-width: 178px;
    }
    .lots_box .xbox {
        margin-left: 0;
    }
    .manette img {
        max-width: 210px !important;
        margin-left: -1rem;
    }
    .ps_digitale{
        margin-right: -4rem;
    }
    .lots_box .lego-lama img {
        max-width: 190px;
        margin-left: 0rem;
    }
    .lots_box {
        padding: 0rem;
    }
    .ps_digitale, .grande-vague {
        margin-right: 0;
    }
}
@media screen and (max-width: 380px){
    .lots_box a img {
        max-width: 155px;
    }
    .lots_box .xbox {
        margin-left: 0;
    }
    .manette img {
        max-width: 220px !important;
    }
    .ps_digitale{
        margin-right: -4rem;
    }
}
@media screen and (min-width: 1921px){
    .lots-large{
        display: block;
        max-width: 100%;
    }
    .lots{
        display: none;
    }    
    .lots_box a{
        transform: scale(1.25);
        margin-top: 7rem; 
    } 
    .lots_box a:hover{
        transform: scale(1.35);
    }     
    .lego-nd {
        margin-right: -0rem;
    }
    .ps5 {
        margin-right: 8rem;
    }
    .grande-vague {
        margin-right: 5rem;
    }
    .lego-banane {
        margin-left: 4rem;
    }
    .lego-lama {
        margin-right: 9rem;
        margin-left: 0rem;
    }
    .lego-2ps {
        margin-right: 9rem;
    }
    .lots_arrow-left, .lots_arrow-right {
        width: 1rem;
        height: 2rem;
    }
    .lots_arrow-left path, .lots_arrow-right path{
        transform: translateY(0.125rem) scale(1.25);
    }
    .lots_img.active {
        gap: 2rem;
    }
}

@media screen and (min-width: 2881px){
    .lots_box a{
        transform: scale(1.5);
        margin-top: 9rem;
    } 
    .lots_box a:hover{
        transform: scale(1.55);
    } 
    .lots_img.active {
        gap: 6rem;
    }
    .lots_arrow-left path, .lots_arrow-right path {
        transform: translateY(0.25rem) scale(1.5);
    }
}

@media screen and (min-width: 1367px){
    .lots_box{
        height: 60vh;
    }
}



/*********************************************************************************************************************************/
/************************************************************ VIDEO **************************************************************/
/*********************************************************************************************************************************/

#trailer{
    padding: 0;
    background: #0f1430;
}

.video-box {
    width: fit-content;
    overflow: hidden;
    cursor: pointer;
    width: 100%;
}

.video-box-resp {
    padding-bottom: calc(56.125%);
    padding-top: 0px;
    height: 0;
    overflow: hidden;
}

.video-box-resp>video {
    width: 100%;
    height: auto;
}

video {
    background-color: transparent !important;
}

.display-mobile{
    display: none;
}

@media screen and (max-width: 480px){
    .display-desktop{
        display: none;
    }
    .video-box-resp {
        padding-bottom: calc(178.125%);
    }
    .display-mobile{
        display: block;
    }
}


/*********************************************************************************************************************************/
/********************************************************* CHALLENGES ************************************************************/
/*********************************************************************************************************************************/


#challenges{
    background-image: url('../img/bg-challenges.webp');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: baseline;
}

#challenges .wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.challenges_text h2{
    text-align: left;
}
.challenges_text h2 span:first-child{
    text-align: left;
    font-size: 3.75rem;
}
.challenges_text h2 span:last-child{
    margin-left: 4rem;
    font-size: 2.25rem;
}
.challenges_text{
    position: absolute;
    top: 2rem;
    left: 2rem;
}
.challenges_text div{
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-left: 2rem;
}
.challenges_text p{
    color: white;
    text-transform: uppercase;
    font-size: 1rem;
    font-family: "kranto-normal-condensed", sans-serif;
    font-weight: 800;
    font-style: italic;
    line-height: 1.5;
}
.challenges_text p span{
    color: #face02;
}

#challenges img{
    width: 100%;
}

.parcours-mobile{
    display: none;   
}

@media screen and (max-width: 1080px){
    
    #challenges img{
        transform: translateY(6rem);
    }
}

@media screen and (max-width: 992px){
    .challenges_text{
        position: relative;
        top: unset;
        left: unset;
    }
    
    .parcours-mobile{
        display: block;   
    }
    .parcours{
        display: none;
    }
    #challenges .wrapper {
        gap: 2rem;
    }
    .challenges_text h2 span:first-child{
        font-size: 2.5rem;
    }
    .challenges_text h2 span:last-child{
        margin-left: 3rem;
        font-size: 1.75rem;
    }
    #challenges img{
        transform: unset;
        max-width: 600px;
    }
}

@media screen and (max-width: 480px){
    .challenges_text h2 span:first-child{
        font-size: 2rem;
    }
    .challenges_text h2 span:last-child{
        margin-left: 1.5rem;
        font-size: 1.75rem;
    }
}

@media screen and (min-width: 1921px){
    #challenges img{
        transform: scale(1.1) translateY(2rem);
    }
}
@media screen and (min-width: 2881px){
    #challenges img{
        transform: scale(1.25) translateY(4rem);
    }
}

/*********************************************************************************************************************************/
/*********************************************************** GUIDE ***************************************************************/
/*********************************************************************************************************************************/


#guide{
    background-image: url('../img/bg-guide.webp');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: baseline;
}

.guide-row{
    display: flex;
    justify-content: space-between;
}
.guide-row>.guide-block{
    width: 18%;
    position: relative;
}
.guide-row>.guide-block img{
    width: 100%;
}

#guide-block-2 img{
    transform: scale(1.11)
}

#guide-block-3 .copy-code{
    bottom: -3rem;
}
#guide-block-3 .copy-code .mapcode_text{
    font-size: 1rem;
}
#guide-block-3 .copy-code #countdown, #countdown2{
    font-size: 1.675rem;
}
#guide-block-3 .copy-code>div {
    bottom: 1.25rem;
}
#guide-block-3 .mapcode-small{
    cursor: pointer;
    width: 17rem;
}
#guide-block-4{
    cursor: pointer;
}
#guide-block-4:hover{
    opacity: 0.9;
}
@media screen and (max-width: 1080px){
    #guide .wrapper{
        gap: 3rem;
        justify-content: center;
    }

}

@media screen and (max-width: 992px){
    .guide-row {
        display: flex    ;
        justify-content: center;
        flex-wrap: wrap;
        gap: 5rem 3rem;
    }
    .guide-row>.guide-block {
        width: 28%;
    }
}

@media screen and (max-width: 768px){
    .guide-row {
        gap: 5rem 3rem;
    }
    #guide .wrapper{
        gap: 1.5rem;
        justify-content: center;
    }
}
@media screen and (max-width: 600px){
    #guide-block-3 .copy-code {
        transform: translateX(-50%) scale(0.75);
    }
    .guide-row>.guide-block {
        width: 40%;
    }
    .guide-row{
        margin: 0rem 0;
    }
    .guide-row {
        gap: 3rem 2rem;
    }
}

@media screen and (min-width: 1921px){
    .guide-row{
        transform: scale(1.05);
    }
}
@media screen and (min-width: 2881px){
    .guide-row{
        transform: scale(1.25);
    }
}

/*********************************************************************************************************************************/
/******************************************************** CDISCOUNT **************************************************************/
/*********************************************************************************************************************************/

#cdiscount{
    background-image: url('../img/bg-cdiscount.webp');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: baseline;
}
#cdiscount .wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 1280px !important;
}

#cdiscount .cdiscount-link{
    margin: 1rem auto;
    display: block;
}
#cdiscount  a:hover .cdiscount-link{
    transform: rotate(5deg);
}

.cdiscount_products{
    display: flex ;
        width: 100%;
    gap: 3rem 3%;
    justify-content: center;
}
.cdiscount_product{
    width: 22%;
	height: max-content;
    position: relative;
    z-index: 2;
}
.cdiscount_product>*{
    z-index: 1;
}
.cdiscount_product>div{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 2rem;
    justify-content: space-between;
}
.cdiscount_product:after{
    content: "";
    height: 400px;
    transform: skew(-4deg);
    background: white;
    border-radius: 6px;
    width: 100%;
    z-index: -1;
    display: block;
    position: absolute;
    top: 0;
}

.cdiscount_product:hover{
    transform: scale(1.1);
}

.product_logo{
    transform: translateX(-2rem);
}
.product_title{
    text-align: center;
    color: #12193a;
    font-size: 1.5rem;
    text-transform: uppercase;
    font-family: "kranto-normal-condensed", sans-serif;
    font-weight: 800;
    font-style: italic;
    margin-bottom: 0.25rem;
    line-height: 1.15;
    transform: translateX(-10px);
}

.product_link{
    text-align: center;
    color: #12193a;
    font-size: 1.25rem;
    text-decoration: underline; 
    font-family: "kranto-normal-condensed", sans-serif;
    font-weight: 600;
    font-style: italic; 
    text-transform: uppercase;
    display: block;
    transform: translateX(-12px);
}

.product_image{
    margin: 1.25rem 0;
    max-height: 220px;
}

#cdiscount_product_2 .product_title{
    margin-top: 1.75rem;
}
#cdiscount_product_3 .product_title{
    margin-top: 1.75rem;
}
#cdiscount_product_4 .product_title{
    margin-top: 1.75rem;
}

@media screen and (max-width: 992px){
    #cdiscount .wrapper {
        max-width: 600px !important;
    }
    .cdiscount_products {
        flex-wrap: wrap;
    }
    .cdiscount_product {
        width: 46%;
    }
}

@media screen and (max-width: 800px){
    #cdiscount .cdiscount-link{
        max-width: 70%;
    }   
    .product_title{
        font-size: 1.25rem;
    }
    
}

@media screen and (max-width: 480px){
    .product_logo {
        transform: translateX(-1rem);
    }
    #cdiscount .cdiscount-link{
        margin: 2rem auto;
    }
}

@media screen and (max-width: 420px){
    .product_logo {
        transform: translateX(0rem);
        width: 120px;
    }
    .cdiscount_product>div {
        padding: 2rem 1rem;
    }
    .product_title {
        font-size: 1.25rem;
    }
    .cdiscount_product:after {
        transform: skew(-0deg);
        height: 355px;
    }
    .product_image {
        margin: 2rem 0 0;
        max-height: 175px;
    }
    .product_title {
        transform: translateX(-0px);
    }
    .product_link {
        transform: translateX(-0px);
    }
}

@media screen and (min-width: 1921px){
    #cdiscount .wrapper {
        gap: 4rem;
    }
    #cdiscount .wrapper {
        width: 1680px !important;
    }
    .cdiscount_product>div .product_image{
        transform: scale(1.125)
    }
    .cdiscount_product:after {
        height: 478px;
    }
    .product_logo {
        transform: translateX(-3rem);
    }
    .product_title {
        font-size: 1.375rem;
    }
    #cdiscount .cdiscount-link{
        transform: scale(1.25)
    }
    #cdiscount .cdiscount-link:hover{
        transform: scale(1.5)
    }
}
@media screen and (min-width: 2881px){
    #cdiscount .cdiscount-link:hover{
        transform: scale(1.75)
    }
    #cdiscount .cdiscount-link{
        transform: scale(1.5)
    }
    #cdiscount .wrapper {
        width: 2560px !important;
    }  
    .cdiscount_product:after {
        height: 20rem;
    }
    .cdiscount_product>div .product_image {
        transform: scale(1.5);
        margin: 3rem 0;
    }
    .product_logo {
        transform: translateX(-4rem) scale(1.375);
    }
}

/*********************************************************************************************************************************/
/********************************************************** FOOTER ***************************************************************/
/*********************************************************************************************************************************/

footer{
    background-color: #12193a;
    display: flex;
    flex-direction: column;
}

.footer-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    position: relative;
}

.footer-top>img{
    width: 12rem;
}

.footer-links{
    display: flex;
    gap: 2rem;
}

.footer-links>*{
    text-transform: uppercase;
    color: white;
    font-size: 1.375rem;
    cursor: pointer;
    font-family: 'kranto-text-condensed', sans-serif;
    font-weight: 700;
}

.footer-links>*:hover{
    color: #face02; 
}

.mentions-epic{
    color: #99a8bf;
    font-size: 0.75rem;
    text-align: center;
    padding: 0.5rem 4rem;
    font-family: "Arial";
}

.mentions-epic a{
    color: #99a8bf;
}
.mentions-epic a:hover{
    color: white;
}

.to-top{
    margin-left: 5rem;
}
.to-top svg{
    transform: scale(1.25);
}
.to-top:hover path:first-child{
    fill: white;
}
.to-top:hover path:last-child{
    fill: #3732ff;
}
@media screen and (max-width: 1080px){
    .mentions-epic{
        padding: 0.5rem 2rem;
    }
    .footer-top img{
        width: 140px;
    }
}


@media screen and (max-width: 800px){
    .footer-top {
        flex-direction: column;
        gap: 2rem;
    }

    .to-top{
        position: absolute;
        right: 2rem;
    }
        
    .footer-links {
        display: flex;
        gap: 1rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .mentions-epic{
        font-size: 0.875rem;
        padding: 0.5rem 2rem;
    }
    .to-top svg{
        transform: scale(1);
    }
}

@media screen and (max-width: 480px){
    .to-top{
        right: 1rem;
        top: 1.5rem;
        transform: scale(0.875);
    }
    .to-top svg{
        transform: scale(0.875);
    }    
}






/********************************************************************************/
/******************************* OVERLAY INSCRIPTION ****************************/
/********************************************************************************/


/* Général */
.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    right: 50%;
    bottom: 50%;
    height: 100%;
    width: 100vw;
    transform: translate(-50%, -50%);
    z-index: 9;
    display: none;
}
.popup .main-overlay {
    background-color: rgba(19,26,60,0.75);
    width: 100%;
    height: 100%;
}
#cookies .main-overlay{
    background-image: linear-gradient(to top right, #131a3c, #131a3c 50%, #262464);
    width: 100%;
    height: 100%;   
}

.popup .popup-step {
    padding: 2rem 3rem;
    margin: auto;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: visible;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(to top right, #131a3c, #131a3c 50%, #262464);
    border: 10px solid #3732ff;
    min-width: 50%;
}



/* Step 1 */

.step1-left {
    position: relative;
    position: relative;
    width: 569px;
    height: 297px;
    background-image: url(../img/zone.svg);
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    margin: 0 auto 3rem;
}

.step1-left:hover {
    opacity: 0.7;
}
.step1-left label {
    width: 100%;
    cursor: pointer;
}

input#fakeInput {
    height: 100%;
    width: 100%;
    border-radius: 8px;
    display: block;
    padding: 11px 0;
    box-sizing: border-box;
    border: initial;
    background-color: transparent;
}

.step1-left input#step1-screenshot {
    height: 100%;
    width: 100%;
    position: absolute;
    top: -0;
    left: 0;
    cursor: pointer;
    opacity: 0;
}

.step1-left_text_1{
    color: white;
    font-size: 1.5rem;
    line-height: 1;
    font-family: "kranto-normal-condensed", sans-serif;
    font-weight: 800;
    font-style: italic;
}

.step1-left_text_2{
    color: #feb924;
    font-size: 1rem;
    font-family: "kranto-normal-condensed", sans-serif;
    font-weight: 800;
    font-style: italic;
}
.step1-left_text {
    bottom: 1rem;
    position: absolute;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 85%;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
}

.close-popup {
    position: absolute;
    top: 1rem;
    right: 1rem;
    cursor: pointer;
    padding: 0.25rem;
}
.close-popup:hover{
    opacity: 0.8;
}
.popup h3{
    font-size: 2.5rem;
    font-family: "kranto-normal-condensed", sans-serif;
    font-weight: 800;
    font-style: italic;
    color: white;
    text-transform: uppercase;
    margin-bottom: 0rem; 
    line-height: 1.15;
}
.popup h3+p{
    font-size: 1.75rem;
    color: white;
    margin: 0 0 2rem;
    letter-spacing: 0.05rem;
    font-family: 'kranto-text-semicondensed', sans-serif;
    font-weight: 500;
    font-style: normal;
}

#step-confirmation{
    display: none;
}
/*
#step2{
    display: none;
}*/

@media screen and (max-width: 800px){
    
    .step1-left {
        width: 503px;
        height: 262px;
    }
    #step1 h3 {
        font-size: 1.75rem;
    }
    #step1 h3+p {
        font-size: 1.125rem;
    }
    .popup h3{
        font-size: 1.75rem;
    }
    .popup h3+p {
        margin: 0px 0 1rem;
    }
}

@media screen and (max-width: 600px){
    .step1-left {
        width: 401px;
        height: 209px;
        margin: 0;
    }
    .popup .popup-step {
        padding-top: 2rem;
        padding-bottom: 2rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .row-checkbox {
        max-width: 76%;
    }
    .close-popup {
        top: 1rem;
        right: 1rem;
    }
}

@media screen and (max-width: 480px){
    .popup h3{
        font-size: 1.5rem!important;
    }
    .popup .popup-step {
        width: 94%;
        height: auto;
        box-sizing: border-box;
    }
    .step1-left {
        width: 320px;
        height: 167px;
    }
    .row-checkbox {
        max-width: 74%;
        transform: translatex(2rem);
    }
    .step1-left_text_2{
        font-size: 0.75rem;
    }
}

@media screen and (max-width: 380px){
    .step1-left {
        width: 299px;
        height: 156px;
    }
}

@media screen and (min-width: 1921px){
    .step1-left {
        width: 649px;
        height: 337.5px;
    }
    .popup .popup-step {
        min-width: 50%;
    }
    
    .close-popup {
        transform: scale(1.5);
    }
}
@media screen and (min-width: 2881px){
    .step1-left {
        width: 807px;
        height: 405.5px;
    }
}


/* Step 2 */

#checkboxes{
    flex-direction: column;
    display: flex;
    align-items: flex-start;
}

input[type="checkbox"]{
    left: -9999px !important;
    position: absolute;
}

input[type="checkbox"]+label::before {
    content: "";
    width: 1.875rem;
    height: 1.875rem;
    border: 3px solid #273064;
    display: block;
    background-size: contain;
    position: absolute;
    left: -3.5rem;
    top: 0rem;
}


input[type="checkbox"]:hover+label:after, input[type="checkbox"]:checked+label::after  {
    content:"";
    width: 1rem;
    height: 1rem;
    background-color: #face02;
    display: block;
    position: absolute;
    left: -2.875rem;
    top: 0.75rem;
}

@media screen and (min-width: 1080px){
    #check1+label:before{
        top: -50%;
    }

    #check1:hover+label:after, #check1:checked+label::after{
        top: 0;
    }
}

.inscription-checkboxes>label {
    margin-bottom: 4px;
}

#step2-email{
    border: 2px solid #273064;
    background-color: unset;
    padding: 0.75rem 2rem;
    width: 80%;
    color: white;
    font-size: 1.25rem;
}
#step2-email::placeholder{
    text-align: center;
    color: white;
    text-transform: uppercase;
    font-size: 1.375rem;
    line-height: 1;
    transform: translateY(3px);
    font-family: "kranto-normal-condensed", sans-serif;
    font-weight: 800;
    font-style: italic;
}

#step2 label {
    color: white;
    font-size: 1.25rem;
    position: relative;
    text-align: left;
    line-height: 1.15;
    cursor: pointer;
    font-family: kranto-text, sans-serif;
    font-weight: 400;
    font-style: normal;
}


#step2 label a{
    color: #face02;
    font-size: 1.15rem;
    position: relative;
    text-align: left;
    line-height: 1;
}
#step2 label a:hover{
    color: white;
}
.row-checkbox {
    display: flex;
    align-items: normal;
    justify-content: flex-start;
    width: 100%;
    max-width: 60%;
    margin: 1.25rem auto;
    transform: translatex(2.5rem);
}

:-webkit-autofill {
    transition: all 100000s ease-in-out 0s;
}

#step2 input:focus,
#step2 input:focus-visible {
    color: white;
    outline: none;
    background-color: transparent;   
}


#row-email {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1rem auto;
    width: 100%;
}
#row-email>div {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 68%;
    transform: translatex(1rem);
}

#submit{
    padding: 0;
    border: 0px;
    cursor: pointer;
    width: max-content;
    background-color: transparent;
}
#submit img{
    width: 15rem;
}
#submit:hover{
    transform: rotate(4deg);
}


#step2 .buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    position: absolute;
    bottom: -4rem;
    transform: translateX(-50%);
    left: 50%;
}

@media screen and (max-width: 480px){
    #row-email>div {
        transform: unset;
        max-width: 92%;
    }
    .row-checkbox {
        width: 100%;
        max-width: 75%;
        margin: .75rem auto;
        transform: translatex(2rem);
    }
    #checkboxes {
        gap: 0;
    }
    #step2 label, #step2 label a{
        font-size: 1rem;
    }
    #checkboxes {
        padding-bottom: 3rem;
    }
}

@media screen and (min-width: 1921px){
    
    #step2-email::placeholder{
        transform: translateY(0px);
    }
    #check1+label:before{
        top: -32%;
    }     

}


/* Step 3 */


.end-popup{
    padding: 0;
    font-weight: 700;
    border: 0px;
    cursor: pointer;
    position: absolute;
    bottom: -3rem;
    transform: translateX(-50%);
    left: 50%;
}
.end-popup img{
    width: 13rem;
}
.end-popup:hover{
    transform: rotate(4deg); 
}





/****** COOKIES ******/

#cookies{
    border-top: 2px solid #3732ff;
    color: white;
    position: fixed;
    bottom: 0;
    z-index: 9;
    width: 100%; 
}

#cookies{
    display: none;
}

.charte-cookies{
    color: #feb824;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 500;
    position: relative;
    letter-spacing: 0.05rem;
    margin: 2rem auto;
    display: block;
    width: fit-content;
}
.charte-cookies img{
    max-width: 80%;
    margin: 0 auto;
    display: block;
}
.charte-cookies:hover{
    transform: rotate(4deg);
}
.popup-cookies-main, .popup-cookies-choices{
    padding: 2rem 6rem;
}

.popup-cookies-main h3, .popup-cookies-choices h3{
    color: white;
    margin: 0 auto 1.5rem;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.5rem;
    font-family: "kranto-normal-condensed", sans-serif;
}


.popup-cookies-choices{
    display: none;
}

.cookie-buttons{
    justify-content: center;
    gap: 2rem;
    display: flex;
}

.cookie-buttons>*, #end-cookies{
    cursor: pointer;
    background-color: #262464;
    border: 4px solid #3732ff;
    line-height: 1;
    font-weight: 600;
    width: fit-content;
    padding: 0.75rem 1rem;
    line-height: 1;
    font-size: 1rem;
    width: 20rem;
    font-size: 1rem;
    font-family: "kranto-normal-condensed", sans-serif;
    color: white;
    text-transform: uppercase;
}

#end-cookies{
    margin: 2rem auto 0;
    display: block;
}

.popup-cookies-choices{
    position: relative;
    flex-direction: column;
}
.popup-cookies-choices-table{
    margin: 2rem 0 0;
}
.close-param-cookies-popup{
    position: absolute;
    right: 2rem;
    top: 2rem;
    cursor: pointer;
}
.close-param-cookies-popup:hover{
    opacity: 0.8;
}

.cookie-buttons>*:hover, #end-cookies:hover{
    background-color: #3732ff;
    color: white;
}



.cookies-choices-consent{
    gap: 1rem;
    display: flex;
}

.popup-cookies-choices-block .give-consent_cookies, .popup-cookies-choices-block .no-consent_cookies {
    color: white;
    font-size: 1.125rem;
    cursor: pointer;
    display: inline-block;
    background: transparent;
    line-height: 1;
    border: 1px solid white;
    margin: 0;
    padding: 0.25rem 0.5rem;
    font-family: "kranto-normal-condensed", sans-serif;
    color: white;   
}
.give-consent_cookies:hover, .give-consent_cookies:focus {
    background-color: #188600;
    color: white;
    border-color: #188600;
}
.no-consent_cookies:hover, .no-consent_cookies:focus, .no-consent_cookies:active {
    background-color: #f80d34;
    color: white;
    border-color: #f80d34;
}
@media screen and (max-width: 800px){
    .popup-cookies-main, .popup-cookies-choices {
        padding: 2rem 4rem;
    }
}
@media screen and (max-width: 600px){
    .popup-cookies-main, .popup-cookies-choices {
        padding: 2rem 2rem;
    }
    .close-param-cookies-popup {
        right: 1rem;
        top: 1rem;
    }
}
@media screen and (max-width: 480px){
    .cookie-buttons{
        flex-direction: column;
        align-items: center;
    }
    .cookie-buttons>* {
        height: 3rem;
        width: 100%;
    }
    .popup-cookies-main, .popup-cookies-choices {
        padding: 1.5rem;
    }
    
    .popup-cookies-main h3, .popup-cookies-choices h3{
        font-size: 1.25rem;
    }
}






/*****************************************************************************/
/*********************************** AUTRES **********************************/
/*****************************************************************************/

section#legal{
    height: unset;   
    background-color: #171d3e;  
    min-height: 80vh;
}
section#legal h1{
    color: white;  
    font-size: 4rem;
    text-align: center;
}
section#legal *{
    color: white;  
}

#legal .wrapper{
    min-height: unset;
}

section#legal a:hover{
    color: #face02;
}
section#legal h2 {
    font-size: 2rem;
    text-align: left;
    margin: 2rem 0 1rem;
    line-height: 1;
}
section#legal h3 {
    color: #face02;
    margin: 3rem 0 1rem;
    text-align: left;
    font-size: 2rem;

}
section#legal p {
    margin: 0.5rem 0;
    text-align: justify;
    font-size: 1.125rem;
}

@media screen and (max-width: 1080px){
    section#legal h1 {
        font-size: 3rem;
        margin-top: 3rem;
    }
}
@media screen and (max-width: 992px){
    section#legal h1 {
        font-size: 3rem;
        margin-top: 6rem;
    }
}

@media screen and (max-width: 480px){
    section#legal h1 {
        font-size: 2.5rem;
        margin-top: 6rem;
    }
}