/*********************************************************************************************************************************/
/*********************************************************************************************************************************/
/*********************************************************************************************************************************/
/*********************************************************************************************************************************/
/****************************************************** THEME LIFERUN ************************************************************/
/*********************************************************************************************************************************/
/*********************************************************************************************************************************/
/*********************************************************************************************************************************/
/*********************************************************************************************************************************/


@font-face {
  font-family: 'Bowlby One SC';
  src: url('../fonts/bowlbyone.ttf') format('truetype');
}


@font-face {
  font-family: 'Staatliches';
    src: url('../fonts/Staatliches.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
    src: url('../fonts/roboto.ttf');
}




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



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



h2{
    color: #ffffff;
    text-transform: uppercase;
    font-size: 4rem;
    font-family: 'Bowlby One SC', sans-serif;
    z-index: 1;
    line-height: 1;
    text-align: center;
    font-weight: 400;
    margin: 0 auto 2rem;
}

h2 span{
    border-radius: 0.75rem;
    width: fit-content;
    padding: 0.5rem 1.25rem;
    display: block;
    position: relative;
}

h2 span .h2-deco {
position: absolute;
    right: -1.875rem;
    width: 2.5rem;
    top: -1.25rem;
}

a{
    text-decoration: none;
}

*{
    transition: 0.2s;
}

header{
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 9;
    background-color: rgba(255,255,255,0.1);
}

header.scrolled {
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

header.scrolled .header-result{
    color: #222235;
}
header.scrolled .header-result:hover{
    background: #014186;
    color: white;
}


.header-top-logo{
    position: absolute;
    top: 1rem;
    left: 2rem;
        width: 6rem;
}

.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: #222235;
    font-size: 1.75rem;
    text-transform: uppercase;
    display: block;
    position: relative;
    padding: 1.25rem 2rem;
}
.nav-bar li>a.active:after{
    content: '';
    width: 47px;
    position: absolute;
    bottom: -20px;
    height: 35px;
    background: transparent;
    left: 50%;
    transform: translateX(-50%);
    background-repeat: no-repeat;
}

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



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

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

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

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

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

@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.125rem;
        left: 5.25rem;
        width: 6rem;
    }
    header{
        background-color: #014186;
        height: 5rem;
    }
    .header-top{
        -webkit-box-shadow: unset; 
        box-shadow: unset;
    }
    h2{
        font-size: 3.5rem;
    }
}

@media screen and (max-width: 600px){
    html {
        scroll-padding-top: 3.5rem;
                font-size: 13px;
    }
}
@media screen and (max-width: 480px){
    html {
                font-size: 12.5px;
    }
    h2 span {
        padding: 0.5rem 0.75rem;
    }
}

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


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

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


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




/******* 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 white;
    width: 100%;
}
.menu-panel nav>ul>li:last-child {
    border-bottom: 1px solid white;
}
.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: 'Bowlby One SC', sans-serif;
    font-style: normal;
}

.header-result{
    position: absolute;
    right: 1rem;
        top: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: white;
    font-size: 1.75rem;
    text-transform: uppercase;
    padding: 1.25rem 2rem;
}
.header-result:hover{
    color: #12193a;
}


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


@media screen and (max-width: 1440px) {
    .nav-bar li>a {
        font-size: 1.5rem;
        padding: 1.675rem 1.25rem;
    }
    .header-result {
        font-size: 1.5rem;
        padding: 1.675rem 1.25rem;
    }
}

@media screen and (max-width: 1080px){
    .nav-bar li>a{
        font-size: 1.25rem;
        padding: 1.675rem 1rem;
    }
    .header-result {
        font-size: 1.25rem;
        padding: 1.675rem 1rem;
    }
}



@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;
    }

    h2 span{
        display: block;
    }
    .header-result {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 840px){
    .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{
        right: 0.5rem;
    }
}

@media screen and (min-width: 1921px){

    .nav-bar li>a{
        font-size: 1.5rem;
    }
    .header-result {
        font-size: 1.5rem;
    }
    .header-top-logo {
        width: 5rem;
    }
}

@media screen and (min-width: 2881px){

    .nav-bar li>a{
        font-size: 1.75rem;
    }
    .header-result {
        font-size: 1.75rem;
    }
    .header-top-logo {
        width: 5rem;
    }
}



.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)!important;
        padding: 0 3rem;
    }
    section{
        padding: 3rem 0;
    }
}

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

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

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


@media screen and (max-width: 480px) {
    h2 {
        font-size: 2rem!important;
    }
}

@media screen and (max-width: 380px) {
    h2 {
        font-size: 1.75rem!important;
    }
}
@media screen and (min-width: 1921px) {
    .wrapper {
        width: 2200px;
        max-width: unset;        
    }
    section{
        padding: 4vh 0;
    }
    h2 {
        font-size: 3.5rem!important;
    }


}

@media screen and (min-width: 2881px) {
    .wrapper {
        width: 2560px;
    }
    
}







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

#home{
    display: flex;
    align-items: center;
    background-image: url('../img/hero-bg.webp');
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
     position: relative;
         height: 100vh;
    overflow: hidden;
}


#home .video-box {
    position: absolute;
    right: 0;
    top: 0;
}
#home .video-box{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

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


#home .video-box video{
    position:absolute;
    top:0;
    right:0;
    height:100vh;
    width:auto;
    max-width:none;
}


.top-score{
    position: absolute;
    z-index: 0;
    top: 0;
}


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

@media (min-aspect-ratio: 17/9) {
    #home .video-box video{
        width:105vw;
        height:100vh;
        object-fit:fill;
    }
}

/* Disclaimer */

.home-disclaimer{
    color: #222235;
    font-family: "Roboto";
    font-size: medium;
    position: absolute;
    bottom: 20rem;
    transform: rotate(-90deg);
    right: -12rem;
    z-index: 7;
    font-size: 0.875rem;
}

/**** Home right ****/



.home-right{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    gap: 1rem;
    margin-top: 0rem;
    position: relative;
    transform: translateX(24vw);    
}

.home-animated-logo{
    width: 36rem;
}

.home-right h1{
    font-size: 5.25rem;
    font-family: "Bowlby One SC", sans-serif;
    text-transform: uppercase;
    text-align: center;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    line-height: 1.125;
    margin: 1rem 0;
}
.home-right h1 span:nth-child(2){
    background-color: #014186;
    border-radius: 0.75rem;
    width: fit-content;
    padding: 0.25rem 1.25rem;
}


.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;
}


.home-left-bottom {
    position: absolute;
    bottom: 1.25rem;
    left: 2rem;
    display: flex;
    gap: 1rem;
    color: white;
       min-width: max-content;
}
.home-left-bottom p {
    white-space: nowrap;
    font-size: 1.5rem;
        margin: 0;
    font-family: "Bowlby One SC", sans-serif;
}
.home-left-bottom img{
    width: 7rem;
}
/**** Footer de home ****/

.home-footer{
    position: absolute;
    bottom: 1.25rem;
    width: max-content;
    padding: 0 2rem;
    box-sizing: border-box;
    right: 0;
    display: flex;
    gap: 1rem;
    color: white;
    align-items: center;
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    font-weight: bold;
}
.home-footer p{
    margin: 0;
}


/* Code de la carte */

.copy-code{
    position: relative;
    cursor: pointer;
    width: max-content;
    display: flex;
    flex-direction: column;
}

.mapcode_text{
    font-size: 1.25rem;
    line-height: 1;
    font-weight: normal;
    text-transform: uppercase;
    display: block;
    text-align: center;
    color: #222235;
    margin: 0 auto 0.25rem;
    align-items: center;
    font-family: 'Bowlby One SC', sans-serif;
    width: max-content;
}
.mapcode_numbers{
    color: white;
    font-size: 1.75rem;
    line-height: 1;
    font-weight: 700;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    width: max-content;
    background-color: #222235;
    border-radius: 1.25rem;
    padding: 1.5rem 1.25rem 1.5rem 1.75rem;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}
.mapcode_numbers:after{
    content: "";
    background-color: #00833f;
    width: 1.75rem;
    height: 1.75rem;
    display: block;
    border-radius: 6px;
}

#countdown, #countdown2{
    margin: 0;
    line-height: 1.1;
}

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

.map_code_copy{
    position: absolute;
    bottom: -1.375rem;
    color: #014186;
    font-size: 1rem;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    display: none;
    font-family: "Roboto";
}

#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: 1440px){
    .home-left-bottom {
        bottom: 1rem;
        transform: scale(0.9);
    }
    .home-footer {
        bottom: 1rem;
     } 
    #home .wrapper{
        align-items: flex-end;
    }
    .home-right {
        transform: unset;
        margin-right: 2rem;
    }
}


@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;
    }
        
    .left-menu_content{
        transform: scale(0.75) translateX(-8px);
    }
    .home-footer {
        bottom: 1rem;
        transform: scale(0.9) translate(2.5rem);
    } 
}

@media screen and (max-width: 1080px){ 
    .home-right {
        transform: scale(0.7);
    }
    .map_code_copy {
        top: -1.25rem;
    }
    .home-left-bottom {
        bottom: 1rem;
        transform: scale(0.7) translate(-2rem, 0.5rem);
        left: 1rem;
    }
}

@media screen and (max-width: 992px){
    .top-score {
        display: none;
    }
    #home {
        padding: 7rem 0 2rem;
        background-position: center;
        background-size: cover;
        background-image: url('../img/hero-bg-mobile.webp');
        height: auto;
    }

    .copy-code{
        margin-top: 2rem;
    }
    .main-logo{
        max-width: 60vw;
        height: auto;
    }
    .playable-on {
        gap: 1rem;
        width: fit-content;
        align-items: center;
    }

    .home-right{
        margin: 0 auto;
        transform: unset;
    }
    .home-footer {
        bottom: unset;
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0.25rem;
        padding: 0;
        transform: unset;
    }
     .home-footer img {
        max-width: 100%;
    }   
    .home-animated-logo {
        width: auto;
        max-width: 80vw;
    }
    .home-right h1{
        font-size: 4.5rem;
    }
    
    #home .video-box {
        display: none;
    }
    .home-left-bottom{
            position: relative;
            bottom: unset;
            transition: unset;
            left: unset;
            margin: 2rem auto 2rem;
            transform: unset;
    }
    .home-disclaimer{
        margin: 0;
        font-size: 0.75rem;
        right: -10.75rem;
        bottom: 16rem;
    }
}

@media screen and (max-width: 840px){
    .left-menu {
        display: none;
    }
}


@media screen and (max-width: 480px){
    .home-right .main-logo{
        max-width: 70vw;
    }
    .map_code_bg{
        width: 24rem;
    }
     .home-right h1{
        font-size: 3rem;
    }
    .header-top-logo {
        position: absolute;
        top: 1.25rem;
        left: 5rem;
        width: 5rem;
    }
    #home {
        height: 100dvh;
    }
    .home-footer {
        position: absolute;
        width: 95%;
        left: 50%;
        transform: translateX(-50%);
        bottom: 1rem;
    }
    .copy-code {
        margin-top: 0.5rem;
    }
}


@media screen and (min-width: 1921px){
    #home .wrapper{
        max-width: 1920px;
        align-items: end;
    }
    .playable-on{
        transform: scale(1.25);
    }   
    .home-footer{
        transform: scale(1.25) translate(-3rem, 0.25rem);
    }
    .home-right {
        transform: unset;
    }
    .home-left-bottom {
        bottom: 0.5rem;
    }  
}

@media screen and (min-width: 2881px){
    .home-right {
        transform: translateX(6rem);
    }
    .home-left-bottom{
        transform: scale(1.5) translateX(3rem);
    }
    .playable-on{
        transform: scale(1.5);
    }  
    #home .wrapper{
        max-width: 2560px;
    } 
    .home-footer{
        transform: scale(1.5) translate(-5rem, 0.5rem);
    }
}





/*********************************************************************************************************************************/
/********************************************************* 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 h2 span{
    background-color: #008444;
}



.lots{
    width: unset;
    max-height: 74vh;
    margin: 0 auto;
    max-width: 90%;
}

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

.lots-disclaimer{
    text-transform: uppercase;
    font-size: 1.25rem;
    color: #222235;
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    margin: 0;
}


@media screen and (max-width: 992px){
    #lots .wrapper{
        height: unset;
    }
    .lots-mobile{
        display: block;
        max-height: 60vh;
        width: auto;
        max-width: 80vw;
        }
    .lots{
        display: none;
    }
    .lots-disclaimer{
        bottom: 1rem;
    }
}

@media screen and (max-width: 480px){
    #lots {
        height: calc(100vh - 5rem);
    }
    .lots-mobile{
         max-height: 75vh;   
         max-width: 90vw;    
    }
}



@media screen and (min-width: 1921px){
    .lots-large{
        display: block;
        max-width: 76vw;
    }
    .lots{
        display: none;
    }     
}

@media screen and (min-width: 2881px){
    .lots-large {
        transform: scale(1.25);
    }   
}


/*********************************************************************************************************************************/
/*********************************************************** TRAILER *************************************************************/
/*********************************************************************************************************************************/

#bande-annonce{
    padding: 0;
    background: #0f1430;
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    display: flex;
    padding: 0px;
}

.video-box-resp {
    width: 100%;
    height: 100%;
    padding: 0px;
    overflow: hidden;
}



/* Vidéo */

#bande-annonce .video-box {
    width: 100%;
    height: 100%;
    background-color: black;
    overflow: hidden;
}

#bande-annonce  .video-box-resp {
    width: 100%;
    height: 100%;
    padding: 0px;
    overflow: hidden;
}
#bande-annonce  .video-box-resp video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Écran très large */
@media (min-aspect-ratio: 17/9) {
    #bande-annonce .video-box video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}



video {
    background-color: transparent !important;
}

.display-mobile{
    display: none;
}

@media screen and (max-width: 480px){
    .display-desktop{
        display: none;
    }

    .display-mobile{
        display: block;
    }
}

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


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

#guide h2{
    color: #222235;
}
#guide h2 span{
    display: inline-block;
    border-radius: 0.75rem;
    width: fit-content;
    padding: 0.5rem 1.25rem;
    position: relative;
    background-color: #8cd3f6;
    color: white;
}
.guide-row{
    display: flex;
    justify-content: space-between;
}
.guide-row>.guide-block{
    width: 18%;
    position: relative;
}

.guide-row>.guide-block>img{
    width: 100%;
    position: absolute;
    z-index: 0;
}

.guide-block{
    font-family: 'Bowlby One SC';
    color: white;
    line-height: 1.1;
}


.guide-block_number{
    font-family: 'Bowlby One SC';
    font-size: 4.75rem;
    color: white;
    background-color: #222235;   
    border-radius: 50%;
    position: absolute;
    top:0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6.5rem;
    height: 6.5rem;
    line-height: 1;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.guide-block_text{
    z-index: 3;
    display: block;
    position: relative;
    text-align: center;
    margin-top: 4rem;
    font-size: 1.75rem;
    padding: 0 1rem;
}
.guide-block_text span{
    display: block;
}

#guide-block_2{
    color: #222235;
}

#guide-block_3{
    color: #222235;
}
#guide-block_3 .mapcode{
    font-size: 1.75rem;
    background-color: #00833f;
    border-radius: 12px;
    font-family: "Staatliches";
    text-transform: uppercase;
    padding: 0.5rem 2.5rem;
    width: fit-content;
    margin: 0.75rem auto;
    color: white;
    letter-spacing: 0.05rem;
}

.guide-block_4-link{
    color: #15579e;
    background-color: #fdffff;
    border-radius: 6px;
    font-family: "Staatliches";
    text-transform: uppercase;
    font-size: 1.5rem;
    padding: 0.25rem 1rem;   
    margin: 1rem 0 0 0;
    display: inline-block;
}
.guide-block_4-link:hover{
    color: white;
    background-color: #15579e;
}

.deroulement-block_text img{
    max-width: 90%;
}

@media screen and (max-width: 1440px){
    .guide-block_text{
        font-size: 1.5rem;
    }

    .guide-block_number {
        font-size: 3.75rem;
        width: 5rem;
        height: 5rem;
    }
    .guide-block_text {
        margin-top: 3rem;
    }
}

@media screen and (max-width: 1080px){
    #guide .wrapper{
        gap: 3rem;
        justify-content: center;
    }
    .guide-block_text {
        font-size: 1.125rem;
    }
}

@media screen and (max-width: 992px){
    #guide{
        padding-bottom: 10rem;
    }
    .guide-row {
        display: flex    ;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8rem 1rem;
    }
    .guide-row>.guide-block {
        width: 18.5%;
    }
    .guide-block_text {
        font-size: 1.25rem;
    }
}

@media screen and (max-width: 840px){
    .guide-row>.guide-block {
        width: 28%;
    }
    .guide-row {
        gap: 5rem 3rem;
    }
    #guide .wrapper{
        gap: 1.5rem;
        justify-content: center;
    }
     #guide{
        padding-bottom: 6rem;
    }
    #guide-block_3 .mapcode{
        font-size: 1.5rem;
        padding: 0.5rem 1.5rem;
    }
}
@media screen and (max-width: 600px){
    .guide-row>.guide-block {
        width: 43%;
    }
    .guide-row{
        margin: 0rem 0;
        gap: 6rem 2rem;
    }
    .guide-block_text {
        font-size: 1.375rem;
    }

}

@media screen and (max-width: 480px){
    .guide-row>.guide-block {
        width: 44dvw;
        min-height: 59dvw;
    }
    .guide-block_text {
        font-size: 1.25rem;
    }
    #guide-block_4 .guide-block_text{
        font-size: 1.25rem;
    }
    .guide-row{
        margin: 0rem 0;
        gap: 4rem 0.5rem;
    }
}

@media screen and (max-width: 380px){
    .guide-row>.guide-block {
        width: 43dvw;
        min-height: 59dvw;
    }
    #guide-block_3 .mapcode {
        padding: 0.5rem 1rem;
    }
}


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




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

#cristaline .wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
}


.cristaline-1-left{
   width: 56%;
}

.cristaline-1-left h2{
    text-align: left;
    display: flex;
    align-items: center;
}

.cristaline-1-left h2 span {
    background-color: #00833f;
}

.cristaline-1-left-text{
    text-transform: uppercase;
    color: white;
    font-size: 1.5rem;
    font-family: 'Bowlby One SC', sans-serif;   
    margin-right: 2rem;
}
.cristaline-1-left-source{
    text-transform: uppercase;
    color: #0dab59;
    font-size: 1.25rem;
    font-family: 'Staatliches', sans-serif;   
}

.cristaline-1-right{
   width: 44%;
}

/* Vidéo */
.cristaline-1-right .video-box {
    width: calc(100% - 12px);
    height: 100%;
    background-color: black;
    overflow: hidden;
    width: fit-content;
    overflow: hidden;
    cursor: pointer;
    height: auto;
    position: relative;
    border: 6px solid #18c46b;   
    border-radius: 18px;
}

.cristaline-1-right .video-box-resp {
    width: 100%;
    height: 100%;
    padding: 0px;
    overflow: hidden;
}
.cristaline-1-right .video-box-resp video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.cristaline-1-right>img{
   max-width: stretch;
}

@media screen and (max-width: 1440px){
  #cristaline h2{
        font-size: 3rem;
    }  
}

@media screen and (max-width: 1080px){
    .cristaline-1-left-text{
        font-size: 1.375rem;
    }
}

@media screen and (max-width: 992px){
    #cristaline .wrapper {
        flex-direction: column;
    }
    .cristaline-1-right {
        width: 100%;
    }
    .cristaline-1-left{
     width: 100%;
    }
}

@media screen and (max-width: 480px){
    .cristaline-1-left-text {
        font-size: 1.125rem;
        margin-right: 0rem;
    }
}


#cristaline-2{
    background-color: #c1e5fb;
}

#cristaline-2 h2 span{
    background-color: #014186;
    display: inline-block;
}

#cristaline-2 .wrapper>p{
    font-size: 2rem;
    text-align: center;
    font-family: "Bowlby One SC", sans-serif;
    color: #222235;
    margin-top: 0;
    line-height: 1.15;
}

.engagements-row{
    display: flex;
    max-width: 1480px;
    margin: 6rem auto 0;
    align-items: stretch;
    gap: 1rem;
}

.engagements-block_number{
    font-size: 10rem;
    transform: rotate(-6deg);
    font-family: "Bowlby One SC", sans-serif;
    position: absolute;
    top: -10rem;
    z-index: 0;
}

.engagements-block {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    max-width: none;
}
.engagements-block > div {
    flex: 1;
    z-index: 1;
    border-radius: 1rem;
    border: 6px solid;   
    padding: 1.5rem 1.25rem;   
    position: relative;
}
.engagements-block>div h3{
    margin-top: 0;
   font-size: 1.5rem;
   font-family: 'Bowlby One SC', sans-serif;
   text-transform: uppercase;
   font-weight: 400;
   line-height: 1.15;
}
.engagements-block>div p{
   font-size: 1.125rem;
   font-family: 'Bowlby One SC', sans-serif;
   text-transform: uppercase;
   line-height: 1.25;
}
#engagements-block_1>div{
    background-image: url('../img/engagement-block_1-bg.png');
    background-size: cover;
    border-color: #15579e;
}
#engagements-block_1 .engagements-block_number{
    color: #014186;
}
#engagements-block_1 h3{
    color: white;
}
#engagements-block_1 p{
    color: white;
}
#engagements-block_1 img{
    margin: 1rem auto;
        display: block;
        max-width: 100%;
}
#engagements-block_2>div{
    background-image: url('../img/engagement-block_2-bg.png');
    background-size: cover;
    border-color: #c1e5fb;
}
#engagements-block_2 .engagements-block_number{
    color: #8cd3f6;
}


#engagements-block_3>div{
    background-image: url('../img/engagement-block_3-bg.png');
    background-size: cover;
     border-color: #0dab59;
}
#engagements-block_3 .engagements-block_number{
    color: #00833f;
}


#engagements-block_3 h3{
    color: white;
}
#engagements-block_3 p{
    color: white;
}

#engagements-block_3 .engagement-source{
    color: #222235;
    font-family: "Staatliches", sans-serif;
    text-transform: uppercase;
    font-size: 1rem;
    margin-bottom: 0;
}

.read-more{
    align-items: center;
    background-color: #014186;
    border-radius: 1rem;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    max-width: 992px;
    margin: 2rem auto;
    gap: 1rem;
}


.read-more h3{
    margin: 0;
    font-size: 2.5rem;
    color: white;
    font-family: 'Bowlby One SC', sans-serif;
    font-weight:400;
    line-height: 1.15;
}
.read-more p{
    font-size: 1.25rem;
    color: #c1e5fb;
    font-family: 'Bowlby One SC', sans-serif;
    font-weight:400;
    margin: 0;
}

.read-more a{
    background-color: #8cd3f6;
    border-radius: 1rem;
    color: #222235;
    font-size: 1.5rem;
    padding: 1rem 1rem;
    display: block;
    border-radius: 1rem;
    font-family: 'Bowlby One SC', sans-serif;
    font-weight:400;    
}
.read-more a:hover{
    background-color: white;   
}

@media screen and (max-width: 1080px){
    
    .engagements-row {
        gap: 1rem;
        width: 100%;
        margin: 3rem 0 0;
    }
    .engagements-block_number {
        font-size: 7rem;
        top: -7rem;
    }

    .read-more h3{
        font-size: 2.5rem;
    }
    .read-more p{
        font-size: 1.125rem;
    }
    #cristaline-2{
        height: unset;
    }
}

@media screen and (max-width: 768px){
     .engagements-row {
        gap: 6rem 1rem;
        margin: 3rem 0 0;
        flex-direction: column;
    }
    .read-more {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .read-more div{
        text-align: center;
    }
    .engagements-block>div h3{
        font-size: 1.75rem;
    }
    .engagements-block>div p {
        font-size: 1.25rem;
    }
}

@media screen and (max-width: 480px){
    #cristaline-2 .wrapper>p{
        font-size: 1.75rem;
    }
    #cristaline-2 .wrapper>p br{
        display: none;
    }
    .read-more{
        padding: 1.25rem 1.5rem;
    }
    .read-more h3 {
        font-size: 2rem;
    }
    .read-more a {
        font-size: 1.25rem;
    }
    .engagements-block>div h3{
        margin-bottom: 0.5rem;
    }
    .engagements-row {
        max-width: 1920px;
    }
    .engagements-block_number {
        font-size: 5rem;
        top: -5.2rem;
    }
    #engagements-block_1 img {
        max-height: 4.5rem;
    }
    .engagements-row {
        gap: 5rem 1rem;
        margin: 3rem 0 0;
    }
    .engagements-block > div {
        padding: 1.125rem 1.25rem;
    }
    .engagements-block>div p {
        font-size: 1.125rem;
        margin: 0;
    }
    #engagements-block_3 .engagement-source {
        margin-top: 0.25rem;
    }
}

@media screen and (max-width: 380px){
    .engagements-block>div h3 {
        font-size: 1.375rem;
    }
    .engagements-block>div p {
        font-size: 1.125rem;
        margin: 0;
    }
}

@media screen and (min-width: 1921px){
    .engagements-row {
        max-width: 1920px;
    }
    .read-more{
        max-width: 1480px;
    }
    #cristaline-2 .wrapper>p{
        font-size: 1.75rem;
    }
    .read-more h3 {
        font-size: 2.25rem;
    }
}


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

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

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

.footer-top-logo{
    width: 10rem;
}

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

.footer-links>*{
    text-transform: uppercase;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    font-family: 'Bowlby One SC', sans-serif;
}

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

.footer-separateur{
     text-transform: uppercase;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    font-family: 'Bowlby One SC', sans-serif;
    padding: 0 0.5rem;   
}

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

.mentions-epic>img{
    max-width: 100%;
    margin-bottom: 1rem;
}

.mentions-epic a{
    color: #fdffff;
}
.mentions-epic a:hover{
    color: #8cd3f6;
}

.to-top img{
     width: 4rem;
    margin-left: 2rem;   
}

.to-top:hover{
    opacity: 0.9;
    transform: rotate(6deg);
}


@media screen and (max-width: 1080px){
    .mentions-epic{
        padding: 0.5rem 2rem;
    }
    .footer-links>*{
        font-size: 1.25rem;
    }
}

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

    .footer-links>*{
        font-size: 1.25rem;
    }
}


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

    .to-top{
        position: absolute;
        right: 2rem;
    }

    .footer-separateur{
        display: none;
    }
        
    .footer-links {
        display: flex;
        gap: 1rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .mentions-epic{
        font-size: 0.75rem;
        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.25);
    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-color: #18c46b;
    border: 8px solid white;
    min-width: 40%;
    border-radius: 3rem;
        box-shadow: 5px 6px 0px 0px rgba(0,0,0,0.3);
}



/* Step 1 */

.step1-left {
    position: relative;
    width: 569px;
    height: 336px;
    background-image: url(../img/zone.png);
    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, .step1-left_text_2{
    color: white;
    font-size: 1.5rem;
    line-height: 1.25;
    font-family: "Staatliches", sans-serif;
    font-weight: 600;
}


.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: -1.5rem;
    right: -1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    background: #221d35;
    display: flex;
    border-radius: 50%;
    padding: 0.75rem;
    border: 6px solid white;
    box-shadow: 5px 6px 0px 0px rgba(0,0,0,0.3);
}
.close-popup img {
    width: 2rem;
}
.close-popup:hover{
    opacity: 0.8;
}
.popup h3{
    font-size: 2rem;
    font-family: "Bowlby One SC", sans-serif;
    color: white;
    text-transform: uppercase;
    line-height: 1.15;
    background-color: #221d35;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    width: fit-content;
    margin: 1rem auto 1.5rem;
    font-weight: 400;
    line-height: 1;
    position: relative;
}
.popup h3+p{
    font-size: 1.75rem;
    color: white;
    margin: 0 0 2rem;
    letter-spacing: 0.05rem;
    font-family: 'Staatliches', sans-serif;
    font-weight: 500;
    font-style: normal;
}
.popup-h3-deco{
position: absolute;
    right: -0.875rem;
    width: 1.5rem;
    top: -1rem;
}

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

@media screen and (max-width: 840px){
    
    .step1-left {
        width: 503px;
        height: 297px;
    }
    #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: -3rem;
        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: 189px;
    }
    .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: 176px;
    }
}

@media screen and (min-width: 1921px){
    .step1-left {
        width: 649px;
        height: 383px;
    }
    .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: 2rem;
    height: 2rem;
    border: 4px solid white;
    display: block;
    background-size: contain;
    position: absolute;
    left: -3.5rem;
    top: -0.25rem;
    background-color: #00833f;
    border-radius: 1rem;
}


input[type="checkbox"]:hover+label:after, input[type="checkbox"]:checked+label::after  {
content: "";
    width: 1.25rem;
    height: 1.25rem;
    background-color: white;
    display: block;
    position: absolute;
    left: -2.875rem;
    top: 0.475rem;
    border-radius: 0.5rem;
}

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

#row-email {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1rem auto;
    width: 50%;
}
#row-email>div {
    display: flex;
    align-items: center;
    width: 100%;
    flex-direction: column;
}

#step2-email{
    border: 4px solid white;
    background-color: unset;
    padding: 0.75rem 2rem;
    color: white;
    font-size: 1.25rem;
    background-image: url('../img/input-background.png');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 3rem;
    width: 100%;
}

#row-email label {
    font-family: 'Bowlby One SC', sans-serif;
        color: white;
    font-size: 1.25rem; 
        line-height: 1.15;
            cursor: pointer;
}


#step2 label a{
    color: #222235;
}
#step2 label a:hover{
    color: white;
}
.row-checkbox {
    width: 80%;
    margin: 1rem auto;
    display: flex;
    align-items: flex-start;
}

.row-checkbox label {
    color: white;
    font-size: 1rem;
    position: relative;
    text-align: left;
    line-height: 1.25;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-style: italic;
}

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

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



#submit{
    border: 0px;
    cursor: pointer;
    width: max-content;
    background-color: transparent;
    font-family: 'Bowlby One SC', sans-serif;
    color: white;
    font-size: 1.875rem; 
    line-height: 1.15;
    cursor: pointer;   
    background-color: #222235;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    width: fit-content;
    margin: 1rem auto 0;
}
#submit:hover{
     background-color: white;
     color: #222235;
}

@media screen and (max-width: 1280px){
    #row-email {
        width: 90%;
    }
    .row-checkbox {
        width: 83%;
    }
    input[type="checkbox"]:hover+label:after, input[type="checkbox"]:checked+label::after {
        left: -2.8rem;
        top: 0.5rem;
    }
}


@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){
    input[type="checkbox"]:hover+label:after, input[type="checkbox"]:checked+label::after {
        width: 1.25rem;
        height: 1.25rem;
        left: -2.9125rem;
        top: 0.35rem;
    }
}


/* 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: 4px solid white;
    color: white;
    position: fixed;
    bottom: 0;
    z-index: 9;
    width: 100%; 
}

#cookies{
    display: none;
}

.charte-cookies{
    color: white;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 500;
    position: relative;
    letter-spacing: 0.05rem;
    margin: 2rem auto;
    display: block;
    width: fit-content;
     font-family: "Bowlby One SC", sans-serif;
    font-weight: 400;   
}

.charte-cookies:hover{
    color: #014186;
}

.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: "Bowlby One SC", sans-serif;
    font-weight: 400;
}


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

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

.cookie-buttons>*, #end-cookies{
    cursor: pointer;
    background-color: #014186;
    border-radius: 1rem;
    font-weight: 600;
    width: fit-content;
    padding: 0.75rem 1rem;
    line-height: 1;
    font-size: 1rem;
    width: 20rem;
    font-size: 1rem;
    font-family: "Bowlby One SC", sans-serif;
    color: white;
    text-transform: uppercase;
    border: 0px;
    font-weight: 400;
}
.cookie-buttons>*:hover, #end-cookies:hover{
    background-color: #084f9b;
}

#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: #014186;
    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: "Bowlby One SC", sans-serif;
    color: white;  
    font-weight: 400; 
}
.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: 840px){
    .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;  
}
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;
    }
}