@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; color: #2F4562;}
*{ margin: 0; padding: 0; border: none; box-sizing: border-box;}

html {
    scroll-behavior: smooth;
}

:root {
  
}


.top-cta{ position: fixed;top: 0;  z-index: 99; right: 0;display: flex;align-items: center;column-gap: 20px;}
#lang-switch {display: flex;/* column-gap: 10px; */}
#lang-switch a{text-decoration: none;padding: 10px 5px;font-family: 'Akshar';color: #2F4562;}
#lang-switch .active a { font-weight: bold;}


.cta{ display: inline-block; text-decoration:none;padding: 10px 20px;     font-family: "Akshar", sans-serif; font-size: 20px; text-transform: uppercase; background-color:   #D65254; color: #fff; }
body{ font-family: "Abhaya Libre", serif; }
p{ font-size: 20px; margin-bottom: 20px; }
.main-p p{font-size: 25px;  margin-bottom: 30px; }
ul, li{ list-style: none;}

h1{  color: #D65254;  margin-bottom: 40px; font-size: 50px; line-height: 45px;}
h1 small{ font-size: 35px; display: block;     line-height: 30px;}
h2{  font-weight: 500; font-family: "Akshar", sans-serif; text-transform: uppercase; font-size: 45px; }
h3{ font-weight: 500; font-family: "Akshar", sans-serif; text-transform: uppercase; font-size: 30px; margin-bottom: 30px;  }
h4{ font-family: "Akshar", sans-serif; text-transform: uppercase; font-size: 20px; margin-bottom: 0px;  }

.home-draw{
    width: 300px;
}
.home-draw .bottom{
        width: 100%;
        min-height: 300px;
        border-width: 0 1px 1px 1px;
        border-color: #2F4562;
        border-style: solid;
        height: 100%;
}
.home-draw .roof{position:relative;width: 100%;height: 150px;/* background-color: pink; */}
.home-draw .roof:before,
.home-draw .roof:after {content: '';width: 1px;height: 141%;background-color: #2F4562;display: block;position: absolute;bottom: 0;}
.home-draw .roof:before{     
    transform: rotate(45deg);
   
    left: 0;
  
    transform-origin: bottom;}
    .home-draw .roof:after{     
    transform: rotate(-45deg);
   
    right: 0;
  
    transform-origin: bottom;}
.wrap-title{ margin-bottom: 30px;}

.main-nav{  margin-bottom: 100px; margin-left: 5%; position: sticky; top: 0; border-top: 1px solid #2F4562; display: inline-block; padding-top: 5px;}
.main-nav li{ display: inline-block; margin-right: 20px; }
.main-nav li a{ text-transform: uppercase;text-decoration: none; color: #2F4562; font-family: "Akshar", sans-serif; font-size: 20px;}


#loc_hero{     padding: 150px 5% 0; }

#loc_resume{ padding: 100px 5% 100px 0; }
#loc_resume .wrapper{ display: flex;     align-items: center; }
#loc_resume .picture{ width: 60%; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); }
#loc_resume .picture img{ display: block; width: 100%;}
#loc_resume .text-content{ padding-left: 5%; padding-bottom: 100px; }

#loc_spaces{ background-color: #B7D3DD; padding: 180px 5%; margin-top: -180px; }
#loc_spaces .home-draw{     margin-top: -160px;}
#loc_spaces .stage{ margin-bottom: 30px; }
#loc_spaces .stage h3{ position: relative;}
#loc_spaces .stage h3:after{ position: absolute; bottom: 0; left: 0 ; content: ''; display: block; width: calc( 100vw - 200px ); display: block; background-color: #2F4562; height: 1px;}
#loc_spaces .wrapper{ display: flex ;     justify-content: space-between;}

.stage-detail ul{  columns: 3;
    column-gap: 50px; }
#loc_pictures{ padding: 50px 0 50px 5%; position: relative;    margin: 100px 0 0 0; }
#loc_pictures:before{ content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; display: block; position: absolute; background-color: #2F4562;}
#loc_pictures .wrapper{ display: flex; position: relative;}
#loc_pictures .text-content{ width: 30% ; color: #fff; padding-right: 50px;}
#loc_pictures .pictures{ display: flex; column-gap: 20px;}
#loc_pictures .slider-container{ width: 70%; padding: 50px 0;}
#loc_pictures .card{ min-width: 400px;}

#loc_practical{ padding: 100px 5%; }
#loc_practical .wrapper{ display: flex;
    column-gap: 100px;
    align-items: center;
}
#loc_practical .wrapper .text{ margin-bottom: 30px;}
#loc_practical .practical-infos{ margin-bottom: 30px;}
#loc_practical  .localisation img{ max-width: 100%;}
#loc_practical  .localisation .illu{  min-width: 40%;}
#loc_practical h2, #loc_practical h4{ color: #D65254;}

.more-xl{ text-align: center; width: 100%; margin-top: 30px; }

#loc_profil{ background-color: #2F4562; padding: 100px 0; }
#loc_profil .title{ text-align: center; color: #fff;}
#loc_profil .wrapper{ padding: 0 0 0 5%; }
#loc_profil .wrapper .box{ background-color: #fff; display: flex;    align-items: center; }
#loc_profil .wrapper .box .pict img{ display: block; width: 100%;}
#loc_profil .wrapper .box .pict{ width: 50%;}
#loc_profil .wrapper .box .text{ width: 50%; padding: 5%;}

#loc_faq{ background-color: #B7D3DD; padding: 100px 5%; }
#loc_faq .wrapper{ display: flex; column-gap: 100px;}
#loc_faq  .text{ width: 30%;}
#loc_last{ padding: 100px 0; }
#loc_last .title-cta{ margin-bottom: 30px; text-align: center; }
#loc_last .title-cta h5{ font-family: "Akshar", sans-serif; text-transform: uppercase; font-size: 20px; margin-bottom: 0px; font-weight: 300;  }

#loc_faq .question-item{ border-bottom: 1px solid #2F4562; width: 100%;}
#loc_faq  .questions{ width: 70%;}
#loc_faq .question{     display: flex;
    justify-content: space-between;
    cursor:pointer;
    padding: 20px 0;
    font-size: 20px;}
    #loc_faq .question h5{ font-size: 20px;}


#loc_faq .question span:before,
#loc_faq .question span:after{ content: ''; width: 100%; height: 1px; background-color: #2F4562; display: block; position: absolute; transform-origin: center;}
#loc_faq .question span:before{ transform: rotate(45deg);}
#loc_faq .question span:after{  transform: rotate(-45deg);}
#loc_faq .question span{ top: 10px; position: relative; display:block; width: 30px; height: 0px;transform: rotate(45deg);  }
#loc_faq .answer{     max-height: 0;
    overflow: hidden;     transition: max-height 0.3s 
ease-in-out;}

#loc_faq .question-item.active .answer{     max-height: 500px;}

#loc_exchange{ background-color: #2F4562; padding: 100px 5%; color: #fff;  }
#loc_exchange .wrapper{ display: flex; align-items: end; justify-content: space-between;}
#loc_exchange .text{ max-width: 500px;}
#loc_exchange .col-cta{  text-align: right; }
#loc_exchange .col-cta .cta{ margin-top: 20px;}
.card{ background: #FFF;

box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.25); min-width: 300px; }


.card .pict img{ display: block; width: 100%;}
.card .legend{ text-align: center; padding: 20px;}

.pictures-slider{ display: flex;     column-gap: 30px;}

      

.arrow {
   
    position: absolute;
    z-index: 99;
    top: calc( 50% - 40px );
   
    background: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #d75255 url(../img/arrow.svg) no-repeat center center;
}

.arrow.left {
    left: 20px;
    z-index: 20;
    transform: rotate(180deg);
}

.arrow.right {
    right: 20px;
}

.arrow.hidden {
    display: none;
}
.slider-container{ position: relative;}
.slider-container-wrapper {
    width: 100%;
   
    overflow: hidden;
    padding: 15px 0;
}

@media (max-width: 1200px) {
       #loc_pictures .wrapper{ display: block;}
       #loc_pictures .slider-container{ width: 100%;}
}
@media (max-width: 1100px) {
    #loc_practical .localisation .wrapper{ display: block;}
}

@media (max-width: 1000px) {
    #loc_faq .wrapper{ display: block;}
    #loc_faq .questions{ width: 100%;}
    #loc_faq .text{ width: 60%;}
    .stage-detail ul{ columns: 2}
}

@media (max-width: 900px) {
    .main-nav{ margin-bottom: 0;}
    #loc_resume .wrapper{ display: block;}
    #loc_resume .picture{ width: 100%; margin-bottom: 40px;}
    #loc_pictures .text-content{ width: 90%;}
    #loc_pictures:before{ width: 95%;}
    .home-draw {
    width: 150px;
    }
    #loc_spaces .stage h3:after{  width: calc(100vw - 80px);}
    .main-nav{ position: relative;}
    .home-draw .roof{ height: 75px;}
    #loc_profil .wrapper .box{ display: block;}
    #loc_profil .wrapper .box .text, #loc_profil .wrapper .box .pict{ width: 100%;}
    #loc_exchange .wrapper{ display: block;}
    #loc_practical .practical-infos .illu{ display: none;}
    #loc_practical .wrapper{ display: block;}
    .stage-detail ul{ column-count: 1;}
}