/*********************************************************************************************************************************/
/*********************************************************************************************************************************/
/*********************************************************************************************************************************/
/*********************************************************************************************************************************/
/****************************************************** THEME Carlife Tycoon *********************************************************/
/*********************************************************************************************************************************/
/*********************************************************************************************************************************/
/*********************************************************************************************************************************/
/*********************************************************************************************************************************/


html {
  scroll-behavior: smooth;
}

body {
  padding: 0;
  margin: 0;
  font-family: "azo-sans-web", "Helvetica Neue", "Roboto", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
}

a {
  text-decoration: none;
}

* {
  transition: 0.2s;
}

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

@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;
    font-size: 13px;
  }
}

@media screen and (max-width: 992px) {
  section {
    height: unset;
    font-size: 12.5px;
  }
}

@media screen and (max-width: 600px) {
  html {
    scroll-padding-top: 3.5rem;
    font-size: 13px;
  }
}
@media screen and (max-width: 1080px) and (min-height: 1200px) {
  .wrapper {
      min-height: unset!important;
  }
  section{
    height: unset!important;
  }
}

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

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

h2 {
  color: #fcfcec;
  text-transform: uppercase;
  font-size: 3rem;
  z-index: 1;
  line-height: 1;
  text-align: center;
  margin: 1rem 0 1rem;
  font-family: "azo-sans-uber", sans-serif;
  font-weight: 400;
  font-style: normal;
  position: relative;
}


/******* MENU *******/

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

.header-top {
  border-bottom: 2px solid #fcfcec;
}

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

.nav-bar{
  padding: 0.25rem 0;
}

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

.nav-bar li {
  padding: 1rem 0.25rem;
}

.nav-bar li > a {
  color: white;
  font-size: 1.25rem;
  text-transform: uppercase;
  display: block;
  position: relative;
  padding: 0.25rem 1rem;
  border-radius: 2rem;
  font-weight: 900;
}


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

/******* 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: #472b32;
  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: 2px solid white;
  width: 100%;
  background-color: #00e592;
}
.menu-panel nav > ul > li:last-child {
  border-bottom: 2px solid white;
}
.menu-panel nav > ul > li > a {
  color: white;
  font-size: 1.75rem;
  font-weight: 500;
  display: block;
  text-align: center;
  padding: 1.25rem 0;
  margin: 0.5rem 0;
  line-height: 1;
  text-transform: uppercase;
  border-radius: 2rem;
      font-family: 'azo-sans-uber';
}

.header-result {
    position: absolute;
    top:1rem;
    right: 0.75rem;
    cursor: pointer;
    gap: 1rem;
    display: flex;
    font-size: 1.125rem;
    align-items: center;
    color: white;
    background-color: #462a31;
    height: max-content;
    padding: 0.375rem 0.675rem;
    text-transform: uppercase;
    border-radius: 1rem;
    border: 4px solid white;
    font-weight: 900;
    -webkit-box-shadow: 0px -1px 12px 0px rgba(0,0,0,0.5); 
box-shadow: 0px -1px 12px 0px rgba(0,0,0,0.5);
}

.header-result:hover {
    background-color: white;
    color: black;
}

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


.section-title h2:after{
    content: '';
    height: 0.875rem;
    border-radius: 6px;
    display: block;
    width: 12rem;
    display: block;
    z-index: 2;
    background-color: orange;
    margin: 0 auto;
    transform: translateY(1.5rem);
}
.section-title{
  margin-bottom: 3rem;
}

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

@media screen and (max-width: 1440px) {
  .nav-bar li > a, .header-result {
    font-size: 1.15rem;
    padding: 0.25rem 0.5rem;
  }
  .nav-bar li {
      padding: 1rem 0.125rem;
  }
}

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

@media screen and (max-width: 992px) {
  .menu-panel .header-logo {
    margin: 0 auto 3rem;
    display: flex;
  }
  .menu-panel .header-logo > img {
    max-width: unset;
    width: 13rem;
    margin: 0 auto;
  }
  .menu-mobile {
    display: block;
  }
  .nav-bar {
    display: none;
  }
  h2 span {
    display: block;
    font-size: 1.75rem;
  }
  .header-top {
    background-color: #00e592;
    height: 60px;
  }
  .header-top-logo {
        top: 0.75rem;
    }
}

@media screen and (max-width: 768px) {
  .menu-panel nav > ul > li > a {
    font-size: 1.75rem;
  }
}
@media screen and (max-width: 480px) {
  .menu-panel nav > ul > li > a {
    font-size: 1.5rem;
  }
  .menu-panel .header-logo > img {
    width: 8rem;
  }
  .section-title h2:after{
      height: 0.675rem;
  }
}

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

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

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

@media screen and (max-width: 992px) {
  .wrapper {
    max-width: calc(100% - 4rem);
    padding: 0rem 2rem;
    min-height: unset;
  }
  section {
    padding: 3rem 0;
  }
  .header-top-logo {
    position: absolute;
    top: .75rem;
    left: 5.25rem;
    width: 6rem;
  }
  h2 {
    font-size: 2.5rem !important;
  }
  h1 {
    font-size: 3rem !important;
  }
}

@media screen and (max-width: 604px) {
  .wrapper {
    padding: 0 1rem;
    max-width: calc(100% - 2rem);
    margin: 0 auto;
  }
  h1,
  h2 {
    font-size: 2rem !important;
  }
  section {
    padding: 2rem 0;
  }
}
@media screen and (max-width: 420px) {
  h2 {
    font-size: 1.875rem !important;
  }
  .header-top-logo {
    display: none;
  }
    .section-title{
    margin-bottom: 2rem;
  }
}

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

  .header-result {
    width: auto;
  }
}

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


@media screen and (min-width: 2561px){
  .section-title{
    margin-bottom: 2rem;
  }
}

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

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

#home .wrapper {
  width: 100%;
  max-width: 1680px;
  align-items: end;
  padding: 6rem 0 2rem;
}
.top-score {
  position: absolute;
  z-index: 0;
  top: 0;
}

h1 {
  color: white;
  font-style: normal;
  font-size: 2.875rem;
}

.mention-epic{
    color: #9e8f83;
    transform: rotate(-90deg);
    position: absolute;
    bottom: 13rem;
    font-size: 0.675rem;
    right: -10rem;
}

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

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

.main-logo {
  max-width: 32vw;
  margin-top: 8vh;
}

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

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

.home-right h1 {
  text-align: center;
  margin: 0;
  font-family: azo-sans-uber, sans-serif;
font-style: normal;
font-weight: 400;
}

.submit-score {
  position: relative;
  cursor: pointer;
}

.submit-score span {
  position: absolute;
  color: white;
  text-align: center;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  font-size: 1.5rem;
  width: max-content;
  z-index: 2;
}
.submit-score:hover span {
  text-shadow: 0 0 10px rgba(254, 118, 0, 0.8);
  color: black;
}

.available-on {
    text-align: center;
    color: #744030;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 900;
    gap: 0.5rem;
    width: fit-content;
    text-transform: uppercase;
    margin-top: 2rem;
}

.available-on-mobile {
  display: none;
}
.created-in {
  position: absolute;
  left: 4rem;
  bottom: 2rem;
  max-width: 100%;
}

.home-right .map_code_copy{color: black;}

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

  .available-on-mobile {
    display: block;
    max-width: 125%;
  }
}

@media screen and (max-width: 1120px) {
  h1 {
    font-size: 1.5rem !important;
  }
  .main-logo {
    max-width: 28vw;
    margin-top: 2vh;
  }
  #home .wrapper {
    padding: 8rem 0 2rem;
  }
}



@media screen and (min-width: 1921px) {
  .main-logo {
    transform: scale(1.25);
    margin-bottom: 4rem;
    margin-top: 4rem;
  }

  .available-on img {
    transform: scale(1.5);
  }

}



h2{
      color: transparent;
      position: relative;
}

h2 img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}




/* Code de la carte */

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


.mapcode_text {
  font-size: 1.125rem;
  line-height: 1;
  text-transform: uppercase;
  display: block;
  color: #6495f7;
  text-align: center;
  font-weight: 900;
  margin-bottom: 0.25rem;
}
.mapcode_numbers {
color: white;
    font-size: 1.5rem;
    line-height: 1;
    display: block;
    font-style: normal;
    width: max-content;
    text-align: left;
    background-color: #6495f7;
    font-weight: 900;
    padding: 0.3rem 2.75rem 0.3rem 1.25rem;
    border-radius: 0.75rem;
    position: relative;
    margin: 0.5rem;
}



.mapcode_numbers:after{
content: "";
    background-image: url(../img/code-after.png);
    width: 2.375rem;
    height: 2.25rem;
    display: inline-block;
    position: absolute;
    right: -1px;
    top: -1px;
    background-size: cover;
}

.mapcode_numbers_container{
  border: 4px solid #dbdbc3;
    border-radius: 1.25rem;
}

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

#countdown,
#countdown2 {
  margin: 0;
}



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

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

@media screen and (max-width: 1680px){
  h2 img{
      transform: translateX(-50%) translateY(-50%) scale(0.95);
  }
}

@media screen and (max-width: 1366px) {
  #home .wrapper {
    max-width: 1180px;
  }
   h2 img{
      transform: translateX(-50%) translateY(-50%) scale(0.85);
  } 
}

@media screen and (max-width: 1280px) {
  .playable-on-mobile {
    display: block;
  }
    h2 img{
      transform: translateX(-50%) translateY(-50%) scale(0.8);
  }
}

@media screen and (max-width: 1080px) {
  .map_code_copy {
    top: -1.25rem;
  }
  .nav-bar > ul {
    margin: 0 0 0 9.75rem;
    justify-content: flex-start;
  }

  .submit-score img {
    width: 340px;
  }
  .created-in {
      position: absolute;
      left: 2rem;
      bottom: 0rem;
      max-width: 100%;
  }
  
}

@media screen and (max-width: 992px) {
  #home .wrapper {
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .copy-code {
    margin-top: 2rem;
    bottom: unset;
    top: unset;
    position: relative;
  }
  .main-logo {
    max-width: 38vw;
    height: auto;
  }

  .playable-on {
    gap: 1rem;
    width: fit-content;
    align-items: center;
  }
  .created-in {
    position: relative;
    right: unset;
    left: unset;
    bottom: unset;
  }
  #home {
    padding: 6rem 0 4rem;
  }
    h2 img {
      transform: translateX(-50%) translateY(-50%) scale(0.75);
        max-width: 100%;
    }

  #home .wrapper {
    padding: 0;
    margin-left: 26rem;
    background-position: right 7% center;
  } 
}
@media screen and (max-width: 800px) {

  .main-logo {
    max-width: 50vw;
  }
  .home-left {
    margin: 4rem 0 0;
  }
  
  #home .wrapper {
    padding: 0;
    margin-left: 14rem;
    background-position: right 7% center;
  } 
}
@media screen and (max-width: 600px) {
  .home-left {
    margin: 0rem 0 0;
  }

  .home-left-button {
    font-size: 1.375rem;
  }
  h1 span br {
    display: none;
  }
  .main-logo {
    max-width: 40vw;
    height: auto;
  }
  #home {
    background-position: right 15% center;
    margin-left: 0;
  }
     #home .wrapper {
        margin: 0 auto;
  }  
}

@media screen and (max-width: 480px) {
     h2 img{
      transform: translateX(-50%) translateY(-50%) scale(0.7);
  }
    #home .wrapper {
        margin: 0 auto;
  } 
}


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

    #home .wrapper {
        max-width: 2200px;
    }
  .playable-on {
    transform: scale(1.25);
  }
  .home-left-bottom {
    left: 8.75rem;
  }
  .created-in {
    transform: translateX(3rem);
  }
  .submit-score img {
    transform: scale(1.5);
  }
    
  h2 img{
      transform: translateX(-50%) translateY(-50%) scale(1.35);
  }

}


@media screen and (min-width: 2561px) {
  .main-logo {
    margin-bottom: 8rem;
  }

  .playable-on {
    transform: scale(1.5);
  }
  #home .wrapper {
    max-width: 2560px;
  }
  .created-in {
    transform: scale(2) translateX(3rem);
  }
  .submit-score img {
    transform: scale(2.15);
  }
  .available-on img {
    transform: scale(2);
  }
  .mapcode_text {
    margin-bottom: 0.5rem;
  }
    
  h2 img{
      transform: translateX(-50%) translateY(-50%) scale(1.75);
  }

}

@media screen and (min-width: 3400px) {
  #home .wrapper {
    max-width: 3200px;
  }
}

/*********************************************************************************************************************************/
/********************************************************** recompenses **********************************************************/
/*********************************************************************************************************************************/

#recompenses{
  background-image: url('../img/recompenses-bg.webp');
}

.prize-mobile{
  display: none;
}

.prize-desktop{
  max-width: 80vw;
  margin: 2rem auto;
}

.prize-mention{
     position: absolute;
    bottom: 2rem; 
}

@media screen and (max-width: 600px){
  .prize-mobile{
    display: block;
    max-width: 100%;
    margin: 0 auto 2rem;
   }
  .prize-desktop{
      display: none;
  }

}
@media screen and (max-width: 480px){
  .prize-mobile{
    max-width: 320px;
   }
}

/*********************************************************************************************************************************/
/*********************************************************** trailer **************************************************************/
/*********************************************************************************************************************************/

#trailer {
  padding: 0;
}

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

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

#trailer .video-box-resp {
  padding-bottom: calc(56.125%);
}

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

#course .scroll-down > span {
  color: white;
}

video {
  background-color: transparent !important;
}

.trailer-desktop{
  display: block;
}
.trailer-mobile{
  display: none;
}

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


/*********************************************************************************************************************************/
/*********************************************************** niveaux **************************************************************/
/*********************************************************************************************************************************/

#niveaux{
   background-image: url('../img/niveaux-bg.webp'); 
}

.niveaux-row{
  display: flex;
  align-items: center;
    gap: 0.5rem;
    justify-content: space-between;
}

.niveaux-row>img{
width: 10rem;
    cursor: pointer;
}
.niveaux-block {
    margin-top: 4rem;
    width: calc(100% - 20rem);
    display: flex;
    gap: 2rem;
}

.niveaux-block-left{
  background-color: #392127;
    padding: 0.5rem;
  border-radius: 2rem;
  display: flex;
      width: 25rem;
}

.niveaux-block{
  margin-top: 2rem;
}

.niveaux-block-left-text{
  background-color: #3a2228;
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  border: 4px solid #744030;
  color: #fcfcec;
}

.niveaux-block-left svg{
  margin: 0 auto;
  width: 4rem;
}

.niveaux-block-left p{
 margin: 0 0 0.25rem;
 font-size: 1.25rem;
}


h4{
    font-family: azo-sans-uber, sans-serif;
    font-style: normal;
    font-weight: 400;
    text-align: center;
   color: #fcfcec;
   text-transform: uppercase;   
   font-size: 1.75rem;
   margin: 0.5rem auto;
}

.niveaux-block-right{
      width: calc(100% - 25rem);
}

.niveaux-block-right img{
    height: 100%;
    max-width: 100%;
}

  .niveaux-row-left-arrow:hover, .niveaux-row-right-arrow:hover{
    transform: scale(1.1);
  }

@media screen and (max-width: 1680px){
    #niveaux .wrapper {
        max-width: 100% !important;
        box-sizing: border-box;
    }
}
@media screen and (max-width: 1440px){
  .niveaux-row-left-arrow {
      width: 9rem;
      cursor: pointer;
      transform: scale(0.75);
      margin-left: -2rem;
  }
   .niveaux-row-right-arrow {
      width: 9rem;
      cursor: pointer;
      transform: scale(0.75);
      margin-right: -2rem;
  } 
  .niveaux-block {
      margin-top: 2rem;
      width: calc(100% - 12rem);
      display: flex;
      gap: 2rem;
  }
  .niveaux-row-left-arrow:hover, .niveaux-row-right-arrow:hover{
    transform: scale(0.85);
  }

}

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

  .niveaux-block {
      margin-top: 2rem;
      width: calc(100% - 12rem);
      display: flex;
      gap: 2rem;
  }
}

@media screen and (max-width: 992px){
      .niveaux-block {
        flex-direction: column;
    }
    .niveaux-block-left {
        width: 100%;
        box-sizing: border-box;
    }
    .niveaux-block-right {
        width: 100%;
    }
     .niveaux-row>svg {
      width: 14rem;
  } 
  .niveaux-row-left-arrow:hover, .niveaux-row-right-arrow:hover{
      transform: scale(0.78);
  }
}

@media screen and (max-width: 600px){
  .niveaux-block-left p {
      margin: 0 0 0.5rem;
      font-size: 1.125rem;
  }
}
@media screen and (max-width: 480px){
  .niveaux-row {
      justify-content: center;
      margin: 8rem auto 0;
      position: relative;
  }
  .niveaux-row>img {
    width: 8rem;
    top: -82px;
    position: absolute;
  }
  .niveaux-row-right-arrow {
        transform: scale(0.75);
        margin-right: -6rem;
    }    
    
   .niveaux-row-left-arrow {
        transform: scale(0.75);
      margin-left: -6rem;
    }    
       
    .niveaux-block {
        margin-top: 2rem;
        width: calc(100% - 2rem);
        display: flex;
        gap: 1rem;
    }
}
@media screen and (min-width: 1921px){
  
  .niveaux-row>svg{
    width: 6rem;
    cursor: pointer;
  }
}

#niveaux-block-2{
  display: none;
}



/*********************************************************************************************************************************/
/************************************************************ guide **************************************************************/
/*********************************************************************************************************************************/

#guide{
   background-image: url('../img/guide-bg.png'); 
}

.guide-steps{
  display: flex;
  gap: 2rem;
}

.guide-steps img{
  width: calc(20% - 1.66rem);
}

@media screen and (max-width: 800px){
  .guide-steps img {
      width: calc(33% - 1.66rem);
  }
  .guide-steps {
      flex-wrap: wrap;
  }
      #guide .wrapper {
        padding: 0;
    }
}
@media screen and (max-width: 480px){
    .guide-steps img {
        width: calc(50% - 1rem);
    }
}




/*********************************************************************************************************************************/
/************************************************************** rmv **************************************************************/
/*********************************************************************************************************************************/

#rmv{
   background-image: url('../img/niveaux-bg.webp'); 
   padding: 0;
       background-size: cover;
}
#rmv .wrapper{
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0;
    max-width: unset !important;
    padding: 0;
}

.rmv-left{
  display: flex;
  flex-direction: column;
  width: 50%;
  padding: 0 6rem;
      box-sizing: border-box;
  justify-content: center;
}

.rmv-right{
  width: 50%;
  background-image: url('../img/rmv-image-right.png');  
  background-size: cover;
}

.rmv-text{
  flex-direction: column;
}
.rmv-text p{
  text-align: justify;
}
.rmv-text-links{
    gap: 1rem;
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.rmv-text-links a{
  border: 4px solid white;
  box-shadow: 2px 2px 6px 2px rgba(0,0,0,0.4);
  color: #fcfcec;
    font-size: 1.25rem;
    text-transform: uppercase;
    padding: 0.5rem 1.5rem;
    border-radius: 2rem;
    font-weight: 900;
}

.rmv-text-links-left{
  background-color: #00e592;
}

.rmv-text-links-left:hover{
  background-color: white;
  color: black;
}

.rmv-text-links-right{
  background-color: #fdb741;
}
.rmv-text-links-right:hover{
  background-color: white;
  color: black;
}
.rmv-logo{
  display: block;
  margin: 2rem  auto;
  width: 11rem;

}

@media screen and (max-width: 1366px){
  
  .rmv-left{
    padding: 0 4rem;
  }
}

@media screen and (max-width: 1080px){
  
  .rmv-left{
    padding: 0 2rem;
  }
    
  #rmv h2 img{
    transform: translateX(-50%) translateY(-50%) scale(0.6);
  }
  .rmv-text-links a {
      font-size: 1.125rem;
  }

}


@media screen and (max-width: 992px){
  #rmv .wrapper{
    flex-direction: column;
  }
    .rmv-right {
      width: 100%;
      background-image: url(../img/rmv-image-right.png);
      background-size: cover;
      height: 40rem;
  }
      .rmv-left {
        padding: 2rem 2rem 0 2rem;
                width: 100%;
    }
  .rmv-logo {
      width: 10rem;
  }
  .rmv-text-links{
       flex-direction: column;
    justify-content: center;
    text-align: center; 
  }
}

@media screen and (max-width: 600px){
    .rmv-text-links a {
    font-size: 1.5rem;
    padding: 1rem 1.5rem;
    border-radius: 2rem;
    font-weight: 900;
    width: 320px;
    margin: 0.125rem auto;
  }
    #rmv h2 img{
    transform: translateX(-50%) translateY(-50%) scale(0.7);
  }
}

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

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

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem;
  position: relative;
  border-top: 2px solid #744030;
}

.footer-links {
  display: flex;
  gap: 0.75rem;
      font-family: azo-sans-uber, sans-serif;
    font-style: normal;
    font-weight: 400;
}

.footer-links > * {
  text-transform: uppercase;
  color: white;
  font-size: 1.375rem;
  cursor: pointer;
}

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

.divider {
  padding: 0 4px;
}

.mentions-epic {
  color: #fcfcec;
  font-size: 0.75rem;
  text-align: center;
  padding: 0.5rem 4rem;
  border-top: 2px solid #744030;
}
.mentions-epic p {
font-size: 1rem;
  }
.mentions-epic a {
  color: #fcfcec;
}
.mentions-epic a:hover {
  color: black;
}

.to-top {
  margin-left: 9rem;
  position: relative;
  transform: translateX(1rem);
}

.to-top:hover > svg > path:first-child {
  fill: white;
}
.to-top:hover > svg path:last-child {
  fill: #ff7900;
}

.arrow-to-top {
  position: absolute;
  right: 1rem;
  bottom: -4rem;
}

.to-top:hover .arrow-to-top > svg path:first-child {
  fill: #fdb741;
}

.footer-left {
  display: flex;
  gap: 3rem;
  align-items: center;
}

.social-bar {
  display: flex;
  justify-content: center;
  gap: 1rem;
  height: 2rem;
}
.social-bar a {
  display: flex;
  height: 2rem;
  width: 2rem;
}
.social-bar svg path {
  fill: white;
}
.social-bar svg:hover path {
  fill: #ff7900;
}

@media screen and (max-width: 1080px) {
  .footer-left {
    gap: 2rem;
  }

  .to-top {
    margin-left: 1rem;
  }

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

@media screen and (max-width: 992px) {
  .to-top {
    margin-left: 0rem;
  }
  .arrow-to-top {
    transform: scale(0.85);
  }

}

@media screen and (max-width: 992px) {
  .footer-top,
  .footer-left {
    flex-direction: column;
    gap: 3rem;
  }

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

  .footer-links {
    display: flex;
    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);
  }

  .divider {
    display: none;
  }
  .footer-top {
    padding: 2rem;
  }
  .mentions-epic p {
    font-size: 0.875rem;
  }
}

@media screen and (max-width: 480px) {
  .to-top {
    right: -2rem;
    top: 0rem;
    transform: scale(0.875);
    display: none;
  }
  .to-top svg {
    transform: scale(0.75) translateX(-1rem);
  }
}

@media screen and (min-width: 1921px){
  .arrow-to-top {
    position: absolute;
    right: 1rem;
    bottom: -2.75rem;
  }
}

@media screen and (min-width: 2561px) {
  .footer-left img {
      transform: scale(1.75) translateX(1rem);
  }
  .to-top {
    transform: translateX(1rem) translateY(-3rem) scale(1.5);
    margin-left: 3rem;
  }
}

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

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

.popup .popup-step {
padding: 0.75rem 1rem;
  margin: auto;
  text-align: center;
  position: relative;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: visible;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: #b66a53;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  -webkit-box-shadow: inset 0px 0px 10px 6px rgba(0,0,0,0.4); 
box-shadow: inset 0px 0px 10px 6px rgba(0,0,0,0.4);
    width: 46rem;
    height: auto;
    border-radius: 2rem;
    border: 0.25rem solid #fcfcec;
}

.popup .popup-step-inner {
    width: 38rem;
    height: auto;
    border-radius: 1.25rem;
    border: 0.25rem solid #c47b65;    
  padding: 3rem 4rem;
}



#step2 p {
  color: white;
  font-size: 0.75rem;
  margin: 0.5rem 0;
  text-align: justify;
  padding: 0 1rem;
}
#step2 p a {
  color: #fe7600 !important;
}
#step2 p a:hover {
  color: white !important;
}


/* Step 1 */

.step1-left {
  position: relative;
  width: 30rem;
  height: 17.9rem;
  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 {
  color: #00e592;
  font-size: 1.25rem;
  line-height: 0.95;
  font-weight: 800;
}

.step1-left_text_2 {
  color: #fcfcec;
  font-size: 1.25rem;
  font-weight: 800;
}
.step1-left_text {
  bottom: 1.25rem;
  position: absolute;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 85%;
  display: flex;
  flex-direction: column;
}

.close-popup {
  position: absolute;
  top: -2.5rem;
  right: -1.5rem;
  cursor: pointer;
  padding: 0.25rem;
}
.close-popup img {
  width: 5rem;
  height: 5rem;
}
.close-popup:hover {
  opacity: 0.8;
}
.popup h3 {
    font-size: 1.75rem;
    color: white;
    text-transform: uppercase;
    margin-bottom: 1rem;
    line-height: 1.15;
    margin-top: 0.5rem;
    font-family: azo-sans-uber, sans-serif;
    font-style: normal;
    font-weight: 400;
    border-bottom: 0.25rem #fdb741 solid;
    width: fit-content;
    margin: 0 auto 1.25rem;
}

#step-confirmation {
  display: none;
}

@media screen and (max-width: 1366px) {
  .step1-left {
    width: 518px;
    height: 310px;
  }
}

@media screen and (max-width: 1080px) {
  .step1-left {
    width: 408px;
    height: 244px;
    margin: 0 auto 2rem;
  }
}

@media screen and (max-width: 800px) {
  .step1-left {
    width: 469px;
    height: 280px;
  }
  #step1 h3 {
    font-size: 1.5rem;
  }
  #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: 333px;
        height: 199px;
    margin: 0 auto;
  }
  .popup .popup-step {
    width: 34rem;
  }
  .popup .popup-step-inner {
    width: 26rem; 
  }
  .row-checkbox {
    max-width: 76%;
  }
  .close-popup {
    top: 1rem;
    right: 1rem;
  }

  .popup .popup-step {
    width: 94%;
    height: auto;
    box-sizing: border-box;
  }
  .step1-left_text_1 {
    font-size: 1rem;
  }
  .step1-left {
    width: 278px;
    height: 166px;
    margin: 0 auto;
  }
  .row-checkbox {
    max-width: 74%;
    transform: translatex(2rem);
  }
  .step1-left_text_2 {
    font-size: 0.75rem;
  }
.popup .popup-step-inner {
        width: 70%;
    }
}

@media screen and (max-width: 420px) {
  .step1-left {
    width: 252px;
    height: 151px;
  }
  .popup h3 {
    font-size: 1.25rem !important;
  }
  .close-popup {
    top: -3rem;
    right: -1rem;
  }

}

@media screen and (min-width: 1921px) {
  .close-popup {
    transform: scale(1.25);
  }
  .popup-step {
    min-width: unset;
  }
  #row-email {
    margin: 0.5rem auto;
  }
}
@media screen and (min-width: 2881px) {
  .close-popup {
    transform: scale(1.5);
  }
}

/* Step 2 */

#checkboxes {
  flex-direction: column;
  display: flex;
  align-items: flex-start;
  margin-bottom: 2rem;
}

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

input[type="checkbox"] + label::before {
  content: "";
  width: 2.375rem;
  height: 2.375rem;
  display: block;
  background-size: contain;
  position: absolute;
  left: -3.5rem;
  top: 0rem;
  background-repeat: no-repeat;
  background-color: #6e3d30;
  background-image: url(../img/grid.png);
  border-radius: 0.75rem;
  border: 3px solid #fcfcec;
  -webkit-box-shadow: inset 0px 0px 8px 5px rgba(34,18,22,0.35); 
  box-shadow: inset 0px 0px 8px 5px rgba(34,18,22,0.35);
}

input[type="checkbox"]:hover + label:after,
input[type="checkbox"]:checked + label::after {
  content: "";
  width: 1.5rem;
  height: 1rem;
  background-image: url('../img/check.png');
  background-repeat: no-repeat;
  background-size: 90%;
    display: block;
    position: absolute;
    left: -2.875rem;
    top: 0.875rem;
  background-repeat: no-repeat;
  background-size: cover;
}

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

#step2-email{
  background-color: unset;
  padding: 0.5rem 2rem 1rem;
  color: #fcfcec;
  font-size: 1.25rem;
    background-color: #6e3d30;
    background-image: url(../img/grid.png);
    border-radius: 1.25rem;
    border: 3px solid #fcfcec;
    -webkit-box-shadow: inset 0px 0px 8px 5px rgba(34,18,22,0.35); 
box-shadow: inset 0px 0px 8px 5px rgba(34,18,22,0.35);
}
#step2-email::placeholder{
  text-align: center;
  color: #fcfcec;
  text-transform: uppercase;
  font-size: 1.125rem;
  line-height: 1;
  transform: translateY(3px);
  background-image: url(../img/grid.png);
  font-weight: 700;
}

#step2 label {
  color: #fcfcec;
  font-size: 1.25rem;
  position: relative;
  text-align: left;
  line-height: 1.15;
  cursor: pointer;
  margin:  0 0 0.75rem;
  font-weight: 800;
}

#step2 label + svg {
  position: absolute;
  z-index: -1;
  top: 0.675rem;
  transform: scale(0.675);
}

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

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

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

#row-email,
#row-phone {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0.75rem auto;
  width: 100%;
}
#row-email > div,
#row-phone > div {
  display: flex;
  align-items: center;
  width: 100%;
  flex-direction: column;
  position: relative;
}

#submit {
  padding: 1.125rem 3rem;
  border: 4px solid #fcfcec;  
  cursor: pointer;
  width: max-content;
  background-color: transparent;
  color: white;
    font-size: 1.5rem;
    border-radius: 2rem;
  background: #00e592;
  text-transform: uppercase;
      font-family: azo-sans-uber, sans-serif;
    font-style: normal;
    font-weight: 400;
}
#submit:hover {
  color: black;
}
#submit img {
  width: 15rem;
}

@media screen and (max-width: 800px) {
  #checkboxes {
    gap: 0.5rem;
    padding: 0 1.5rem;
  }
}


@media screen and (max-width: 480px) {
  .row-checkbox {
    width: 100%;
    margin: 0.75rem auto;
    transform: translatex(2rem);
  }
  #step2 label,
  #step2 label a {
    font-size: 1rem;
  }

  #submit {
    padding: 0.75rem 2rem;
  }


}

@media screen and (min-width: 1921px) {
  #step2-email::placeholder {
    transform: translateY(0px);
  }
  .row-checkbox {
    max-width: 90%;
  }
  #step2 label + svg {
    top: 1.375rem;
    transform: scale(0.875);
  }
  #step2-email{
    padding: 0.75rem 2rem 1rem;
  }
}

@media screen and (min-width: 2561px) {
  #step2 label + svg {
    top: 1.875rem;
    transform: scale(1.25);
  }
}

/* Step 3 */

.end-popup {
    padding: 1.125rem 3rem;
    border: 0.25rem solid #fcfcec;
    cursor: pointer;
    width: max-content;
    color: white;
    font-size: 1.5rem;
    border-radius: 2rem;
    background: #00e592;
    text-transform: uppercase;
    font-family: azo-sans-uber, sans-serif;
    font-style: normal;
    font-weight: 400;
    margin: 0 auto;
}
.end-popup:hover{
    color: black;
    background: white;
}
#resultModalBody {
  color: white;
}

@media screen and (min-width: 1921px) {
  .end-popup {
    bottom: 0.5rem;
  }
}

@media screen and (min-width: 480px) {
  .end-popup {
    padding: 0.75rem 2rem;
  }
}

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

#cookies {
  border-top: 2px solid #fcfcec;
  color: #fcfcec;
  position: fixed;
  bottom: 0;
  z-index: 9;
  width: 100%;
}
#cookies .main-overlay {
  background-color: #6e3d30;
  width: 100%;
  height: 100%;
}

#cookies {
  display: none;
}

.charte-cookies {
  background-color: #00e592;
    border: 4px solid white;
    box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.4);
    color: #fcfcec;
    font-size: 1.125rem;
    text-transform: uppercase;
    padding: 0.5rem 1.5rem;
    border-radius: 2rem;
    font-weight: 900;
    display: block;
    margin: 1rem auto;
    text-align: center;
    width: fit-content;
}

.charte-cookies:hover{
  background-color: white;
  color: black;
}


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

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

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

.cookie-buttons > *,
#end-cookies {
  cursor: pointer;
  background-color: #00e592;
  line-height: 1;
  font-weight: 600;
  width: fit-content;
  padding: 0.75rem 1rem;
  line-height: 1;
  font-size: 1rem;
  width: 20rem;
  font-size: 1rem;
  color: white;
  border: 0px;
}

#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 {
  color: black;
}

.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;
  color: white;

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

@media screen and (max-width: 600px) {
  .close-param-cookies-popup {
    right: 0.5rem;
    top: 0.5rem;
  }
}
@media screen and (max-width: 480px) {
  .cookie-buttons {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .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;
  padding: 0 4rem;   
  }
    
  .charte-cookies {
      margin: 2rem auto;
  }

}

/************* LEGAL ***************/
#legal {
  background-color: white;
}

#legal h1 {
  text-transform: uppercase;
    font-size: 3rem;
    z-index: 1;
    line-height: 1;
    text-align: center;
    margin: 4rem 0 1rem;
    font-family: "azo-sans-uber", sans-serif;
    font-weight: 400;
    font-style: normal;
    position: relative;
        color: #fdb741;
}

#legal h2 {
color: #744030;
    font-style: normal;
    font-size: 2.25rem;
    text-transform: unset;
    margin: 1rem 0 0;
}

#legal p {
  color: black;
}

@media screen and (max-width: 768px) {
  #legal h1 {
    margin-top: 8rem;
  }
}

#filename {
    display: none;
}