@import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;500;600;700;800&family=Akshar:wght@300..700&family=Palette+Mosaic&display=swap');

      body{ overflow-x: hidden;}
*{ margin: 0; padding: 0; border: none; box-sizing: border-box;}

html {
    scroll-behavior: smooth;
}

 :root {
    --orange: #FF280B;
    --red: #A52300;
    --orange-dark: #E23000;
}


p{     color: #2F4562;
    font-size: 20px; }
ul, li{ list-style: none;}

.wrapper{padding: 0 5%;}

h1{ text-align: center; display: inline-block;}

.wrap-main-title{ text-align: center; position: relative;}
.wrap-main-title h1 .before{ display: block; text-align: left;}
.wrap-main-title h1 .after{ display: block; text-align: right;}
.wrap-main-title .distance{position: absolute;bottom: -150px;left: 0;text-align: center;width: 100%;color: #2F4562;font-size: 24px; display: block}
.wrap-main-title .distance i{ position: absolute; left: 50%; bottom: -28px; font-style: normal;}
.wrap-main-title .distance::before{content:'';left: 50%;width: 1px;height: 100px;background-color: #2F4562;position: absolute;bottom: 40px;}


#mss_resume{padding: 100px 5%; background-color: #2F4562; color: #fff; text-align: center; }
#mss_resume p{ color: #fff; font-size: 30px;     font-family: "Akshar", sans-serif; }
#mss_resume 
.cta-wrapper{ padding-top: 30px;}
#mss_resume 
.cta-wrapper .cta{ margin: 8px;
    font-size: 17px;
}
#mss_intro { min-height: 100vh; position: relative; }
.cloud{ position: absolute; }
#cloud5 {
    top: 10%;
    right: 30px;
}
#mss_intro  #cloud1{ top: 15vh; left: -50px;}
#mss_intro  #cloud2{ top: 20vh;
    right: 20px; }
#mss_intro .wrapper{ display: flex; height: 100vh; align-items: center; justify-content: space-around;}
#mss_intro .text-about{ position: absolute; bottom: 0; left: 0;     position: absolute;
    bottom: 30px;
    left: 2%;
    width: 350px;}

  #mss_intro .text-about p{  color: #2F4562; font-size: 20px; }

#mss_intro .austine-question{ position: absolute;
    right: 90px;
    bottom: -38px;}
#mss_intro .austine-question div{position: absolute;top: -70px;right: -50px;width: 100%;}
#mss_intro .austine-question div span{
    display: inline-block;
    background-color: #000;
    color: #fff;
    font-size: 20px;
    padding: 2px 7px;
    position: absolute;
    right: 0;
    top: 0;
    display: block;
 }
#mss_intro .austine-question div span:nth-child(1){ transform: rotate( -8deg); color: #8FB3E3;}
#mss_intro .austine-question div span:nth-child(2){ top: 30px;  transform: rotate( 5deg); }

#full-nav{ }

h1 b{ font-family: "Palette Mosaic";
font-size: 122px;
font-style: normal;
font-weight: 400;
    line-height: 110px;}

body{ font-family: "Abhaya Libre", serif; }

header{ padding: 1% 2%; background-color: #fff;}
header #lang-switch li{ display: inline-block; position: relative; }


header{ display: flex; width: 100%;     z-index: 99; justify-content: space-between; position: fixed; }

header #lang-switch{font-family: "Akshar", sans-serif;font-size: 22px;}
header #lang-switch a{ position: relative; z-index: 2; padding: 10px; text-decoration: none; color: #000; }
header #lang-switch li.active:before{content: '';width: 50px;color:#000;height: 40px;background-color: #D97B66;position: absolute;display: block;transform: rotate(-6deg);margin: -4px;}

header #nav{ font-family: "Akshar", sans-serif; display: inline-block; }
header #nav li{ display: inline-block; padding: 0 15px;}
header #nav li a{ text-decoration: none; color: #000;}

header #full-nav{  font-size: 22px; text-transform: uppercase; }

.cta { font-family: "Akshar", sans-serif;font-size: 22px; display: inline-block; padding: 5px 20px; color:#000; text-decoration: none; background-color:#fff; text-transform: uppercase; }
.cta-pink{ background-color:#D65254;  }
.cta-pink-light{ background-color:#D97B66;}  

header .ctas-contact{ display: inline-block; position: relative; margin-left: 40px; }
header .cta-contact{position: absolute;top: 37px;left: 0;transform: rotate( 4deg);}


#mss_team{ background: url(../img/bg_yellow.svg); padding: 100px 0;}

#mss_team .sect-title{display: flex;width: 60%;column-gap: 50px;justify-self: center; margin-bottom: 40px; align-items: end;}
#mss_team .sect-title .text{ width: 60%; padding-bottom: 20px;}
#mss_team .wrap-persos{display: flex;justify-content: center;align-items: baseline; column-gap: 50px; }
#mss_team .wrap-persos .fonction{     
    text-align: center;
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    min-width: 120px; }
#mss_team .wrap-persos .people{position: relative;padding-bottom: 130px; margin: 30px 0;}


#mss_team .wrap-persos h4{ color: #000;

font-family: Akshar;
font-size: 25px;
font-style: normal;
font-weight: 700;
line-height: normal; }
#mss_team .wrap-persos h5{ 
color: #2F4562;

font-family: "Abhaya Libre";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}




#mss_location{padding: 100px 0;background-color: #E6E6E6;position: relative;}
#mss_location #cloud3{left: -10px;top: 30px;}
#mss_location #cloud4{left: 130px;top: 120px;}

#mss_location .title{ text-align: right;}
#mss_location .title div{ text-align: left; display: inline-block;}
#mss_location .que-faire{ position: relative;}
#mss_location .que-faire .text-intro{padding: 20px 28% 0%;/* width: 100%; */}
#mss_location .text-after{padding: 50px 60% 30px 5%;}
#mss_location .illus-absolute .illu{ position: absolute;}
#mss_location .illus-absolute .illu span{ font-family: Akshar;
font-size: 20px;
position: absolute;
}


#mss_location .illus-absolute #illu1{ top: 160px; right: 23%;  }
#mss_location .illus-absolute #illu1 span{ bottom: -30px;
    left: 0;
    transform: rotate(15deg);  }   
#mss_location .illus-absolute #illu2{     left: 38%; bottom: 20%;}
#mss_location .illus-absolute #illu2 span{ top: 110px;
    right: 30px;
    transform: rotate(5deg); }  
#mss_location .illus-absolute #illu3{ top: 40%;
    left: 120px;}
#mss_location .illus-absolute #illu3 span{ top: 90px;
    left: 161px;
    transform: rotate(5deg);
    color: #fff;
    width: 100%; }  
#mss_location .illus-absolute #illu4{ top: 20%; left: 31%;}
#mss_location .illus-absolute #illu4 span{ right: 20px;
    transform: rotate(-15deg); }


#mss_location .illus-absolute #illu5 {
    top: 60px;
    left: 5%;
    padding-top: 110px;
}
#mss_location .illus-absolute #illu5 #roue{
    position: absolute;
    bottom: 17%;
    left: 0%;
    transform-origin: center center;  
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
/* Animation avec pauses */
@keyframes grande-roue {
  /* rotation normale */
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(360deg); }

  /* pause */
  30%  { transform: rotate(360deg); }

  /* repart (2 tours) */
  55%  { transform: rotate(1080deg); }

  /* pause */
  65%  { transform: rotate(1080deg); }

  /* repart (1 tour) */
  90%  { transform: rotate(1440deg); }

  /* fin */
  100% { transform: rotate(1440deg); }
}

#mss_contact{ background: url(../img/bg_yellow.svg); padding: 100px;}
#mss_contact h3{ margin-bottom: 10px;}
#mss_contact .ctas-contact{ position: relative; min-width: 250px; }
#mss_contact .cta-contact{ position: absolute;
    top: 37px;
    left: 0;
    transform: rotate(4deg); }
#mss_contact .wrapper{ display: flex;  column-gap: 50px;}
#mss_quizz{     background: url(../img/bg_blue.svg);
    min-height: 100vh;
    text-align: center;
    padding: 100px 2%; }
#mss_quizz h2{ margin-bottom: 30px; }
#mss_quizz .main-cta{ font-size: 30px; margin-bottom: 50px; }

#mss_quizz .about-contest{width: 40%; margin-left: 50%; text-align: left; color: #fff; }
#mss_quizz .about-contest h5{ font-family: 'Akshar';     font-weight: 300;
font-size: 25px; margin-bottom: 30px; text-transform: uppercase; }

h2{ font-family: "Palette Mosaic";
font-size: 110px;
margin-bottom: 10px;
font-style: normal;
font-weight: 400;letter-spacing: -7px;
    line-height: 110px; text-transform: uppercase;}
h2 i{     display: inline-block;
    width: 30px; }
    h3{ color: #000;

font-family: Akshar;
font-size: 33px;
font-style: normal;
font-weight: 200;
line-height: 35px; }

#mss_quizz h2{ color: #fff;}
#mss_quizz{ position: relative;}

#mss_help{padding: 240px 0 50px 0;}
#mss_help .two-houses{display: flex;align-items: flex-end;}
.col-2{ position: relative;}
#mss_help .two-houses img{display: block;/* float: left; */width: 100%;margin: 2%;height: auto;}
#mss_help .title{ margin-bottom: 100px; text-align: left;}
.title h3{ margin-left: 10px;}
#mss_help  .about-other{ display: flex; column-gap: 30px;     display: flex;
    column-gap: 30px;
    padding: 50px 2%;
    align-items: end;     justify-content: center;}




#mss_help .col-text div{ padding: 30px 0; }




.subtitle{font-family: Akshar;font-size: 26px;font-weight: 700;}
.subtitle b{ background-color: #F2B705;     }
.criteria li{margin-bottom: 5px;font-family: Akshar;font-size: 25px;font-weight: 700; list-style: disc inside;}
.criteria {text-align: left;}

.sea{width: 40vw;display:block}
.sea-pink{ width: 100%; display:block;   }
.about-our-house { position: absolute; bottom: -300px; right: 0; width: 60vw; }


.wrapper-cols{
    display: flex;
    justify-content: space-around;
    align-items: end;
    column-gap: 35px;
    padding: 0 4%;
}
.wrapper-cols .col-1{ min-width: 35%;}
.wrapper-cols .col img.house{ max-width: 100%; display: block; width: 100%; min-width: 200px;}
.wrapper-cols .col.col-text img.house{ width: 100%};



.about-belgium{ position: relative;}
.about-belgium .table_bxl{ position: absolute; bottom: 60px; right: 35%; width: 200px;}
 .about-belgium .text{ color: #fff;
    padding-left: 30%;
    padding-right: 5%;
    position: absolute;
    bottom: 0;
    height: 100%;
    display: flex;
    align-items: center;
     }  
.about-belgium .text p{ color: #fff; }
.about-belgium .rail-to-bxl{bottom: 70px;right: 0;position: absolute;z-index: 2;}
.about-belgium .rail-to-bxl img.rail{ display: block; width: 25vw; transform-origin: right;}
.about-belgium .rail-to-bxl img.panels{ position: absolute;
    top: -140px;
    right: 0;
    width: 270px; }

.about-belgium .text .cta{ margin-top: 20px ;}
.stepper{ position: absolute; bottom: 0; left: 0; width: 100%; }

.stepper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stepper .text-step {
  white-space: nowrap;
}

.stepper .line {
  position: relative;
  flex: 1;
  height: 10px;

  overflow: hidden;
  background: rgba(218, 218, 218, 0.8); /* fond */
}

.stepper .line .line-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: #D65254; /* prend la couleur du texte / parent */
  transform-origin: left;
  transition: width 250ms ease;
}

.text-step{
  position: absolute;
  left: 10px;
  top: -30px;
  color: #fff;
  font-family: 'Akshar';
}

#mss_quizz .step{ display: none;}
#mss_quizz .step.active-step{ display: block;}

#mss_quizz .step .question{ text-align: center;
    color: #fff;
    /* margin-top: 130px; */
    left: 0;
    position: absolute;
    width: 100%;
    top: calc(50% - 100px); }

#mss_quizz .step .question .label{ 
    font-family: Akshar; 
    display: block;
    font-size: 30px; 
    font-weight: 400; 
    text-transform: uppercase; 
    margin-bottom: 20px;
    color: #fff;
}
#mss_quizz .step .question .label.small-label{
max-width: 50%;
    margin: 0 auto;
    text-transform: none;
    font-size: 25px;
    margin-bottom: 30px;
    }

#mss_quizz .step .question textarea{ 
    width: 590px;
    height: 250px;
    padding: 20px;
    font-size: 20px;
      font-family: Akshar;
}

    #mss_quizz .step .options{ display: inline-flex; background-color: #D9D9D9; color: #D65254;}
    #mss_quizz .step .options span{ font-family: Akshar;
        font-size: 30px;
        padding: 20px 60px; }
        #mss_quizz .step .options span:hover{ background-color: #fff;}

        .cta-next{ position: absolute;
        right: 110px;
        bottom: 110px;
    }

    #jeanloup{     margin-right: 50px;
    bottom: 40px;}
    #jeanloup .fonction{ right: 30px;}
   .fonction:before{content: '';width: 1px;height: 50px;background-color: #2F4562;display: block;position: absolute;top: -60px;left: 50%;}
    #jeanloup .fonction:before{     transform: rotate(27deg); left: 70%;}

    #austine { margin-left: 70px; bottom: 100px;}
     #austine .fonction{ left: 60px; bottom: 30px;}    
     #austine .fonction:before{ transform: rotate(-47deg); left: 60px;}

    .option input { position: absolute; opacity: 0; pointer-events: none; }
    .option { display: inline-flex; gap: .5rem; cursor: pointer; }
    .option input:checked + span {  }

    .option.is-checked{ background-color: #fff;}

    .indice1{ position: absolute; top: 150px; right: 20px; }
    .indice1 img{ width: 150px;}
    .indice1 span{
        right: 110px;
        transform: rotate(-15deg);
        font-family: Akshar;
        font-size: 20px;
        position: absolute;
        top: 30px;
        color: #fff;
    }

    #mss_quizz input[type="text"], #mss_quizz input[type="password"], #mss_quizz input[type="email"]{ 
        font-family: Akshar;
        font-size: 20px;
        padding: 20px 30px;
        min-width: 370px;
    }

    #mss_quizz .fieldset{ margin-bottom: 20px;}
    #mss_quizz .fieldset label{
    font-family: Akshar;
    display: inline-block;
    font-size: 31px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: #fff;
    margin-right: 20px;
    text-align: left;
    width: 15%;
    vertical-align: middle;
    }
    button[type="submit"]{
    padding: 10px 60px;
    font-family: Akshar;
    font-size: 20px;
    background-color: #D97B66;
    text-transform: uppercase;
    }


.successBox {
    display: block;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: url(../img/bg_yellow.svg);
    text-align: center;
    color: #fff;
    z-index: 300;
}

.successBox h2 {
    font-size: 35px!important;
    margin-bottom: 20px;
}

.successBox h4 {
    font-size: 24px;
    margin-bottom: 30px;
}

.successBox p {
    max-width: 400px;
    margin: 0 auto 50px auto;
}

.successInside {
    display: flex;
    height: 100vh;
    text-align: center;
    width: 100%;
}

.successInsideContent {
    align-self: center;
    vertical-align: middle;
    width: 100%;
    padding: 0 10%;
    color: #000;
}

    @media (max-width: 1500px) {
        .illu {
            transform: scale(0.8);
        }
        .about-belgium .rail-to-bxl img.panels{ top: -30px}
        #mss_team .wrap-persos{ flex-wrap: wrap;}
        #austine { bottom: auto;}
        #jeanloup .fonction{ right: auto ;}
    }

   @media (max-width: 1200px) {
          #mss_contact{     padding: 100px 0px; }
          #mss_team .wrap-persos{ column-gap: 10px;}
          #mss_team .wrap-persos #austine{ margin-left: 20px;}
          #mss_team .sect-title{ width: 90%; }
    }

    @media (max-width: 1000px) {
        header #nav{ display: none;}
   
          #mss_contact{ }
          .title h3{ margin-left: 0;}
          #mss_team .sect-title{  width: 100%; display: block;}
          #mss_team .sect-title .text{ width: 100%;}
          .illus-absolute { display: flex;
            flex-grow: unset;
            padding: 0 10%;
            flex-wrap: wrap;
            justify-content: center; 
        }

        .wrap-main-title .distance{ position: relative; bottom: auto; margin: 80px 0;}
.wrap-main-title .distance::before{ height: 50px;}

        .about-our-house{ position: relative;bottom: auto; }
        .illu.panels{ display:none}
        #mss_location .que-faire .text-intro{ padding: 0;}
        #mss_location .que-faire{ padding: 0 5%;}
        #mss_location .title{ text-align: left;}
        #mss_location #cloud3 { left: -190px;}
        #mss_location #cloud4{ top: -70px; left: 30px; }

        #mss_help{ padding-top: 50px;}
        #mss_help .wrapper-cols { column-gap: 3%;}
        #mss_help .wrapper-cols .col{ width: 50%;}

        #mss_help .wrapper-cols .col-1, #mss_help .wrapper-cols .col-3{ width: 73%;}
        #mss_help .wrapper-cols .col-2, #mss_help .wrapper-cols .col-4{ width: 20%;}
        .wrapper-cols .col img.house{ min-width: 0;}
        #mss_location .illus-absolute .illu{ position: relative; top: auto!important; left: auto!important; right: auto!important;}
        .sea{ display: none;}

        #mss_help .about-other { flex-wrap: wrap;}
        #mss_help .about-other .text{ margin-bottom: 30px;}
        #mss_help .about-other .house{ width: 45%;}

        #mss_help .wrapper-cols { flex-wrap: wrap;}
        .about-belgium .rail-to-bxl img.rail{ display: none;}
        #mss_location .illus-absolute #illu3 span{ color: #000;}
        #mss_location .text-after{ padding: 0 5%;}
        .about-our-house{ width: 100vw;}
        #mss_intro .wrapper{ padding-top: 200px; flex-direction: column; height: auto; }
        #mss_intro .text-about, #mss_intro .austine-question { position: relative; top: auto; bottom: auto; left: auto; right: auto;}
       
       #mss_intro .austine-question {  margin-top: 100px; }
        #mss_team .wrap-persos .people{ bottom: 0;}

        .about-belgium .table_bxl {
            position: relative;
            bottom: auto;
            right: auto;
           
        }
        #cloud5{ top: -60px;}
        #mss_quizz .step .options{ flex-direction: column;}
    }


       @media (max-width: 900px) {
          #mss_contact .wrapper{     display: block; }
          h1 b{ font-size: 80px; }
            h2{ font-size: 60px; }

          
    }


       @media (max-width: 800px) {
          #mss_contact{ }
    }