/*
CSS by Manu LECHAT
https://e-lechat.com
*/




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

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



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




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



:root {
  --black : #262633;  
  --dark: #333333;
  --blue: #2196F3;
  --purple: #48516E;
  --color_txt: #48516E;
}



/* titles */


.txt_14 { font-size: 14px; }
.txt_16 { font-size: 1rem ;  letter-spacing: 0; }
.txt_18 { font-size: 18px;   }
.txt_21 { font-size: 21px;   }
.txt_48 { font-size: 48px; } 
.txt_64 { font-size: 64px; } 

.maj{ text-transform: uppercase; letter-spacing: -0.04em;    }
.font_alt{ font-family: "Barlow_Condensed"; }
strong { font-weight: 700; }
.black { font-weight: 700; }
.medium{ font-family: "Poppins_medium";  }
.gradient_blue{     background: linear-gradient(180deg, #B4DEFF 0%, #2196F3 56.25%, #1770B7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; }
.grey{ --color_txt: #adadad; color:#adadad ; }
.white{ color: #fff; }
.titre{ line-height: 1.1em; margin-bottom: 0.5em; }
.color_alt{ color: var(--color_alt) }
.blue{ color: var(--blue) }
.color_light{color:  var(--color_light) }
.bolder{ font-weight: bolder; }
.burger{ display: none; }

.display_none{ display: none; }
.bt_contact:hover{ cursor: pointer; }

.typo_sans{ font-family: Poppins, sans-serif; }
.titre_small{ font-family: Poppins, sans-serif; width: fit-content; text-transform: uppercase; letter-spacing: 0.1em;  }
::selection {  background-color: rgba(0, 0, 0, 0.3); opacity: 0.1; transition: all .3s; ;  text-shadow: none; }
* {  box-sizing: border-box; outline: none; /*text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; */ }

html{ min-height: 100vh; background: white;   font-weight: 500; color: var(--color_txt);  min-height: 100vh;  top:0; left: 0; margin: 0; padding: 0; width:100%;-webkit-font-smoothing: antialiased;   box-sizing: border-box;  position: relative;  text-rendering: optimizeLegibility;  }
body{ background: white; min-height: 100vh;  font-family: "Poppins";  font-size: 1rem; line-height: 1.65em;  overflow-x: hidden;  width: 100vw; overflow-y: auto; color: var(--color_txt); margin: 0; padding: 0; top:0; left: 0; }
body.shownav{ overflow: hidden; }
div{  position: relative; display: block;   }
header, section, main{ width: 100vw; position: relative; }
img{  max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; object-fit: contain; }
ul{ margin: 0; display: block; text-align: left; padding: 0;}
li{ margin: 0;  list-style: none; padding: 0px;  }
h1,h2,h3,h4, h5{ color: var(--color_txt);  font-family: "Poppins-SemiBold"; font-weight:normal; font-style: normal; margin-block-start: 0; margin-block-end: 0; width: fit-content;   display: block; margin: 0; clear: both; break-after: always;   line-height: 1.12em;  } 
h2 strong, h3 strong{ font-weight:normal; }
span{ display: inline-block; }
a{ color: var(--color_txt); width: fit-content;  position: relative; text-decoration: none;  text-align: left;  }
a:hover{ cursor: pointer; }
p{ color: var(--color_txt);  font-weight: 400; clear: both; display: block; padding: 0; margin: 0; line-height: 1.65em;  }
p a{ text-decoration: underline;  color: var(--color_theme_dark); }
p a:hover{ text-decoration: underline; }
.bold{  font-weight: bold; }
.bold .em{  font-style: italic;  }
u{ position: relative; text-decoration: none; z-index:2;  }
u::before{  pointer-events: none; opacity: 0.6; mix-blend-mode: multiply; position: absolute; transform: rotate(2deg); z-index:1;  top: 0.3em; left: 0; width: 100%; height: .8em; background-color: var(--color_theme); content: "";  }

iframe{ border: none; width: 100%; height: 100%; margin: 0; }
a.over_underline{  width: fit-content;}
a.over_underline:after{ content:""; position: absolute; bottom:0; left: 0; transition: all .1s cubic-bezier(.17,.67,.68,1.01); width:0%; height: 2px; background: var(--color_txt); }
a.over_underline:hover:after{ width:100%;  }
blockquote{ margin: 1em 0; }
.section{ max-width:  100% ; width: var(--w_wrapper); margin: 0 auto;  }
.main_container{ width: 100%; }
.center{ text-align: center; margin: 0 auto; }

footer{ padding: 20px; display: flex; justify-content: center; }
/*

 /^^                                                                /^^
 /^^                                                                /^^
 /^^        /^^         /^^   /^^        /^^         /^^  /^^     /^/^ /^
 /^^      /^^  /^^       /^^ /^^       /^^  /^^      /^^  /^^       /^^
 /^^     /^^   /^^         /^^^       /^^    /^^     /^^  /^^       /^^
 /^^     /^^   /^^          /^^        /^^  /^^      /^^  /^^       /^^
/^^^       /^^ /^^^        /^^           /^^           /^^/^^        /^^
                         /^^
*/

.bt_blue{ padding: 5px 14px; background-color: var(--blue); color: white; border-radius: 40px; text-transform: none; font-size: 14px; }


.main_wrapper{  padding: 0px 20px; gap: 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wrapper{ width: 100%; max-width: 920px; display: flex; flex-direction: column; gap: 30px; }

.shadowpad{ border-radius: 20px; padding: 40px; background: #FFF; box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.22); }

/* nav_bar */

.nav_bar{ z-index: 90; top: 0; max-width: 1720px; margin-left: auto; margin-right: auto; position: fixed; width: 100%; align-items: center;  background: white; display: flex; justify-content: space-between; padding:20px 40px;  }
.nav_bar .logo{ width: 230px; }
.nav_bar .nav{ display: flex; gap: 30px;  align-items: center; }
.nav_bar .nav_link{ font-family: "Poppins_medium"; margin-top: 4px; letter-spacing: 0.02em;  font-size: 13px; text-transform: uppercase; }
.nav_bar .nav_bt{ padding: 5px 14px; background-color: var(--blue); color: white; border-radius: 40px; text-transform: none; font-size: 14px; }

/* hero  */

.hero{  margin-top: 100px; max-width: 1200px; width: 100%; overflow: hidden; aspect-ratio: 16/8; border-radius: 20px;  }
.hero .bg{ z-index: 1; width:100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }
.hero .bg_day{  animation :fadeOut 3s cubic-bezier(0.2, 0, 0.02, 0.93) 2s 1 normal forwards;   z-index: 2; width:100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }
/* .hero .bg:after{ content: ""; display: block; z-index: 2; position: absolute; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(rgb(57, 63, 243), rgba(0,0,0,0)); opacity: 0.2; } */
.hero .wrapper{ --color_txt: white; gap: 20px; z-index: 3; width: calc(80% - 40px); display: flex;  flex-direction: column; position: absolute; left: 80px; top: 60px; color: white;  }
.hero .pin{ position: absolute; top: 302px; left: 42px; }


/* section_appartment */
.section_appartment{ padding-top: 110px; }
.section_appartment .gallery{  display: flex; gap: 8px; border-radius: 20px; overflow: hidden; }
.section_appartment .gallery img{ aspect-ratio: 1;  overflow: hidden; object-fit: cover; }
.section_appartment .gallery .col1{ width: calc(50% - 4px); ; }
.section_appartment .gallery .col1 img{ width: 100%; height: 100%;  }
.section_appartment .gallery .col2{  width: calc(50% - 4px); gap: 8px; flex-wrap: wrap; display: flex;  }
.section_appartment .gallery .col2 a{  width: calc(50% - 4px); aspect-ratio: 1; }
.section_appartment .gallery .col2 img{  width:100%; height: 100%; object-fit: cover; }
.section_appartment .cols{ display: flex; gap: 40px; }
.section_appartment .cols .col1{ width: 50%; display: flex; flex-direction: column; gap: 1rem; }
.section_appartment .cols .col1 li{ list-style:disc; margin-left: 1rem; }
.section_appartment .cols .col2{  width: 50%; display: flex; flex-direction: column; gap: 20px; align-items: flex-end; }
.section_appartment .cols .col2 .shadowpad{ display: flex; flex-direction: column; gap: 30px; }
.section_appartment .cols .col2 li{ list-style:disc; }
.section_appartment .gallery .invisible{ display: none; }

/* section_domaine */
.section_domaine{ padding-top: 160px; padding-bottom: 80px;  background: url(../images/domaine_bg.jpg);  background-size: cover; display: flex; justify-content: center; }
.section_domaine .cols{ display: flex; gap: 40px; }
.section_domaine .cols .col1{ width: 50%; display: flex; flex-direction: column; gap: 1rem; }
.section_domaine .cols .col2{  width: 50%; display: flex; flex-direction: column; gap: 20px; align-items: flex-end; }


/* section_station */

.section_station{ padding-top: 160px;   display: flex; justify-content: center; }
.section_station .cols{ display: flex; gap: 60px; }
.section_station .cols .col1{ width: 55%; display: flex; flex-direction: column; gap: 1rem; }
.section_station .cols .col2{ border-radius: 20px; overflow: hidden;  width: 45%; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.section_station .cols .col2 img{ aspect-ratio: 1; object-fit: cover; }
.section_station .cols .col2 .ligne2{ display: flex; gap: 8px; }
.section_station .cols .col2 .ligne2 img{ width: calc(50% - 4px); }


/* section_reservation */

.section_reservation{ padding-top: 160px; padding-bottom: 160px; }
.section_reservation .cols{ display: flex; gap: 60px; }
.section_reservation .cols .col1{ width: 65%; display: flex; flex-direction: column; gap: 1rem; }
.section_reservation .cols .col2{ border-radius: 20px;  width: 35%; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.section_reservation .cols .col2 ul{ display: flex; gap: 10px; flex-direction: column; }
.section_reservation .cols .col2 li{ list-style:disc; margin-left: 1rem; line-height: 1.2em; }
.section_reservation .cols .col2 .shadowpad{ display: flex; flex-direction: column; gap: 30px; }




/*


/^^^^^^^                                                                        
/^^    /^^                                                                      
/^^    /^^          /^^          /^^^^      /^ /^^        /^^^^      /^^     /^^
/^ /^^            /^   /^^      /^^         /^  /^^      /^^          /^^   /^^ 
/^^  /^^         /^^^^^ /^^       /^^^      /^   /^^       /^^^        /^^ /^^  
/^^    /^^       /^                 /^^     /^^ /^^          /^^        /^/^^   
/^^      /^^       /^^^^        /^^ /^^     /^^          /^^ /^^         /^^    
                                            /^^                                 


*/


/* Quand l’écran devient plus petit (tablettes) → 2 colonnes */
@media (max-width: 992px) {
  .txt_18 { font-size: 14px; }
  .txt_16 { font-size: 14px; }
  .txt_48{ font-size: 32px; }
  .txt_64{ font-size: 32px; }
  
  .nav_link{ display: none; }
  .nav_bar{ padding: 10px; }
  .nav_bar .nav_bt{ font-size: 12px; }
  .cols{ flex-direction: column!important  }
  .section_appartment .gallery{ flex-direction: column!important  }
  .col1{ width: 100%!important; }
  .col2{ width: 100%!important; }
  .hero{ aspect-ratio: 9/14; }
  .hero .wrapper{ left: 30px;  width: calc(100% - 60px); }
  .hero .pin{ display: none; }
  .hero .txt_64{ font-size: 28px; }
  .wrapper{ padding-left: 20px; padding-right: 20px; }
  .shadowpad{ width: 100%; }
  .section_domaine { padding-top: 80px; }
  .section_station{ padding-top: 80px; }
  .section_reservation{ padding-top: 80px; }
  .section_appartment .cols{ padding-bottom: 40px; }
  .section_appartment .cols .col2{ align-items: flex-start;  }
}