/*****************************************************************************************************/
/*****************************************************************************************************/
/********************************************** MAAF *************************************************/
/*****************************************************************************************************/
/*****************************************************************************************************/

/***** FONTS *****/

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


/***** STYLES *****/

html {
    scroll-behavior: smooth;
    font-size: 1rem;
    scroll-padding-top: 76px;
}

a {
    text-decoration: none;
}

body {
    margin: 0px;
}

section {
    padding: 4rem 0 6rem;
    position: relative;
}
section .wrapper {
    box-sizing: border-box;
    height: calc(100vh - 14.75rem);   
}

h1,
h2 {
    font-size: 4rem;
    font-family: "Bungee";
    text-align: center;
    margin: 0rem auto 2rem;
    line-height: 1.15;
    color: white;
    position: relative;
    z-index: 1;
    font-weight: normal;
}

h3 {
    font-size: 1.675rem;
    font-family: "Bungee";
    font-weight: normal;
    margin: 1rem auto 0.5rem;
    line-height: 1.15;
    text-align: left;
}

p {
    color: white;
    font-family: "brother-1816", sans-serif;
    font-size: 1.25rem;
    text-align: justify;
    line-height: 1.25;
}


main {
    min-height: calc(100vh - 6rem);
}



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

    main {
        min-height: calc(100vh - 71.75px - 161px);
    }
}

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

    main {
        min-height: calc(100vh - 71.75px - 159px);
    }
}

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

    main {
        min-height: calc(100vh - 60.5px - 157px);
    }
}
@media screen and (max-width: 1180px) {
    html {
        font-size: 13px;
    }

    main {
        min-height: calc(100vh - 60.5px - 157px);
    }
}
@media screen and (max-width: 1030px) {
    html {
        font-size: 12px;
    }
    section .wrapper {
        height: auto!important;
    }
    section {
        padding: 3rem 0 4rem;
    }

    main {
        min-height: calc(100vh - 51px - 149px);
    }
}

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

    main {
        min-height: calc(100vh - 66px - 165px);
    }
    section .wrapper {
        height: auto!important;
    }
    h1,
    h2 {
        font-size: 3rem!important;
    }
}

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

    main {
        min-height: unset;
    }

    p {
        font-size: 1.125rem;
    }
}

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

}

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

}

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

    h1,
    h2 {
        font-size: 2.25rem;
    }
}

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

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

    section {
        padding: 4rem 0 8rem;
    }
    section .wrapper {
        height: calc(100vh - 16rem);
        box-sizing: border-box;
    }        
    h1,
    h2 {
        font-size: 5rem;
    }
}

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

/*
::-webkit-scrollbar-thumb {
    background-color: #0ed8d6;
    border: 3px solid transparent;
    border-radius: 8px;
    background-clip: padding-box;
    background-image: url('../img/scrollbar.png');
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0px 0px 0px 2px rgba(14,216,214,1) inset;
    -webkit-box-shadow: 0px 0px 0px 2px rgba(14,216,214,1) inset;
    -moz-box-shadow: 0px 0px 0px 2px rgba(14,216,214,1) inset;
}

::-webkit-scrollbar {
    width: 16px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-moz-scrollbar-button:decrement,
::-moz-scrollbar-button:increment,
::-webkit-scrollbar-button:decrement,
::-webkit-scrollbar-button:increment {
    width: 0px;
}

*/

/******************************************************/
/********************** MAIN PAGE *********************/
/******************************************************/


/************ HEADER **************/


header {
    background-image: linear-gradient(to right, #69cd47, #8cd746);
    position: fixed;
    width: 100%;
    z-index: 9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 4px solid white;
}

.header-top {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (min-width: 1025px) {
    header {
        height: 4.75rem;
    }
}
@media screen and (max-width: 1025px) {
    header {
        height: 4.25rem;
    }
}

/* Logo */

.header-logo{
    position: absolute;
    top:-1rem;
    left: 1.75rem;
    max-width: 14.75rem;
}
.header-logo img{
    width: 100%;
}

/* NAVBAR */

.nav-bar>ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.nav-bar ul>li>a{
    font-family: "Staatliches";
    color: white;
    font-size: 1.5rem;
}
.nav-bar ul>li>a.active, .nav-bar ul>li>a:hover{
    color: #473933;
    text-shadow: 0px 0px 3px rgba(250, 250, 103, 1);
}
/* Envoyer résultat */

.header-result{
    position: absolute;
    right: 0rem;
    cursor: pointer;
    text-align: center;
    background: linear-gradient(to right, #f7d71d, #fbbf1c);
    border-left: 4px solid #f7ee38;
    z-index: 0;
}
.header-result>svg{
    position: absolute;
    width: 15rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -43%);
}
.header-result:hover span{
    text-shadow: 0px 0px 3px rgba(250, 250, 103, 1);
    text-decoration: underline;
}
.header-result>span{
    font-family: "Staatliches";
    font-size: 1.75rem;  
    padding: 1.275rem 2.5rem;
    background: linear-gradient(to top, red, yellow);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: block;
    color: #2f2825;
}
@media screen and (max-width: 992px) {
    html {
        scroll-padding-top: 70px;
    }
}


.home-objets_left{
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: 30vw;
    height: auto;
}
.home-objets_right{
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 29vw;
    height: auto;
}

#poubelle_jaune{
    max-width: 10vw;
    right: 21vw;
    z-index: 3;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-name: homeanim1;
    animation-timing-function: linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);
}
#benne_vetements{
    max-width: 12vw;
    right: 10vw;
    z-index: 2;
    animation-duration: 0.875s;
    animation-delay: 0s;
    animation-name: homeanim2;
    animation-timing-function: linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);
}
#poubelle_verte{
    max-width: 8vw;
    right: 2vw;
    animation-duration: 1.375s;
    animation-delay: 0s;
    animation-name: homeanim3;
    animation-timing-function: linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);
    z-index: 3;
}

#panneau_tri{
    max-width: 6.25vw;
    right: 1vw;
    bottom: 4.25rem;
    animation-duration: 1.75s;
    animation-delay: 0s;
    animation-name: homeanim4;
    animation-timing-function: linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);
    z-index: 2;
}

/*
@keyframes homeanim1 {
    from {
        opacity: 0;
        transform: translateY(100vw)
    }

    50% {
        opacity: 0;
        transform: translateY(20vw)
    }

    to {
        opacity: 1;
    }
}

@keyframes homeanim2 {
    from {
        opacity: 0;
        transform: translateY(100vw)
    }

    60% {
        opacity: 0;
        transform: translateY(20vw)
    }
    to {
        opacity: 1;
    }
}
@keyframes homeanim3 {
    from {
        opacity: 0;
        transform: translateY(100vw)
    }

    70% {
        opacity: 0;
        transform: translateY(20vw)
    }
    to {
        opacity: 1;
    }
}
@keyframes homeanim4 {
    from {
        opacity: 0;
        transform: translateY(100vw)
    }

    70% {
        opacity: 0;
        transform: translateY(20vw)
    }
    to {
        opacity: 1;
    }
}
*/
@media screen and (max-width: 800px){
    #poubelle_jaune{
        max-width: 16vw;
        right: 26vw;
     }
    #benne_vetements{
        max-width: 16vw;
        right: 12vw;
   }
    #poubelle_verte{
        max-width: 13vw;
        right: 1vw;
    }
    #panneau_tri {
        max-width: 9vw;
        right: 0.5vw;
        bottom: 2.75rem;
    }
    
}


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

.menu-mobile {
    display: none;
}


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

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

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

.menu-panel nav>ul {
    padding: 0;
    list-style-type: none;
}

.menu-panel nav>ul>li {
    border-top: 1px solid #fbbc1c;
}
.menu-panel nav>ul>li:last-child {
    border-bottom: 1px solid #fbbc1c;
}
.menu-panel nav>ul>li>a {
    color: white;
    font-size: 2rem;
    font-family: "Bungee";
    text-transform: uppercase;
    display: block;
    text-align: center;
    padding: 1.25rem 0;
    margin: 0.5rem 0;
    line-height: 1;
}


.burger-close{
    position: absolute;
    top: 0rem;
    cursor: pointer;
    width: 5rem;
}

@media screen and (max-width: 1280px) {
    .nav-bar li>a {
        font-size: 1.375rem;
        margin: 0 0.75rem;
    }

    .header-logo>img {
        max-width: 13rem;
        margin-top: 0rem;
    }

    .header-inscription {
        font-size: 1.375rem;
    }
    .nav-bar ul {
        gap: 0.25rem;
    }
    .header-result>span {
        font-size: 1.5rem;
        padding: 1.45rem 2.5rem;
    }
}


@media screen and (max-width: 1180px){
    .nav-bar ul {
        gap: 0.125rem;
    }
    .nav-bar li>a {
        margin: 0 0.5rem;
    }
    .nav-bar ul>li>a {
        font-size: 1.375rem;
    }
    .header-result>span {
        font-size: 1.375rem;
        padding: 1.5rem 2.5rem;
    }
}

@media screen and (max-width: 1024px){
    .header-logo {
        top: -0.875rem;
    }
}

@media screen and (max-width: 992px) {
    .menu-panel .header-logo {
        margin: 2rem auto;
    }    
    .menu-panel .header-logo>img {
        max-width: unset;
    }   
    header {
        background-color: black;
        box-shadow: 0px 78px 34px 0px rgba(0, 0, 0, 0.95) inset;
        -webkit-box-shadow: 0px 78px 34px 0px rgba(0, 0, 0, 0.95) inset;
        -moz-box-shadow: 0px 78px 34px 0px rgba(0, 0, 0, 0.95) inset;
    }
    .header-top {
        height: 4.5rem
    }
    .menu-mobile {
        display: block;
    }

    .nav-bar {
        display: none;
    }
    .header-logo {
        position: relative;
        top: unset;
        left: unset;
        margin: 3rem auto;
        text-align: center;
        display: block;
        max-width: 18rem;
    }
    .header-top>.header-logo {
        display: none;
    }
    .header-result>span {
        padding: 1.325rem 2.5rem;
    }
}

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

@media screen and (max-width: 420px) {
    .header-inscription img {
        display: none;
    }
    .header-result>span {
        padding: 1.225rem 2.5rem;
    }
}


.wrapper {
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 2rem;
}




@media screen and (max-width: 1680px) {
    .wrapper {
        max-width: 99rem;
    }
}
@media screen and (max-width: 1440px) {
    .wrapper {
        max-width: 89rem;
    }
}
@media screen and (max-width: 1280px) {
    .wrapper {
        max-width: calc(100% - 8rem);
    }
}
@media screen and (max-width: 1024px) {
    .wrapper {
        max-width: calc(100% - 6rem);
        padding: 0 3rem;
    }
}
@media screen and (max-width: 992px) {
    .wrapper {
        max-width: calc(100% - 4rem);
        padding: 0 2rem;
    }
}
@media screen and (max-width: 800px) {
    .wrapper {
        padding: 0 1rem;
        max-width: calc(100% - 3rem);
    }

    h2 {
        font-size: 3rem!important;
    }

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

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

@media screen and (max-width: 480px) {
    .wrapper {
        padding: 0;
        max-width: calc(100% - 2rem);
        margin: 0 auto;
    }
}

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

@media screen and (min-width: 1921px) {
    .wrapper {
        max-width: 1860px;
    }
    #home     .wrapper {
        max-width: unset;
    }
}

@media screen and (min-width: 2561px) {
    .wrapper {
        max-width: 2200px;
    }
}
/*********************************/
/************ HOME **************/
/*********************************/

#home {
    overflow: hidden;
    box-shadow: 0px 78px 52px 0px rgba(0, 0, 0, 0.95) inset;
    -webkit-box-shadow: 0px 78px 52px 0px rgba(0, 0, 0, 0.95) inset;
    -moz-box-shadow: 0px 78px 52px 0px rgba(0, 0, 0, 0.95) inset;
    background-color: black;
    padding-bottom: 0;
}

#home .wrapper{
    max-width: 100%;
    display: flex;
    position: relative;
    height: calc(100vh - 4rem);
    align-items: center;
    justify-content: space-around;
    background-repeat: no-repeat;
    background-image: url('../img/home_bg.webp');
    background-size: cover;
    background-position: top center;
}

#home .wrapper>div{
    width: 29%;
}

/* Home left */

#home h1 span:first-child{
    color: white;
    font-family: "Staatliches";
    font-size: 4.75rem;
    text-align: center;
    display: block;
    line-height: 1.5;
}
#home h1 span:last-child{
    color: white;
    font-family: "Bungee";
    font-size: 3.25rem;
    text-align: center;
    display: block;
    line-height: 1.15;
}


/* home center */

.home-center{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.main-logo{
    padding-top: 5rem;
    max-width: 100%;
    height: auto;
    margin-bottom: 2rem;
}

/* Home right */

.home-right{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0;
    align-items: center;
    justify-content: center;
}

.home-right h1 span{
    color: white;
    font-family: "Alpine Light";
    font-size: 2.5rem;
    text-align: center;
}

.home-result-text{
    color: white;
    font-family: "Bungee";
    font-size: 2rem;
    text-align: center;  
    cursor: pointer;
    position: absolute;
    top: 50%;
    margin: 0;
    left: 50%;
    transform: translate(-50%, -52%);
    display: inline-block;
    width: max-content;
    background: -webkit-linear-gradient(#2e2825, #433731);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

*{
    transition: 0.2s;
}
*:hover{
    transition: 0.2s;
}

.yellow-cta{
    position: relative;
    width:fit-content;
    margin-top: 2rem;
    z-index: 4;
    cursor: pointer;
}

.yellow-cta:hover{
    transform: scale(1.1);
}


.available-on{
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-direction: column;
    font-family: "Bungee";
    font-size: 1.5rem;
    text-align: center;
}
.available-on img{
    max-width: 120%;
    margin-top: .5rem;
}

.created-in{
    margin-top: 0rem;
    max-width: 84%;
}
.display-mobile{
    display: none;
}

.copy-code{
    position: relative;
    cursor: pointer;
    text-align: center;
}
.copy-code img{
    max-width: 95%;
}
.copy-code:hover{
    transform: scale(1.05);
}
.map_code_copy, .map_code_copy#map-code-copied2{
    display: none;
    color: white;
    font-size: 1.125rem;
    text-align: center;
    font-family: "staatliches", sans-serif;
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
}

.map_code_copy, .map_code_copy#map-code-copied2 {
    font-size: 0.725rem;
    bottom: -0.5rem;
}

#code-map-1, #code-map-2{
    display: none;
}

@media screen and (max-width: 1366px){
    .yellow-cta img{
        transform: scale(0.8);
    }   
}
@media screen and (max-width: 1280px){
    .yellow-cta {
        margin-top: 0rem;
    }
    #home h1 span:first-child{
        font-size: 4.25rem;
    }
    .yellow-cta img{
        transform: scale(0.75);
    }   
}

@media screen and (max-width: 992px){
    #home h1 span:first-child {
        font-size: 3rem;
    }
    #home h1 span:last-child {
        font-size: 2.125rem;
    }
    .home-result-text{
        font-size: 1.5rem;
    }
    .available-on img {
        max-width: 100%;
    }
}

@media screen and (max-width: 800px){
    #home {
        padding: 0;
    }
    #home .wrapper{
        flex-direction: column;
        padding: 3rem 0 13rem;
        background-position: unset;
    }
    #home .wrapper>div {
        width: unset;
    }
    .main-logo {
        padding-top: 0rem;
        max-width: 100%;
    }
    .yellow-cta img {
        max-width: 500px;
    }
    #home h1 span:last-child br{
        display: none;
    }
    .main-logo {
        max-width: 22rem;
    }
    .created-in {
        margin-top: 0rem;
        max-width: 15rem;
    }
    .home-left{
        padding-top: 3rem;
    }
    .copy-code img {
        max-width: 340px;
        margin: 0 auto;
    }
    .available-on img {
        max-width: 320px;
    }
    .home-objets_left {
        max-width: 42vw;
    }
}

@media screen and (max-width: 480px){
    .yellow-cta img {
        transform: unset;
        max-width: 340px;
    }
    .home-result-text{
        font-size: 1.375rem;
    }
    #home h1 span:last-child {
        font-size: 2rem;
    }
    .available-on img {
        max-width: 300px;
    }
    .main-logo {
        max-width: 90%;
    }
    .copy-code {
        margin-top: 0;
        margin-bottom: 0rem;
    }
    .available-on {
        margin-bottom: 2rem;
    }
    #home .wrapper {
        padding: 3rem 0 8rem;
    }
}

@media screen and (max-width: 380px){
    .available-on {
        font-size: 1.375rem;
        margin-bottom: 1.5rem;
    }
    #home .wrapper {
        padding: 2rem 0 6.5rem;
    }
}


@media screen and (min-width: 1921px){
    
    .yellow-cta img{
        transform: scale(1.25);
    }
    #home .wrapper>div {
        transform: scale(1.25);
    }
    .header-logo {
        top: -0.5rem;
    }
    .header-logo img {
        transform: scale(1.25);
    }
    .nav-bar ul>li>a {
        font-size: 1.75rem;
    }
    .main-logo{
        padding-top: 0rem;
    }
}
@media screen and (min-width: 2561px){
    
    .yellow-cta img{
        transform: scale(1.75);
    }
    #home .wrapper>div {
        transform: scale(1.75);
    }
    .header-logo {
        top: -0.125rem;
        left: 3rem;
    }
    .header-logo img {
        transform: scale(1.5);
    }
    .nav-bar ul>li>a {
        font-size: 2rem;
    }
}

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

#course {
    padding: 0;
}

#course h2 {
    position: absolute;
    text-align: left;
    color: white;
    left: 10%;
    top: 30%;
}

#course h2 span {
    color: #0ed8d6;
}

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

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

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


video {
    background-color: transparent !important;
}



/*********************************/
/************* LOTS **************/
/*********************************/
#lots{
    background-image: url('../img/bg_lots.webp');
    background-position: bottom;
    background-size: cover;
}

#lots .wrapper{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: calc(100% - 4rem);
}

#lots h2{
    color: white;
    text-shadow: 0px 0px 13px rgba(214, 169, 149, 0.6);
    margin: 0 0 0.5rem;
}

#lots h2>span:first-child{
    font-size: 2rem;
    display: block;
    letter-spacing: -0.05rem;
}
#lots h2>span:last-child{
    font-size: 3.25rem;
    display: block;
    letter-spacing: -0.05rem;
}

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

    #lots h2>span:first-child{
        font-size: 3.5rem;
        display: block;
        letter-spacing: -0.05rem;
    }
    #lots h2>span:last-child{
        font-size: 4.5rem;
        display: block;
        letter-spacing: -0.05rem;
    }
 }
.flex-row{
    display: flex;
    gap: 0.5rem;
}

.lots-mention{
    font-size: 0.875rem;
    text-align: center;
    margin: 0 0 2rem;
}

.lots-box{
    width: fit-content;
    margin-top: -2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 20%;
}

.lots-box_text{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: .5rem;
}
.lots-box img{
    max-width: 100%;
    max-height: 55vh;
}

.lots-box_text svg{
    margin-bottom: 0.875rem;
}
.lots-box_text span:nth-child(2){
    color: white;
    font-family: "Bungee";
    text-align: center;
    letter-spacing: -0.05rem;
    display: block;
    font-size: 2.25em;
    line-height: 1;
}

.lots-box_text span:nth-child(3){
    color: #211e1e;
    font-family: "Bungee";
    text-align: center;
    letter-spacing: -0.05rem;
    display: block;
    font-size: 4em;
    line-height: 1;
}

/* Box 1 lot */

#lots_1{
    font-size: 1rem;
}
#lots_2{
    font-size: 0.8rem;
    padding-top: 2rem;
}
#lots_3{
    font-size: 0.6rem;
    padding-bottom: 8rem;
}
#lots_3 img{
    margin-left: 2rem;
}
#lots_4{
    font-size: 0.5rem;
    padding-bottom: 8rem;
}
/* Infobox recond */

.lots_infobox{
    position: relative;
    width: fit-content;
    margin-bottom: auto;
}
.lots_infobox>div{
    position: absolute;
    padding: 0rem 3rem;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}
.lots_infobox>div>h3{
    color: #211e1e;
    font-size: 1.5rem;
    font-family: "Bungee";
    text-align: center;
    letter-spacing: -0.05rem;
}

.lots_infobox>div>p{
    color: #695344;
    font-size: 1.125rem;
    text-align: center;
    font-family: "brother-1816", sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1.15;
    margin-top: 0.5rem;
}

/*Panneau Lots pour tous */

.lots_forall{
    width: fit-content;
    position: absolute;
    bottom: 1rem;
    right: 4rem;
}
.lots_forall img{
    max-width: 30rem;
}
.lots_forall_text{
    position: absolute;
    top: -1rem;
    transform: rotate(-4deg) translateX(-50%);
    left: 50%;
    width: max-content;
}
.lots_forall_text p{
    margin: 0;
}
.lots_forall_text p:first-child{
    color: white;
    font-size: 1.625rem;
    font-family: "Bungee";
    text-align: center;
    letter-spacing: -0.05rem;  
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
}
.lots_forall_text p:nth-child(2){
    color: #7cd245;
    font-size: 1.5rem;
    font-family: "Bungee";
    text-align: center;
    letter-spacing: -0.05rem;
    margin-top: 1.75rem;
}
.lots_forall_text p:last-child{
    color: #d2f24a;
    font-size: 3rem;
    font-family: "Bungee";
    text-align: center;
    letter-spacing: -0.05rem;  
}

@media screen and (max-width: 1366px){
    
    #lots .wrapper{
        max-width: calc(100%);
    }
    .lots-box{
        margin-top: 0;
    }
    .lots-box img{
        max-width: 88%;
    }
    .lots_infobox{
        transform: translateY(-2rem);
    }  
    .lots_infobox img{
        max-width: 92%;
    }   
    .lots_infobox>div>h3 {
        font-size: 1.375rem;
    }
    .lots_infobox>div {
        padding: 0rem 3.25rem;
    }
    .lots_forall {
        bottom: 0rem;
        right: 4rem;
        transform: scale(0.875);
    }
    .lots_infobox>div>p {
        font-size: 1.125rem;
    }
}
@media screen and (max-width: 1280px){
    
    .lots_infobox>div>p {
        margin: 0 1rem;
    }
}

@media screen and (max-width: 1080px) and (min-width: 993px){
    .lots_infobox{
        width: 22%;
        transform: translateY(-5rem) translateX(13px);
    }  
     .lots_infobox img{
        max-width: 123%;
    }  

    .lots_infobox>div {
        padding: 0rem 1rem;
    }
}


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

    #lots h2>span:last-child{
        font-size: 2.875rem;
    }
    #lots h2>span:first-child {
        font-size: 1.75rem;
    }

    .lots-box img {
        max-width: 71%;
        max-height: 270px;
    }
    .flex-row {
        flex-wrap: wrap;
    }
    .lots-box {
        margin-top: 0rem;
        width: 24%;
    }
    .lots_infobox img {
        max-width: 81%;
        transform: rotate(90deg);
        max-height: unset;
    }
    .lots_infobox {
        position: absolute;
        width: fit-content;
        margin-bottom: auto;
        bottom: -5rem;
        width: unset;
        right: 3rem;
    }
    .lots_infobox>div>h3 {
        font-size: 1.125rem;
        margin: 0.75rem auto 0.25rem;
    }
    .lots_infobox>div>p {
        font-size: 1.025rem;
        line-height: 1.05;
    }
    .lots_forall {
        bottom: -1rem;
        right: unset;
        transform: scale(0.7) translateX(-3rem);
        left: 0;
    }
    .lots_infobox>div {
        padding: 0rem;
    }
    .lots-box_text{
        padding: 0 1.5rem;
    }
    .lots-box_text span:nth-child(3) {
        font-size: 2.5em;
    }
    .lots-box_text span:nth-child(2) {
        font-size: 2.5em;
    }
    #lots .wrapper {
        padding-bottom: 5rem;
    }
    #lots{
        background-image: url('../img/lots_med.webp');
        background-position: top;
    }

}
@media screen and (max-width: 800px){
    .lots_forall {
        bottom: -1rem;
        right: unset;
        transform: scale(0.55) translateX(-30%);
        left: 0;
    }
    .lots_infobox {
        transform: scale(0.9);
    }
}

@media screen and (max-width: 768px){
    .lots-box {
        width: 24%;
    }
    .lots_infobox {
        width: unset;
        right: 2rem;
    }   
    #lots {
        padding: 3rem 0 4rem;
    }
    .lots_infobox img {
        max-width: 76%;
    }
    .lots_infobox>div>h3 {
        font-size: 1.25rem;
        margin-top: 0.25rem;
    }
    .lots_infobox>div>p {
        font-size: 1rem;
        line-height: 1.15;
    }
}

@media screen and (max-width: 604px){
    .lots_infobox {
        right: 0rem;
    }
    .lots-box_text span:nth-child(3) {
        font-size: 2.25em;
    }
    .lots_infobox {
        transform: scale(0.85);
    }
    .lots_forall {
        transform: scale(0.55) translateX(-34%);
    }
    #lots_3 img {
        margin: 0;
    }

}
@media screen and (max-width: 480px){
    #lots{
        background-image: url('../img/lots_mobile.webp');
    }
    #lots h2>span:last-child {
        font-size: 2.25rem;
    }
    #lots h2>span:first-child {
        font-size: 1.5rem;
    }
    .lots-box {
        width: calc(50% - 0.5rem);
    }
    #lots_3 {
        padding-bottom: 1rem;
    }
    #lots_4 {
        font-size: 0.5rem;
        padding-bottom:1rem;
    }

    .lots-box>img {
        max-width: 82%;
        max-height: 224px;
    }
    .lots_forall img {
        transform: rotate(3.5deg);
    }
    .lots_forall_text {
        top: -0.125rem;
        transform: translateX(-50%);
    }
    .lots_infobox img {
        max-width: 244px;
        max-height: unset;
    }
    .lots_infobox>div {
        padding: 0rem 3rem;
    }

    .infotri-box {
        gap: 1rem;
    }
    #lots .wrapper {
        padding-bottom: 0rem;
    }
    #lots {
        background-position: top;
    }
    .lots_infobox {
        right: 0rem;
        position: relative;
        right: unset;
        top: unset;
        bottom: unset;
        transform: unset;
        width: 340px !important;
        margin: 0 auto;
        margin-top: 8rem;
        max-height: 260px;
    }
    .flex-row {
        display: flex;
        gap: 1.5rem 1rem;
        align-items: baseline;
    }

    .lots_forall {
        transform: scale(1) translateX(-50%);
        bottom: 25.5rem;
        left: 50%;
        text-align: center;
    }
    .lots_forall img {
        transform: rotate(3deg);
        max-width: 326px;
        margin: 0 auto;
    }
    .lots_infobox>div {
        padding: 0rem 0.75rem;
    }
    .lots_forall_text p:first-child {
        font-size: 1.275rem;
    }
    .lots_forall_text p:nth-child(2) {
        font-size: 1.25rem;
        margin-top: 1.5rem;
    }
    .lots_forall_text p:last-child {
        font-size: 1.5rem;
    }
}

@media screen and (min-width: 1921px){
    .lots-box img{
        transform: scale(1.25);
    }
    .lots_infobox img{
        transform: scale(1.25);
    }
    .lots_forall img {
        transform: scale(1.25);
    }
    .lots_forall_text p:nth-child(2) {
        margin-top: 1.5rem;
    }
    .lots_forall {
        bottom: 4rem;
        right: 11rem;
    }
    .lots-box_text span:nth-child(2) {
        font-size: 3em;
    }
    .lots-box_text span:nth-child(3) {
        font-size: 4.5em;
    }
    .lots_forall_text {
        top: -2.25rem;
    }
    #lots .wrapper {
        justify-content: space-around;
    }
}
@media screen and (min-width: 2561px){
    .lots-box img{
        transform: scale(1.5);
    }
    .lots-box_text {
        margin-top: 7rem;
    }
    .lots_infobox>div>h3 {
        font-size: 1.75rem;
    }
    .lots_infobox>div>p {
        font-size: 1.5rem;
    }
    .lots-box_text span:nth-child(2) {
        font-size: 3.5em;
        margin-top: 1rem;
    }
    .lots_forall {
        bottom: 17rem;
        right: 11rem;
    }
}
/*********************************/
/********* GUIDE DE JEU ***********/
/*********************************/

#guide{
    background-image: url('../img/bg_guide.webp');
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

#guide .wrapper{
    width: calc(100% - 4rem);
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0rem;
}

#guide .flex-row{
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: 1rem;
}

.guide-bottom{
    position: absolute;
    bottom: -2.5rem;
    left: 50%;
    transform: translateX(-50%);
    max-width: 48%;
}

.guide-box{
    position: relative;
    max-width: 20%;
    font-size: 0.95rem;
}

.guide-box+svg{
    width: 2.5rem;
}
.guide-box>img{
    width: 100%;
}
.guide-box-text span{
    font-family: "Bungee"; 
    display: block;
    text-align: center;
    line-height: 1;
}
.guide-box-text img{
    max-width: 100%;
}


/* Box 1*/
#guide-box_1{
    margin-top: 5rem;
}
#guide-box_1 .guide-box-text{
    position: absolute;
    left: 51%;
    transform: translateX(-50%) translateY(-50%) rotate(-9deg);
    top: 50%;
}
#guide-box_1 .guide-box-text span:first-child{
    color: #c1eb49;
    font-size: 2.175em;
}
#guide-box_1 .guide-box-text span:nth-child(2){
    color: white;
    font-size: 1.5em;
}
#guide-box_1 .guide-box-text span:nth-child(3){
    color: white;
    font-size: 1.5em;
}
#guide-box_1 .guide-box-text span:nth-child(4){
    color: white;
    font-size: 4em;
}
#guide-box_1 .guide-box-text img{
    margin-top: 2em;
    transform: rotate(8deg);
}
#guide-box_1+svg{
    margin-left: -1.25rem;
    margin-top: 2rem;
}


/* Box 2*/
#guide-box_2{
    margin-top: 1rem;
}
#guide-box_2 .guide-box-text{
    position: absolute;
    left: 51%;
    transform: translateX(-50%) translateY(-50%) rotate(-5deg);
    top: 50%;
}

#guide-box_2 .guide-box-text span:first-child{
    color: #b37e63;
    font-size: 2.175em;
}
#guide-box_2 .guide-box-text span:nth-child(2){
    color: white;
    font-size: 2.25em;
}
#guide-box_2 .guide-box-text span:nth-child(3){
    color: white;
    font-size: 1.675em;
}
#guide-box_2 .guide-box-text img{
    margin: 1rem auto;
    display: block;
}

#guide-box_2 .guide-box-text span:nth-child(5){
    color: white;
    font-size: 1.5em;
}
#guide-box_2 .guide-box-text span:nth-child(6){
    color: #b37e63;
    font-size: 3.5em;
}

/* Box 3*/
#guide-box_3 .guide-box-text{
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
}

#guide-box_3 .guide-box-text span:first-child{
    color: #fcbb1e;
    font-size: 2.25em;
}
#guide-box_3 .guide-box-text>span:nth-child(2){
    color: #fcbb1e;
    font-size: 2.5em;
}
#guide-box_3 .guide-box-text span:nth-child(4){
    color: white;
    font-size: 1.675em;
}

#guide-box_3 .guide-box-text span:nth-child(5){
    color: white;
    font-size: 1.75em;
}
#guide-box_3 .guide-box-text img{
    margin: 0.5rem auto 0.75rem;
    display: block;
}
#guide-box_3 .guide-box-text img:nth-child(6){
    max-width: 64%;
}
#guide-box_3+svg{
    margin-left: .75rem;
    margin-right: -0.5rem;
}
/* Box 4*/

#guide-box_4{
    margin-top:2rem;
}
#guide-box_4 .guide-box-text{
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(6deg);
    top: 50%;
}

#guide-box_4 .guide-box-text span:first-child{
    color: #55cdda;
    font-size: 1.875em;
}
#guide-box_4 .guide-box-text span:nth-child(2){
    font-size: 2.5em;
    background: linear-gradient(to right, #4eafdf, #55d1da);  
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
#guide-box_4 .guide-box-text span:nth-child(3){
    font-size: 2.5em;
    background: linear-gradient(to right, #4da7e0, #53c8db);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#guide-box_4 .guide-box-text span:nth-child(4){
    color: white;
    font-size: 1.5em;
}
#guide-box_4 .guide-box-text span:nth-child(5){
    font-size: 1.25em;
    margin: 1rem 0;
    background: linear-gradient(to right, #4b97e1, #4eabe0);  
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;  
}
#guide-box_4 .guide-box-text img{
    margin: -1.5rem auto 0;
    display: block;
    transform: rotate(-6deg);
}

#guide-box_4+svg{
    margin-left: 0rem;
    margin-right: -1rem;
    margin-top: 3rem;
}

.guide-box-text_participation{
    cursor: pointer;
    margin-top: 0.75rem;
}
.guide-box-text_participation:hover{
    transform: rotate(-6deg) scale(1.05)!important;
}

/* Box 5*/

#guide-box_5{
    margin-top: 7rem;
}
#guide-box_5 .guide-box-text{
    position: absolute;
    left: 50%;
    transform: translateX(-43%) rotate(10.5deg);
    top: 10%;
}

#guide-box_5 .guide-box-text span:first-child{
    color: #ea346c;
    font-size: 2.5em;
}
#guide-box_5 .guide-box-text span:nth-child(2){
    font-size: 1.75em;
    color: white;
}
#guide-box_5 .guide-box-text span:nth-child(3){
    font-size: 4.5em;
    color: white;
}

#guide-box_5 .guide-box-text span:nth-child(4){
    color: #e05b77;
    font-size: 1.375em;
}


@media screen and (max-width: 1440px){
    .guide-box{
        font-size: 0.875rem;
    }
    .guide-box+svg{
        transform: scale(0.75);
    }
}
@media screen and (max-width: 1366px){
    .guide-box{
        font-size: 0.8rem;
    }
    #guide .flex-row {
        margin-top: 0rem;
    }
}

@media screen and (max-width: 1280px){
    #guide-box_1 .guide-box-text{
        left: 50%;
    }
    .guide-box+svg {
        width: 3.5rem;
    }
}

@media screen and (max-width: 1024px){
    .guide-box{
        font-size: 0.75rem;
    }
    #guide .flex-row {
        margin-top: 0;
        margin-bottom: 5rem;
    }
    .guide-box+svg{
        width: 4.5rem;
    }
    .guide-box+svg {
        transform: scale(0.6);
    }
}

@media screen and (max-width: 992px){
    #guide .flex-row {
        flex-wrap: wrap;
        align-items: baseline;
    }
    #guide .flex-row {
        gap: 2rem;
    }
    .guide-box{
        font-size: 0.75rem;
        max-width: 30%;
    }
    #guide-box_1 .guide-box-text {
        left: 58%;
    }

    #guide-box_1 {
        margin-top: 0;
        transform: rotate(9deg) translateX(-0.75rem);
    }
    #guide-box_1 img{
        width: 117%;
    }
    #guide-box_2 img{
        width: 107%;
    }
    #guide-box_2 {
        margin-top: 0;
        transform: rotate(5deg);
    }
    #guide-box_2 .guide-box-text {
        left: 54%;
    }
    .guide-box+svg {
        display: none;
    }
    #guide-box_4 {
        margin-top: 0rem;
        transform: rotate(-6deg);
    }
    #guide-box_4>img {
        width: 106%;
    }
    #guide-box_4 .guide-box-text {
        left: 54%;
    }
    #guide-box_5 {
        margin-top: 0;
        transform: rotate(-10deg);
    }
    #guide-box_5>img {
        width: 113%;
    }
    #guide-box_5 .guide-box-text {
        transform: translateX(-33%) rotate(10.5deg);
    }
    #guide .wrapper {
        width: calc(100% - 3rem);
    }
}

@media screen and (max-width: 800px){
    .guide-box {
        max-width: 29%;
        font-size: 0.7rem;
    }
}
@media screen and (max-width: 604px){
    .guide-bottom {
        max-width: 85%;
    }
    #guide-box_2 .guide-box-text img {
        margin: 0.5rem auto;
        max-width: 87%;
    }
    #guide-box_4 .guide-box-text span:nth-child(5){
        font-size: 1.5em;
        margin: 0.25rem 0 1rem;
    }
    #guide-box_4 .guide-box-text span:first-child {
        color: #55cdda;
        font-size: 1.75em;
    }
}
@media screen and (max-width: 480px){
    #guide .flex-row {
        margin-top: 0;
        margin-bottom: 2rem;
    }
    .guide-box {
        max-width: 44%;
        font-size: 0.675rem;
    }
    #guide .flex-row {
        gap: 1rem;
    }
    #guide-box_4>img {
        width: 110%;
    }
    .guide-bottom {
        bottom: -.5rem;
    }
}

@media screen and (max-width: 420px){
    .guide-box {
        font-size: 0.6rem;
    }
}
@media screen and (max-width: 380px){
    .guide-box {
        font-size: 0.55rem;
    }
}

@media screen and (min-width: 1921px){
    .guide-box {
        font-size: 0.785rem;
    }
    #guide .wrapper {
        justify-content: center;
    }
}
@media screen and (min-width: 2561px){
    #guide .flex-row {
        transform: scale(1.5);
    }
}





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


#video{
    padding: 0;
}


/*********************************/
/********* INFOTRI ***********/
/*********************************/


#infotri{
    background-image: url('../img/bg_infotri.webp');
    background-repeat: no-repeat;
    background-position: bottom;
    overflow: hidden;
    background-size: cover;
}
#infotri .wrapper{
    max-width: 1120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#infotri h2{
    font-size: 3.75rem;
}
#infotri h2>span:first-child{
    color: #ff732c;
    display: block;
    line-height: 0.9;
}

#infotri h2>span:last-child{
    color: #000191;
    display: block;
    line-height: 0.9;
}
#infotri h2+p{
    color: #000191;
    font-size: 1.25rem;
    font-family: "brother-1816", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    margin: 0 auto;
    max-width: 80%;
}

.infotri-box{
    background-color: #000091;
    display: flex;
    padding: 3rem 4rem;
    justify-content: space-around;
    align-items: center;
    margin-top: 2rem;
}
.infotri-box>img{
    max-width: 45%;
    height: auto;
}
.infotri-box_text{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.infotri-box_text>p{
    color: white;
    font-family: "brother-1816", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.25rem;
    text-align: center;
    margin: 0;
}

.infotri-box_text>a{
    color: #000091;
    background-color: #ff732c;
    padding: 1.125rem;
    border-radius: 3rem;
    line-height: 1;
    font-family: "brother-1816", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.25rem;
}
.infotri-box_text>a:hover{
    background-color: #ff8d2c;
}
@media screen and (max-width: 1280px){
    #infotri .wrapper{
        max-width:992px;
    }
}
@media screen and (max-width: 1024px){
    #infotri .wrapper{
        max-width:100%;
        padding: 0 2rem;
    }
    .infotri-box {
        padding: 2rem 1rem;
    }
}

@media screen and (max-width: 992px){
    #infotri{
        padding: 3rem 0 8rem;
    }
}

@media screen and (max-width: 768px){
    .infotri-box {
        padding: 2rem 1rem;
        gap: 2rem;
        flex-direction: column;
    }
    .infotri-box>img {
        max-width: 320px;
    }
    #infotri{
        padding: 3rem 0 10rem;
    }
}
@media screen and (max-width: 420px){
    .infotri-box>img {
        max-width: 90%;
        margin: 0 auto 0.5rem;
    }
    .infotri-box_text>a {
        font-size: 1.125rem;
    }
}

@media screen and (min-width: 1921px){
    #infotri .wrapper {
        max-width: 1480px;
    }
    #infotri h2{
        font-size: 4.5rem;
    }
}






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

footer {
    display: flex;
    padding: 1.5rem;
    background-image: url('../img/home_bg.webp');
    flex-wrap: nowrap;
    gap: 1.5rem;
    justify-content: space-between;
    position: relative;
    background-size: cover;
    align-items: flex-start;
    background-position: top;
}

footer>img{
    z-index: 2;
}
.footer-links {
    position: relative;
    padding-right: 2rem;
}

.footer-right{
    width: calc(100% - 259px);
}

.footer-links .links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin: 1.5rem 0;
}

.footer-links a,
.footer-links p {
    color: white;
    font-family: "Staatliches";
    text-transform: uppercase;
    line-height: 1;
    font-size: 1.875rem;
    margin: 0;
}

.footer-links a:hover, .footer-links p:hover {
    text-decoration: underline;
}

.footer-send-result{
    border: 4px solid #f7ee38;
    background-image: linear-gradient(to right, #f7d71d, #fabf1c);
    border-radius: 4px;
    color: #483a34;
    font-family: "Staatliches";
    font-size: 1.75rem;
    padding: 0.875rem 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.footer-send-result:hover{
    text-decoration: underline;
}

.to-top{
    position: absolute;
    right: 0;
    top: -0.5rem;
}
.to-top>img{
    border-radius: 4px;
}
.to-top>img:hover{
    opacity: 0.9;
}

.to-top:hover{
    opacity: 0.9;
}

.mentions-epic{
    padding: 0.75rem 1.5rem 1.5rem;
    position: absolute;
    width: calc(100% - 259px - 4.5rem);
    left: 0;
    bottom: 0;
    padding-left: calc(259px + 3rem);
    background: #69bd3e;
    z-index: 0;
    border-top: 4px solid #82cd42;
}
.mentions-epic a{
    color: black;
}
.mentions-epic a:hover{
    color: white;
}

.mentions-epic>p{
    color: white;
    font-size: 0.875rem;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
}

.footer_logo_ministere{
    display: block;
    z-index: 2;
}

.footer_logo_ministere img{
    width: 17rem;
    padding: 1rem 0 0;
}
.footer_logo_ministere:hover{
    opacity: 0.9;
}

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

    .footer-links {
        padding-right: 6rem;
    }
}

@media screen and (max-width: 1366px){
    footer {
        justify-content: center;
    }
    .footer-links .links {
        gap: 1.5rem;
    }
    .footer-links {
        padding-right: 5rem;
    }
}

@media screen and (max-width: 1024px){
    footer {
        flex-wrap: wrap;
    }
    footer>img{
        padding-top: 1.5rem;
    }

    .to-top {
        top: -1.675rem;
    }
    .to-top>img{
        transform: scale(0.75);
    }
    .footer-links a, .footer-links p {
        font-size: 1.5rem;
    }
    .footer-send-result {
        font-size: 1.5rem;
    }
    .mentions-epic {
        padding: 1.5rem;
        position: relative;
        width: 100%;
        left: unset;
        bottom: unset;
        box-sizing: border-box;
    }
    .footer-right {
        width: calc(100%);
    }
    .footer-links a, .footer-links p {
        font-size: 1.675rem;
    }
    footer>img{
       width: 200px;
    }
    footer {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        padding: 1.5rem 0 0;
    }
    .to-top {
        top: -14.5rem;
    }
    .links{
        margin-top: 2rem;
    }
    .footer-links .links {
        gap: 2rem;
        margin: 1rem 0 1.5rem;
    }
    .footer-links {
        padding-right: 0;
    }

}

@media screen and (max-width: 800px){
    .footer-links .links {
        flex-direction: column;
    }
    .mentions-epic>p {
        font-size: 0.875rem;
    }
    footer>img{
        padding-top: 0.5rem;
    }
}


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




/*************************************************************************************/
/************************************ POPUPS *****************************************/
/*************************************************************************************/

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    right: 50%;
    bottom: 50%;
    height: 100%;
    width: 100vw;
    transform: translate(-50%, -50%);
    z-index: 9;
    display: none;
}

.open-cookies {
    cursor: pointer;
}

.popup .main-overlay,
#cookies .main-overlay {
    background-color: rgb(108, 201, 68, 0.9);
    width: 100%;
    height: 100%;
}

form {
    margin-block-end: 0rem;
}

.popup .popup-step {
    width: 953px;
    height: 623px;
    margin: auto;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url(../img/popup-box.webp);
    background-repeat: no-repeat;
    overflow: visible;
}

.close-popup {
    position: absolute;
    top: -2.5rem;
    right: -2.5rem;
    cursor: pointer;
    padding: 0.25rem;
}
.close-param-cookies-popup {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    padding: 0.25rem;   
}
.close-popup img, .close-param-cookies-popup img{
    width: 6rem;
    height: 6rem;
}

.close-popup:hover img,
.close-param-cookies-popup:hover img{
    transform: rotate(180deg);
}


.popup h3 {
    color: white;
    font-size: 2.375rem;
    font-family: "Bungee";
    font-weight: normal;
    text-transform: uppercase;
    text-align: center;
    margin: 0rem auto 1rem;
    line-height: 1.15;
}

.charte-cookies:hover{
    transform: scale(1.05);
}
.charte-cookies:hover span{
    text-decoration: underline;
}

.charte-cookies{
    display: flex;
    justify-content: center;
    align-items: center;
}

.charte-cookies span{
    position: absolute;
    font-size: 1.25rem;
    color: #211e1e;
}

@media screen and (max-width: 480px){
    .charte-cookies img{
        max-width: 100%;
    }
    .charte-cookies span {
        font-size: 1.125rem;
    }
}

/****** Step 1 *********/


#step1 .flex-row {
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}



.step1-left {
    position: relative;
    width: 633px;
    height: 482px;
    background-image: url(../img/zone.webp);
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
}

.step1-left_text{
    font-family: "Bungee";
    font-size: 2rem;
    position: absolute;
    bottom: 4rem;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 85%;
}
.step1-left_text span:first-child{
    color: #2e2825;
    display: block;
    line-height: 1;
}
.step1-left_text span:last-child{
    color: #2e2825;
    display: block;
    line-height: 1;
    font-size: 1.25rem;
}
.step1-left:hover {
    opacity: 0.6;
}

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 label {
    width: 100%;
    cursor: pointer;
}

#filename {
    margin: 1rem auto;
    text-align: center;
}

/* step1-middle */

.step1-middle p {
    color: #1c1c70;
    font-size: 26px;
    text-transform: uppercase;
    text-align: center;
    font-family: "Giorgio Sans Bold";
    position: relative;
}

.step1-middle p:before {
    width: 2px;
    height: 100px;
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    left: calc(50% - 1px);
    background: #0c0b2b;
}

.step1-middle p:after {
    width: 2px;
    height: 100px;
    content: '';
    display: block;
    position: absolute;
    bottom: 100%;
    left: calc(50% - 1px);
    background: #0c0b2b;
}

.step1-right p {
    width: 339px;
}

.step1-right p {
    color: #1c1c70;
    font-size: 34px;
    text-transform: uppercase;
    text-align: center;
    font-family: "Giorgio Sans Bold";
    margin-top: 0;
    margin-bottom: 16px;
}

.step1-right input {
    background: #e4e4ef;
    border: 4px solid #1c1c70;
    border-radius: 20px;
    padding: 8px 20px;
    width: 220px;
}


.to-step2 {
    margin: 2rem auto 0;
    width: fit-content;
    cursor: pointer;
}



/****** Step 2 *********/
#step2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: none;
}

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


#step2 .popup-submit  {
    position: relative;
    padding: 1rem 10rem;
    width: max-content;
    cursor: pointer;
    background-color: transparent;
    border: 0px;
    transition: 0.2s;
}
#step2 .popup-submit:hover{
    transform: scale(1.1);
    transition: 0.2s;
}
#step2 .popup-submit span{
    color: #473933;
    font-family: "Bungee";
    z-index: 1;
    display: block;
    position: relative;
    font-size: 1.75rem;
}
#step2 .popup-submit img{
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    left: 50%;
    z-index: 0;
}

#checkboxes{
    flex-direction: column;
}

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

input[type="checkbox"]+label::before {
    content: "";
    width: 1.75rem;
    height: 1.75rem;
    background-image: unset;
    background-repeat: no-repeat;
    display: block;
    border: 4px solid #fbc31d;
    background-size: cover;
    position: absolute;
    left: -3.5rem;
    top: 0rem;
    border-radius: 8px;
}
input[type="checkbox"]:checked+label::before {
    background-image: url(../img/check.svg);
    background-size: 80%;
    background-position: center;
}
input[type="checkbox"]:hover+label::before {
    background-image: url(../img/check.svg);
    background-size: 80%;
    background-position: center;
}

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

#step2 label {
    color: white;
    display: block;
    font-family: 'Bungee';
    font-size: 1.125rem;
    text-align: center;
    position: relative;
    width: calc(100% - 2rem);
    letter-spacing: -0.05rem;
}

#step2 input {
    color: white;
    font-family: 'Bungee';
    padding: 1.125rem 1rem 1.125rem 2.5rem;
    font-size: 1.125rem;
    border: 4px solid #fbbc1c;
    border-radius: 60px;
}

:-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;
    max-width: 80%;
    margin: 1rem auto;

}
#row-email span {
    color: #fac31d;
    font-family: "Bungee";
    display: block;
    font-size: 1.75rem;
    padding-right: 2rem;
}
#row-email>div {
    display: flex;
    align-items: center;
}


.row-checkbox {
    display: flex;
    align-items: normal;
    justify-content: flex-start;
    width: 100%;
    max-width: 60%;
    margin: .75rem auto;
    transform: translatex(2.5rem);
}

.row-checkbox label {
    text-align: left !important;
}

.row-checkbox a {
    color: #fac31d;
    font-family: "Bungee";
}

.row-checkbox a:hover {
    color: white;
}

#step2 input[type="checkbox"] {
    width: auto;
    margin: 0.25rem 1rem 0 0;
    cursor: pointer;
    width: 2rem;
    height: 1.75rem;
}

/* Step 3 */

#step-confirmation {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: url(../img/popup-box_final.webp);
    display: none;
}

#step-confirmation>img{
    width: 250px;
    margin: 0 auto 1rem;
}

#step-confirmation p {
    color: white;
    font-size: 1.5rem;
    font-family: "Staatliches";
    text-align: center;
    line-height: 1.5;
    padding: 0 1.5rem;
    margin: 0 auto 1rem;
    max-width: 90%;
}

.end-popup {
    width: fit-content;
    margin: 0 auto;
    cursor: pointer;
    font-size: 1.75rem;
    font-family: "Bungee";   
    color: #353509;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -50%);
    transition: 0.2s;
}
.end-popup:hover{
    transform: translate(-50%, -50%) scale(1.1);
    transition: 0.2s;
}
.end-popup span{
    z-index: 1;
    position: relative;
}
.end-popup img{
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    left: 50%;
    z-index: 0;
    max-width: 380px;
}

#row-checkbox {
    display: flex;
    margin-top: 30px;
    align-items: baseline;
}

@media screen and (max-width: 1280px){
    .popup .popup-step {
        width: 804px;
        height: 523px;
    }
    .step1-left {
        position: relative;
        width: 598px;
        height: 459px;
    }
    #step2 .popup-submit img{
        max-width: 38rem;
    }
}


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

    input#fakeInput {
        height: 382px;
        width: 544px;
    }
}

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

    #step1 .flex-row {
        flex-direction: column;
    }

    #step-confirmation p {
        font-size: 1.125rem;
        line-height: 1.25;
    }
    .close-param-cookies-popup{
        top: -10px;
        right: -9px;
    }
        
    .popup .popup-step {
        width: 740px;
        height: 484px;
    }
    .step1-left {
        position: relative;
        max-width: 530px;
        height: 382px;
    }
    .step1-left_text {
        bottom: 2rem;
        transform: translateX(-50%);
        max-width: 100%;
    }
}


@media screen and (max-width: 800px) {
    #row-email {
        max-width: 100%;
        margin: 0.25rem 0;
    }

    #row-email>div {
        width: 100%;
        margin-bottom: 0rem;
    }

    .row-checkbox {
        max-width: 87%;
    }

    .popup h3 {
        font-size: 2rem;
    }

    .info-screen>p {
        text-align: center;
        width: calc(100%);
        padding-top: 2rem;
    }
    #filename {
        margin: 0.25rem auto;
    }

    #step-confirmation {
        height: 314px;
    }
    .close-popup{
        right: -1.75rem;
    }
    .step1-left {
        position: relative;
        max-width: 404px;
        height: 309px;
    }
    .step1-left_text span:first-child {
        font-size: 1.75rem;
    }
    .step1-left_text {
        bottom: 2rem;
    }
    input#fakeInput {
        height: 302px;
        width: 403px;
    }
    #step2 label {
        font-size: 1rem;
        line-height: 1.15;
        letter-spacing: -0.05rem;
    }
    .row-checkbox {
        max-width: 85%;
    }
    .popup .popup-step {
        width: 604px;
        height: 429px;
    }  
    #step2 .popup-submit {
        transform: scale(0.75);
    }
    #step2 .popup-submit:hover{
        transform: scale(0.8);
    }
}


@media screen and (max-width: 604px) {
    .info-screen {
        max-width: 70%;
    }
    .step1-left {
        max-width: 335px;
        height: 252px;
    }

    .step1-left_text {
        font-size: 1.5rem;
        bottom: 1.5rem;
    }
    .step1-left_text span:last-child {
        font-size: 1.125rem;
    }
    #step-confirmation>img{
        display: none;
    }
    #step-confirmation {
        height: 250px;
    }
    input#fakeInput {
        height: 255px;
        width: 337px;
    }
    .step1-left_text span:first-child {
        font-size: 1.5rem;
    }
    #step2 input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
    }

    .popup .popup-step {
        width: 468px;
        height: 308px;
    }
    .step1-left {
        max-width: 335px;
        height: 242px;
    }
    #row-email span {
        font-size: 1.25rem;
    }
    #row-email>div {
        display: flex;
        align-items: center;
    }
    .end-popup img{
        max-width: 280px;
    }
    
}



@media screen and (max-width: 480px) {
    .popup h3 {
        font-size: 1.5rem;
        padding: 0 1.5rem;
    }

    .close-popup {
        top: -10px;
        right: -10px;
    }

    .step1-left_text span:first-child {
        font-size: 1.275rem;
    }
    .popup .popup-step {
        width: 369px;
        height: 243px;
    }
    .step1-left {
        max-width: 272px;
        height: 206px;
    }
    .step1-left_text {
        font-size: 1.25rem;
        bottom: 1.5rem;
        max-width: 83%;
    }
    input#fakeInput {
        height: 202px;
        width: 270px;
    }

    #row-email span {
        font-size: 1.25rem;
        padding: 0;
    }
    #row-email {
        margin: 0.25rem auto;
        max-width: 100%;
    }
    #row-email>div {
        margin-bottom: 0rem;
        flex-direction: column;
    }
    .row-checkbox {
        margin: 0.25rem auto 0;
        max-width: 88%;
    }
    #step-confirmation {
        height: 230px;
        width: 440px;
    }
    #step-confirmation p {
        font-size: 1.025rem;
    }
    .end-popup {
        font-size: 1.5rem;
    }
    #step2{
        width: 440px;
        height: 326px;
    }   
    #step2 input[type="checkbox"] {
        width: 16px !important;
        height: 16px !important;
        padding: 0!important;
        line-height: 1;
    }

    .step1-left_text span:last-child {
        font-size: 1rem;
    }
    .step1-left_text {
        font-size: 1.125rem;
    }
    #step2 .popup-submit span {
        font-size: 1.5rem;
    }
}


@media screen and (max-width: 420px) {
    .popup .popup-step {
        width: 329px;
        height: 216px;
    }   
    #step-confirmation {
        height: 186px;
        width: 340px;
    }
    #step-confirmation p {
        padding: 0 1rem;
    }
    .close-popup {
        top: -29px;
        right: -28px;
        z-index: 2;
    }
    .step1-left {
        max-width: 262px;
        height: 195px;
    }
    input#fakeInput {
        height: 195px;
        width: 260px;
    }
    #step2{
        width: 366px;
        height: 267px;
    }  

    #step2 label{
        font-size: 0.75rem;
        line-height: 1.1;
        letter-spacing: -0.05rem;
        width: calc(100% - 1rem);
    }
    .end-popup {
        font-size: 1.5rem;
    }
    .popup h3 {
        margin: 0 0 0.25rem 0;
    }
    #step2 input[type="checkbox"] {
        width: auto;
        margin: 0rem 1rem 0 0;
        width: 13px !important;
        height: 14px !important;
        box-sizing: content-box;
        margin: 0rem 0.5rem 0 0;
    }
}



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

    .close-popup,
    .close-param-cookies-popup {
        transform: scale(1.5);
    }

    #step2 .popup-submit span {
        font-size: 1.5rem;
    }
    .popup .popup-step {
        width: 983px;
        height: 693px;
    }
    #step-confirmation {
        height: 480px;
    }
    .end-popup {
        bottom: -12px;
    }
    .step1-left_text {
        font-size: 1.75rem;
        bottom: 2rem;
    }
    .popup .popup-step {
        transform: translate(-50%, -50%) scale(1.5);
    }
        
    .row-checkbox {
        max-width: 86%;
    }
    #row-email {
        max-width: 86%;
    }
    
    #step2 .buttons {
        bottom: 1rem;
    }

}






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


#cookies {
    display: none;
    position: fixed;
    z-index: 9;
    bottom: 0;
}

.popup-cookies-choices{
    flex-direction: column!important;
}

.popup-cookies-main,
.popup-cookies-choices {
    margin: auto;
    padding: 4rem 3rem 3rem;
    overflow: hidden;
    background: white;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 14px;
    background-image: url(../img/home_bg.webp);
    background-repeat: no-repeat;
    background-position: center;
    box-sizing: border-box;
    max-width: 480px;
    text-align: center;
}

.popup-cookies-main h3, .popup-cookies-choices h3{
    color: #211e1e;
    font-family: "Bungee";
    text-shadow: 0px 0px 32px rgba(255, 255, 255, 1);
    max-width: 80%;
}

#cookies {
    width: 100%;
}
#cookies ul{
    width: fit-content;
    margin: 0 auto;
}
#cookies ul li{
	color: white;
    font-family: "Bungee";
    font-size: 0.875rem;
    text-align: justify;
    line-height: 1.25;
    margin: 0 auto;
    text-align: center;
}
#cookies .main-overlay {
    background-color: transparent;
    box-shadow: 0px -3px 20px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0px -3px 20px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px -3px 20px 0px rgba(0,0,0,0.75);
}

.popup-cookies-main,
.popup-cookies-choices {
    width: 100%;
    padding: 2rem;
    top: unset;
    left: unset;
    transform: unset;
    max-width: unset;
    position: relative;
    border-radius: 0px;
    box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.51);
    -webkit-box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.51);
    -moz-box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.51);
    z-index: 10;
}

.popup-cookies-main h3,
.popup-cookies-choices h3 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 1rem;
}

.popup-cookies-main p,
.popup-cookies-choices p {
    text-align: center;
    color: white;
}


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

.popup-cookies-main p {
    font-size: 14px;
    margin: 0.5rem 0 0 0;
}



.popup-cookies-main a {
    color: white;
    font-family: "Bungee";
    font-size: 1.5rem;
}

.popup-cookies-main a:hover {
    text-decoration: underline;
}

#cookies .flex-row {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    max-width: 1240px;
    margin: 1rem auto 0;
}

.popup-cookies-choices-table .flex-row {
    justify-content: flex-start !important;
    max-width: 100% !important;
}

#set-cookies,
#dont-give-consent-cookies {
    cursor: pointer;
}


#set-cookies:hover,
#dont-give-consent-cookies:hover {
    opacity: 0.9;
}


.popup-cookies-choices-table {
    margin-top: 1rem;
    text-align: left;
}

.popup-cookies-choices-block {
    padding: 1em 0;
    border-bottom: 1px solid black;
}

.popup-cookies-choices-block>* {
    text-align: left !important;
}

.popup-cookies-choices-block>.flex-row {
    flex-direction: row !important;
    margin-top: 1rem !important;
    width: 100% !important;
    gap: 1rem;
    display: flex;
}

.popup-cookies-choices-block:last-of-type {
    border-bottom: 0px solid black;
}

.popup-cookies-choices-block strong {
    font-family: "Bungee", sans-serif;
    font-size: 1.25rem;
    margin: 1em 0 0.5em;
    color: white;
}

.popup-cookies-choices-block p {
    font-family: "Bungee", sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
    color: white;
}

.popup-cookies-choices-block .give-consent_cookies,
.popup-cookies-choices-block .no-consent_cookies {
    color: white;
    font-size: 1.125rem;
    font-family: "Bungee";
    cursor: pointer;
    display: inline-block;
    background: transparent;
    line-height: 1;
    border: 1px solid white;
    margin: 0;
    padding: 0.25rem;
    border-color: #188600;
}
.popup-cookies-choices-block .no-consent_cookies {
    border-color: #f80d34;
}
.give-consent_cookies:hover,
.give-consent_cookies:focus {
    background-color: #188600;
    color: white;
    border-color: #188600;
}

.give-consent_cookies_disabled {
    border-radius: 30px;
    padding: 0.5rem 2rem 0.5rem;
    background-color: #188600;
    color: white;
    font-size: 16px;
    font-family: "anton";
    font-weight: 400;
    text-transform: uppercase;
    border: 2px solid #188600;
    cursor: pointer;
    display: inline-block;
    margin: 0 0.25rem;
    line-height: 1;
}

.no-consent_cookies:hover,
.no-consent_cookies:focus,
.no-consent_cookies:active {
    background-color: #f80d34;
    color: white;
    border-color: #f80d34;
}

#give-consent-cookies {
    border-color: #f80d34;
    cursor: pointer;
    margin-top: 1.5rem !important;
    width: 100%;
}

#end-cookies {
    margin: 1rem auto;
    border: 0px;
    display: block;
    cursor: pointer;
    font-family: "Bungee";
    color: #353509;
    font-size: 1.25rem;
    background-color: transparent;
    position: relative;
    width: 440px;
}
#end-cookies span{
    position: relative;
    z-index: 2;
}
#end-cookies img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
}

#give-consent-cookies {
    margin-top: 0rem !important;
}
#set-cookies,
#dont-give-consent-cookies,
#give-consent-cookies {
    border: 2px solid #f3f12b;
    width: 30%;
    background-color:  #f3f12b;
    font-size: 1.25rem;
    font-family: "Bungee";
    padding: 0.5rem 1rem;
    border-radius: 4px;
    color: #211e1e;
    font-family: "Bungee";
    text-shadow: 0px 0px 32px rgba(255, 255, 255, 1);
}
#set-cookies:hover,
#dont-give-consent-cookies:hover,
#give-consent-cookies:hover {
    text-decoration: underline;
}
@media screen and (max-width: 1280px) {
    #cookies .flex-row {
        max-width: 100%;
    }

    #set-cookies,
    #dont-give-consent-cookies,
    #give-consent-cookies {
        padding: 0.5rem 2rem;
    }
}

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

    .popup-cookies-main,
    .popup-cookies-choices {
        min-width: unset;
        margin: auto;
        width: 100%;
        padding: 2rem;
    }

    .popup-cookies-choices {
        padding: 2rem;
    }

    #cookies .flex-row {
        justify-content: space-between;
        margin-top: 2em;
    }

    #cookies .flex-row>button {
        font-size: 1.125rem;
        padding: 0.5rem 1.75rem;
    }

    #cookies .flex-row {
        justify-content: space-between;
        margin-top: 2em;
    }

    .popup-cookies-main {
        padding: 2rem;
    }

    #set-cookies,
    #dont-give-consent-cookies,
    #give-consent-cookies {
        width: 240px;
        padding: 0.5rem 1.75rem;
    }
}

@media screen and (max-width: 800px) {
    #cookies .flex-row {
        flex-direction: column;
        margin-top: 0.5em;
    }
}

@media screen and (max-width: 604px){
    #end-cookies {
        width: 320px!important;
        line-height: 1.15;
    }
}

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

    #cookies .flex-row {
        justify-content: space-between;
        margin-top: 0.5rem;
        flex-direction: column;
    }

    #cookies .flex-row>button {
        margin: 0rem auto 0.5rem;
        padding: 0.5rem 1rem;
        width: 100%;
    }

    #end-cookies {
        margin: 0em auto 0;
        padding: 0.5rem 2rem;
    }

    .popup-cookies-choices-block strong {
        font-size: 1.125rem;
        margin: 0.75em 0 0.375em;
    }

    .popup-cookies-main,
    .popup-cookies-choices {
        padding: 3rem 1rem 2rem;
    }
}

@media screen and (min-width: 1921px){
    #set-cookies, #dont-give-consent-cookies {
        width: 440px;
    }
    #cookies .flex-row {
        max-width: 1366px;
    }
    .charte-cookies img{
        transform: scale(1.25);
    }
    .popup-cookies-main p {
        font-size: 0.875rem;
        margin: 0.5rem 0 0 0;
    }
    #end-cookies img{
        transform: translate(-50%, -50%) scale(1.25);
    }  

}

.footnotes {
    font-size: 0.875rem;
    margin-top: 3rem;
    display: block;
}



/*************************************************************************************/
/************************************* LEGAL *****************************************/
/*************************************************************************************/


#legal {
    background-color: white;
    padding: 5rem 0 0;
}

#legal .wrapper {
    padding: 4rem 2rem;
    max-width: 992px;
    min-height: calc(100vh - 8rem);
    box-sizing: border-box;
    height: auto;
}
#legal h1{
    color: #473933;
    font-size: 3rem;

}
#legal h3{
    color: #ff732c;
    margin-top: 3rem;
    line-height: 1.15;
}
#legal h4{
    color: #ff732c;
    font-size: 1.5rem;
    margin: 1.5rem 0 1rem;
    font-family: 'Bungee';
    line-height: 1.15;
}
#legal ul {
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    list-style-type: square;
}

#legal ul li {
    font-family: "Bungee";
    color: #473933;
    line-height: 1.15;
    font-size: 1.25rem;
    margin: 0.5rem 0;
}
#legal ul li a{
    font-family: "Bungee";
    color: #473933;
    line-height: 1.15;
    font-size: 1.125rem;
    margin: 0.5rem 0;
}
#legal ul li a:hover{
    color: #ff732c;
}
#legal p {
    color: #473933;
}




#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Adjust the opacity to control the darkness of the overlay */
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    /* Ensure the overlay is on top of other elements */
}

.loader {
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    /* Adjust the color of the loading animation */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.grecaptcha-badge { 
    visibility: hidden;
}