@charset "UTF-8";

@font-face {
    font-family: 'Didot';
    src: url('fonts/didot-webfont.woff2') format('woff2'),
         url('fonts/didot-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'helvetica_neue';
    src: url('fonts/helveticaneueltcom-lt-webfont.woff2') format('woff2'),
         url('fonts/helveticaneueltcom-lt-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html,body {
	font-family: "Helvetica Neue",'helvetica_neue';
	font-size:21px;
	font-weight:300;
	margin:0;
	padding:0;
	color:#052934;
	background:#fff ;
	overflow-x: hidden;
	scroll-padding: 90px;
	-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;
}
body{padding-top: 124px;}

::selection {background: #ccc;color:#000;}
::-moz-selection {background: #ccc;color:#000;}

.imgLeft{float: left;margin:0 30px 30px 0;}
.clear{clear: both;}

.embed-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;height:auto}
.embed-container iframe,.embed-container object,.embed-container embed,.embed-container video{position:absolute;top:0;left:0;width:100%;height:100%;border:none;}

.mobileOnly{display: none;}
.mobileOff{display: block;}

/**** GLOBAL ****/
img{max-width: 100%;}
a{color:#000;text-decoration: none;}
a:hover{text-decoration: none;color:#000;}
a:focus{border: none;text-decoration: none;}
a.underline{text-decoration: underline;}

a.link {position: relative;display: inline-block;padding: 16px 8px;text-transform: uppercase;font-size: 15px;color: #000;text-decoration: none;}
a.link::after {content: "";position: absolute;left: 0;bottom: 0;width: 100%;height: 1px;background: #000;transform-origin: left; transition: transform 0.4s ease;transform: scaleX(1);}
a.link:hover::after {transform: scaleX(0);}


p{text-align:left;padding-bottom: 15px;font-size:21px;font-style: normal;font-weight: 200;line-height:32px; }

p.fw200{font-weight:200;}

h1{color: #000;font-family: Didot;font-size: 96px;font-style: normal;font-weight: 400;line-height: 100%;letter-spacing: -1.92px;}
h2{color: #000;font-family: Didot;font-size: 80px;font-style: normal;font-weight: 400;line-height: 100%;letter-spacing: -1.6px;}

.pt64{padding-top: 64px;}

.accordion_titre {padding:16px 36px 16px 16px;cursor:pointer;position:relative;background:#fff url("../images/accordion-plus.png") center right 20px no-repeat;margin:0; border-radius: 16px; margin-top: 24px;font-size:24px;font-weight: 600;}
.accordion_active {background:#fff url(../images/accordion-moins.png) center right 20px no-repeat;border-radius: 16px 16px 0 0;}
.accordion_texte {clear:both;display:none;padding:16px;background: #fff;border-radius: 0 0 16px 16px;}


.btn1 {position: relative;display: inline-flex;align-items: center;gap: 8px;padding: 10px 10px;border-bottom: 1px solid #000;color: #000;text-decoration: none;overflow: hidden;transition: color 0.3s ease;text-transform: uppercase;font-size: 15px;z-index: 2;}
.btn1::before {content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 0%;background: #000;z-index: 0;transition: height 0.4s ease;}
.btn1:hover::before {height: 100%;z-index: 0;}
.btn1:hover{color:#fff;}
.btn1 img {width: 18px;transition: filter 0.3s ease;z-index: 2;}
.btn1 span {z-index: 2;}
.btn1 span svg {stroke: #000;}
.btn1:hover img {filter: invert(1);}
.btn1:hover span svg {stroke: #fff;}


.img-zoom {overflow: hidden; display: inline-block; }
.img-zoom img {display: block;width: 100%;height: auto;transition: transform 0.8s ease;}
.img-zoom:hover img {transform: scale(1.05); }

.lien_collection {display: block;text-decoration: none;color: inherit;}
.lien_collection .img-zoom {overflow: hidden;display: block;}
.lien_collection .img-zoom img {display: block;width: 100%;height: auto;transition: transform 0.8s ease;}
.lien_collection:hover .img-zoom img {transform: scale(1.05);}
.lien_collection:hover .btn1::before {height: 100%;}
.lien_collection:hover .btn1 {color: #fff;}
.lien_collection:hover .btn1 img {filter: invert(1);}

#hero-section .btn1{border-bottom: 1px solid #fff;color: #fff;}
#hero-section .btn1::before {background: #fff;}
#hero-section .btn1:hover{color:#000;}


.titre{font-family: Didot;font-size:42px;font-style: normal;font-weight: 400;line-height: 127%;}
.titre2{font-family: Didot;font-size:34px;font-style: normal;font-weight: 400;line-height: 127%;}

header{background: rgba(255, 255, 255, 0.12);padding:40px 0;position: fixed;width: 100%;top:0;height: 124px;backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px);z-index: 99;}
header::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 1px;background: linear-gradient(90deg,transparent,rgba(255, 255, 255, 0.8),transparent);}
header::after {content: '';position: absolute;top: 0;left: 0;width: 1px;height: 100%;background: linear-gradient(180deg,rgba(255, 255, 255, 0.8),transparent,rgba(255, 255, 255, 0.3));}

#logo {transition: filter 0s ease, opacity 0s ease;max-height: 60px;}

.lang-menu {position: relative;display: inline-block;}
.lang-toggle {background: none;border: none;font-size: 15px;font-weight: 400;display: flex;align-items: center;gap: 6px;cursor: pointer;padding-bottom: 4px;border-bottom: 1px solid #000;transition: color 0.3s ease;margin-top:15px;}
.lang-toggle:hover {color: #666;}
.lang-menu.open .lang-toggle svg {transform: rotate(180deg);transition: transform 0.3s ease;}
.lang-dropdown {position: absolute;top: 100%;left: 0;background: #fff;border: 1px solid #ddd;border-radius: 4px;margin-top: 6px;list-style: none;padding: 5px 0;min-width: 80px;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);display: none;font-size:15px;}
.lang-dropdown li {text-align: center;}
.lang-dropdown a {display: block;padding: 6px 10px;text-decoration: none;color: #000;transition: background 0.2s ease;}
.lang-dropdown a:hover {background: #f3f3f3;}
.lang-menu.open .lang-dropdown {display: block;}

.menu {background-color: transparent;border: none;cursor: pointer;}
.line {fill: none;stroke: black;stroke-width:2;transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);}
.line1 {stroke-dasharray: 60 207;stroke-width:4;}
.line2 {stroke-dasharray: 40 60;stroke-width: 4;}
.line3 {stroke-dasharray: 60 207;stroke-width: 4;}
.opened .line1 {stroke-dasharray: 60 207;stroke-dashoffset: -150;stroke-width: 4;}
.opened .line2 {stroke-dasharray: 1 60;stroke-dashoffset: -30;stroke-width: 4;}
.opened .line3 {stroke-dasharray: 60 207;stroke-dashoffset: -150;stroke-width: 4;}


nav{display: none;position: fixed;width: 100%;top:124px;z-index: 98;background: rgba(255, 255, 255, 1);backdrop-filter: blur(4px);}
nav::before {content: "";position: absolute;top: 0;left: 0;height: 1px;width: 0;background: #000;transition: width 0.9s ease;}
nav.active::before {width: 100%;}

nav ul{margin:0;padding: 0;list-style-type: none;}
nav ul li{padding: 0 0 10px 0;}
nav ul li a{color:#000;font-family: Didot;font-size: 32px;font-style: normal;font-weight: 400;line-height: 130%;}
nav ul li a{position: relative;display: inline-block;color: #000;text-decoration: none;overflow: hidden;}
nav ul li a::after {content: "";position: absolute;left: 0;bottom: 0;width: 100%;height:1px; background: #000;transform: scaleX(0);transform-origin: left;transition: transform 0.4s ease;}
nav ul li a:hover::after {transform: scaleX(1);}

.nav_rub{height: 50px;}
.nav_rub span{border-radius: 4px;background: #000;padding: 8px;justify-content: center;align-items: center;gap: 8px;color: #FFF;font-size: 15px;font-style: normal;font-weight: 400;line-height: 100%;}
.nav_rub a{color:#fff;}

header.black{background: #000;}
header.black img{ filter: invert(1);}
header.black .line {stroke: white;}
header.black .lang-toggle {border-bottom: 1px solid #fff;color:#fff;}


@media (min-width:70px) {  /*700px*/
	header.white img{ filter: invert(1);}
	header.white .line {stroke: white;}
	header.white .lang-toggle {border-bottom: 1px solid #fff;color:#fff;}
}


footer{padding:64px 0;border-top: 1px solid rgba(255, 255, 255, 0.64);border-bottom: 1px solid rgba(255, 255, 255, 0.64);background: #000;color:#fff;font-size: 19px;}
footer a{color:#fff;}
footer a:hover{color:#fff;text-decoration: underline;}
footer .mentions{font-size: 16px;padding-top:92px;}

#goTop{position:fixed;bottom:5%;right:10px;transform: rotate(-90deg);padding:50px 55px;flex-direction: column;border-radius: 1000px;background: rgba(255, 255, 255, 0.23);backdrop-filter: blur(4px);}
#goTop img{width: 20px;height: 20px;}

section{padding: 124px 0;}

section.black{background: #000;color: #fff;}
section.black a{color:#fff;}
section.black a.link{color:#fff;}
section.black a.link::after {background: #fff;}

section.black h1{color: #fff;}


.matieres{display: flex;width: 100%;padding: 64px 0;}
.matieres img {width: 20%; height: auto;object-fit: cover; }


.slide {position: relative;color: #fff;background: #000;overflow: hidden;z-index: 1;padding:250px 0;}
.slide .bg-slide {position: absolute;inset: 0;background-size: cover;background-position: center;opacity: 0;transition: opacity 2s ease;z-index: 0;}
.slide .bg-slide.active {opacity: 1;}
.slide::before {content: "";position: absolute;inset: 0;background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) 80.75%);z-index: 1;}
.slide .container {position: relative;z-index: 2;}


/* SLIDER HOME */
.slider-collections {padding:20px 0 0 0;  margin-right: calc(-1.3 * (100vw - 100%)/2);}

.prop-card {padding: 0 160px 0 0; }
.prop-media {position: relative;display: block;overflow: hidden;}
.prop-media img{width:100%;height:700px;object-fit: cover;transition:transform 0.6s ease;}
.prop-media:hover img{ transform: scale(1.05); }

.prop-badges{position:absolute;left:10px; bottom:10px;display:flex; gap:6px; flex-wrap:wrap;}
.badge-dark{display:inline-block;font-size:15px; line-height:100%;color:#fff; background:#000;border-radius:4px;padding:8px;}
.badge-white{display:inline-block;font-size:15px; line-height:100%;color:#000; background:#fff;border-radius:4px;padding:8px;}
.badge-gris{display:inline-block;font-size:15px; line-height:100%;color:#fff; background: rgba(0, 0, 0, 0.60);;border-radius:4px;padding:8px;}

.prop-info{ padding: 14px 14px 0 0; }
.prop-title{font-size:34px;line-height:130%; margin: 8px 0 4px;color:#fff;font-family: Didot;}
.prop-city{ color:#cfcfcf; font-size: 17px; }

.prop-title.black{color:#000;}

.collection-dots{ text-align:center; margin:64px 0 0 0; }
.collection-dots .slick-dots{display:inline-flex !important; gap:18px; align-items:center;}
.collection-dots .slick-dots li{ list-style:none; }
.collection-dots .slick-dots button{width:30px; height:2px; padding:0; border:0; background:#666; font-size:0;transition:background .25s ease, width .25s ease;}
.collection-dots .slick-dots .slick-active button{ background:#fff; width:40px; }

@media (max-width: 1199.98px){
.prop-media img{ height:600px; }
}
@media (max-width: 991.98px){
.prop-media img{ height:550px; }
}
@media (max-width: 767.98px){
.slider-collections {padding:20px 0 0 0;  margin-right: calc(-25 * (100vw - 100%)/2);}
.prop-card {padding: 0 60px 0 0; }
.prop-media img{ height:460px; }
}

.villas-slick{}
.villas-slick article{padding:0 20px 0 0;}


#villasmer_top{background: url(../images/mer/villa.webp);background-size: cover;background-position:center;padding:0;}
#villasmer_top .bg{background: linear-gradient(90deg, rgba(0, 0, 0, 0.63) 0%, rgba(0, 0, 0, 0.00) 61.53%);padding-top:450px;padding-bottom:56px;}
#villasmer_top h1{color:#fff;}


#domainemage_top{background: url(../images/montagne/domaine-mage/domaine.webp);background-size: cover;background-position:center;padding:0;}
#domainemage_top .bg{background: linear-gradient(90deg, rgba(0, 0, 0, 0.63) 0%, rgba(0, 0, 0, 0.00) 61.53%);padding-top:450px;padding-bottom:56px;}
#domainemage_top h1{color:#fff;}

/******** FORM *********/
.form input, .form select{padding: 16px 0;margin-bottom:20px;border:none;border-bottom:1px solid #fff;background-color:#000;color: #fff;width: 100%;height:50px;font-size:17px;font-family: "Helvetica Neue",'helvetica_neue';font-style: normal;font-weight:400;line-height: 28px; -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.form input::placeholder, .form textarea::placeholder {font-family: "Helvetica Neue",'helvetica_neue';font-size:17px;font-style: normal;font-weight:400;line-height: 28px;}
.form{margin:20px auto;padding:0 20px;}
.form p{clear: both;padding: 24px 0;}
.form textarea{padding:10px 0;border : none;border-bottom:1px solid #fff;background-color:#000;color:#fff;width: 100%;height:160px;font-style:italic;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-size:17px;font-family: "Helvetica Neue",'helvetica_neue';font-style: normal;font-weight:400;line-height: 28px;}
.form select{height: 80px;}
.form button{background: #fff;color:#000;text-transform: uppercase;font-size:14px;border-radius: 0;padding: 16px 56px;}
.form button:hover{color:#fff;background: #000;border-bottom:1px solid #fff;}
.form button span{float:left;margin-top:-12px;margin-right: 10px;font-size:22px;font-weight: bold;}

.form .mentions{font-style: italic;text-align: left;font-size:12px;line-height: 16px;padding-top: 32px;}
.sendmessage{font-size: 24px; line-height: 1.5; text-align: center;}


.montagne article{width:33%;float: left;marbin-bottom:40px;padding: 0 40px 40px 0;}
.montagne .prop-title{color:#000;}
.montagne .prop-city{ color:#000;}



@media (max-width:1000px) {
	
	.montagne article{width:50%;}
}

@media (max-width:700px) {
	section{padding:80px 0;}

	.mobileOnly{display: block;}
	.mobileOff{display: none;}
	/* header{background: rgba(255, 255, 255, 0.9);} */

	header{padding:25px 0;height: 104px;}
	body{padding-top: 104px;}
	#logo {max-height:45px;}
	nav{top:104px;}



	nav ul li a{font-size:24px;}
	nav ul li{padding: 0 0 0px 0;}

	.menu{margin-left: -15px;}

	html,body {font-size:19px;}
	h1{font-size:48px;}
	h2{font-size:40px;}
	.titre{font-size:30px;}
	.titre2{font-size:26px;}

	#goTop{padding:20px 23px;}

	.villas-slick article img{height:300px;}

	.slide {padding:160px 0;}
	.slide::before {background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 80.75%);}
	.slide br{display: none;}


	.collection-dots .slick-dots{gap:8px;}
	.collection-dots .slick-dots button{width:20px;}
	.collection-dots .slick-dots .slick-active button{ width:30px; }

	.montagne article{width:100%;}
}