@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Montserrat:wght@300;400;500;600&family=Amatic+SC:wght@400;700&family=Great+Vibes&display=swap');

:root {
	/* Palette moderne nature - inspirée Vosges */
	--color-primary: #1B4332;       /* Vert forêt profond */
	--color-primary-light: #2D6A4F; /* Vert mousse */
	--color-primary-lighter: #40916C; /* Vert prairie */
	--color-secondary: #774936;     /* Brun noble */
	--color-accent: #BC6C25;        /* Cuivre automnal */
	--color-gold: #DDA15E;          /* Miel doré */
	--color-cream: #FEFAE0;         /* Crème doux */
	--color-beige: #E6DEC4;         /* Beige marqué - demande cliente */
	--color-beige-light: #F0EBE0;   /* Beige clair */
	--color-dark: #171717;          /* Noir profond - demande cliente */
	--color-gray-dark: #171717;     /* Gris foncé - demande cliente */
	--color-gray: #232323;          /* Gris */
	--color-text: #2D2D2D;          /* Texte principal */
	--color-text-light: #5C5C5C;    /* Texte secondaire */
	--color-white: #FFFFFF;
	--color-border: #E8E2D9;        /* Bordures subtiles */

	/* Typographies modernes */
	--font-heading: 'Cormorant Garamond', Georgia, serif;
	--font-display: 'Amatic SC', cursive;
	--font-script: 'Great Vibes', cursive;  /* Police cursive élégante - demande cliente */
	--font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

	/* Espacements généreux */
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 2rem;
	--spacing-lg: 4rem;
	--spacing-xl: 6rem;
	--spacing-xxl: 8rem;

	/* Transitions fluides */
	--transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-medium: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

	/* Ombres modernes */
	--shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
	--shadow-md: 0 4px 20px rgba(0,0,0,0.08);
	--shadow-lg: 0 10px 40px rgba(0,0,0,0.12);
	--shadow-xl: 0 20px 60px rgba(0,0,0,0.15);
}

body, html {
	height: 100%;
	margin: 0;
	padding: 0;
}
body {
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 400;
	color: var(--color-text);
	line-height: 1.8;
	background-color: var(--color-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ========================================
   TOP BAR - Barre d'information supérieure
   ======================================== */
.top-bar {
	background: var(--color-primary);
	color: var(--color-white);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.02em;
}

.top-bar-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0.625rem 2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.top-bar-left {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.top-bar-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	opacity: 0.9;
}

.top-bar-item svg {
	opacity: 0.7;
	flex-shrink: 0;
}

.top-bar-item a {
	color: var(--color-white);
	text-decoration: none;
	transition: opacity var(--transition-fast);
}

.top-bar-item a:hover {
	opacity: 1;
	text-decoration: underline;
}

.top-bar-right {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.top-bar-link {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--color-white);
	text-decoration: none;
	opacity: 0.9;
	transition: opacity var(--transition-fast);
	padding: 0.375rem 0.75rem;
	border-radius: 3px;
}

.top-bar-link svg {
	opacity: 0.7;
}

.top-bar-link:hover {
	opacity: 1;
}

.top-bar-cta {
	background: rgba(255, 255, 255, 0.15);
	font-weight: 500;
	opacity: 1;
}

.top-bar-cta:hover {
	background: rgba(255, 255, 255, 0.25);
}

/* Top bar responsive */
@media (max-width: 768px) {
	.top-bar-container {
		padding: 0.5rem 1rem;
		flex-direction: column;
		gap: 0.5rem;
	}

	.top-bar-left {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.75rem 1.25rem;
	}

	.top-bar-right {
		gap: 0.75rem;
	}

	.top-bar-item {
		font-size: 0.75rem;
	}
}

@media (max-width: 480px) {
	.top-bar-left {
		flex-direction: column;
		gap: 0.25rem;
	}
}


@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider .figureindep img { width: 20%; float: left; }
div#slider .figureindep { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}







/* Hero section moderne */
.containerdecaltop {
	position: relative;
	top: -100px;
	margin-bottom: -100px;
}
.containerdecaltop.fdblanc {
	background: var(--color-white);
	box-shadow: var(--shadow-lg);
	border-radius: 0;
}
.containerdecaltop .pad1em {
	padding: var(--spacing-lg);
}
.containerdecaltop h1 {
	text-align: center;
}
.containerdecaltop h1 br {
	display: block;
	content: '';
	margin-top: var(--spacing-xs);
}
.containerdecaltop p {
	max-width: 800px;
	margin: 0 auto var(--spacing-md);
	text-align: center;
	color: var(--color-text-light);
	font-size: 1.1rem;
}
.remarque { display:none; }

	.area {
  text-align: center;
  font-size: 2.5em;
  color: #fff;
  letter-spacing: -2px;
  font-weight: 300;
  text-transform: uppercase;
  text-shadow: 0px 0px 3px #fff, 0px 0px 3px #fff;
}



.resp-container { 
  position: relative; 
  overflow: hidden; 
  padding-top: 56.25%; 
}

.resp-iframe { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  border: 0; 
}


.meteo { width:50%; margin:20px auto}
.bloc { display:block; padding:10px; width:500px; margin:auto;}
#infowebcopy {
    padding:0px 10px 0px 10px;
    font-size: 12px;
    line-height: 30px;
    font-weight: bold;
    color: #FFFFFF;
    background: #000000;
	color:#FFFFFF;
    text-align: center;
}

.arondibasdroite {-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;}
#modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vw;
    background-color:rgba(161, 168, 127, 1);
    color: #333333;
    padding: 25px;
    max-width: 100%;
    height: 24vh;
    min-height: 300px;
    max-height: 100%;
    z-index: 1010;
}
#modal h1 { color:#FFFFFF;}

#modal i {
    display: block;
    text-align: right;
    font-size: 2em;
}


#mclose {
    display: none;
}

#mclose:checked + #modal {
    display: none !important;
}

table.tableaurcd {
	border: 0px solid #1C6EA4;
	background-color: #EAEAEA; color:#666666 !important;
	width: 100%;
	text-align: left;
	margin-bottom:30px;
}

table.tableaurcd td,
table.tableaurcd th {
	border: 0px solid #666666;
	padding: 10px 9px;
}

table.tableaurcd tbody td {}

table.tableaurcd tr:nth-child(even) {
	background: #CCCCCC;
}

table.tableaurcd thead {
	background: #666666;  color: #FFFFFF !important;
}

table.tableaurcd thead th {
	font-weight: bold;
}

table.tableaurcd tfoot td {}

table.tableaurcd tfoot .links {
	text-align: right;
}

table.tableaurcd tfoot .links a {
	display: inline-block;
	background: #1C6EA4;
	color: #FFFFFF;
	padding: 2px 8px;
	border-radius: 5px;
}



.loader {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 999999;
	background: url(/images/loader.png) 50% 50% no-repeat rgba(111, 99, 87, .9)
}
.aligntxtimg {
	vertical-align: top
}
.pad1em {
	padding: 1em
}
.pad05em {
	padding: 0.5em
}

.listepuce1 { margin-left:1em; margin-bottom:1em;}


/* Boutons modernes */
a.savplus {
	display: inline-block;
	padding: 14px 32px;
	background: transparent;
	color: var(--color-primary);
	text-decoration: none;
	border: 2px solid var(--color-primary);
	border-radius: 0;
	font-family: var(--font-body);
	font-weight: 500;
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	transition: all var(--transition-medium);
	position: relative;
	margin-top: var(--spacing-md);
}
a.savplus:hover {
	background: var(--color-primary);
	color: var(--color-white);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

a.reserver,
.btn-primary {
	display: inline-block;
	border: none;
	padding: 18px 40px;
	margin: var(--spacing-sm) 0;
	background: var(--color-primary);
	color: var(--color-white);
	text-decoration: none;
	border-radius: 0;
	font-family: var(--font-body);
	font-weight: 500;
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	transition: all var(--transition-medium);
	cursor: pointer;
}
a.reserver:hover,
.btn-primary:hover {
	background: var(--color-accent);
	color: var(--color-white);
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
}

/* Bouton secondaire */
.btn-secondary {
	display: inline-block;
	padding: 16px 36px;
	background: transparent;
	color: var(--color-white);
	text-decoration: none;
	border: 2px solid var(--color-white);
	font-family: var(--font-body);
	font-weight: 500;
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	transition: all var(--transition-medium);
}
.btn-secondary:hover {
	background: var(--color-white);
	color: var(--color-primary);
}
b, strong {
	font-weight: 700
}
hr {
	border: none;
	border-top: 3px double #eaeaea;
	color: #eaeaea;
	overflow: visible;
	text-align: center;
	height: 5px;
	margin-bottom: 30px
}
hr:after {
	background: #fff;
	padding: 0 4px;
	position: relative;
	top: -13px
}
.fdbrunacc {
	background: var(--color-beige);
	position: relative;
	padding: var(--spacing-xl) 0;
}
.fdbruntop {
	background: var(--color-secondary);
	color: var(--color-cream);
	padding: var(--spacing-lg) 0;
}
.fdbrunres {
	background: var(--color-dark);
	color: var(--color-cream);
	padding: var(--spacing-xl) 0;
}
.fdbrunres h2 {
	color: var(--color-cream);
}
.fdbrunres a{ color: var(--color-white); transition: color var(--transition-fast); }
.fdbrunres a:hover{ color: var(--color-gold); }

.containertop {
	position: relative;
	margin: 0 auto;
	width: 1290px;
	padding: 5px 0;
	text-align: right;
	color: #fff
}
.container {
	position: relative;
	padding: 0;
	padding: 0;
	max-width: 1290px;
	margin: 0 auto
}
.container h1 {
	font-family: var(--font-heading);
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 600;
	margin: 0;
	padding: 0 0 var(--spacing-md) 0;
	color: var(--color-primary);
	letter-spacing: 0.02em;
	line-height: 1.2;
}
.container h1 span {
	display: block;
	font-family: var(--font-display);
	font-size: 0.6em;
	color: var(--color-accent);
	margin-top: var(--spacing-xs);
}
.container h2 {
	font-family: var(--font-heading);
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	margin: 0;
	padding: 0 0 var(--spacing-sm) 0;
	font-weight: 500;
	color: var(--color-primary);
	letter-spacing: 0.01em;
	line-height: 1.3;
}
.containerfoot h2 {
	font-family: var(--font-heading);
	font-size: 2rem;
	margin: 0;
	padding: 0 0 var(--spacing-sm) 0;
	font-weight: 500;
	color: var(--color-cream);
}
.container h3 {
	font-family: var(--font-heading);
	font-size: 1.6rem;
	text-align: left;
	margin: 0;
	padding: 0 0 var(--spacing-sm) 0;
	font-weight: 500;
	color: var(--color-primary);
}
/* Barre verticale supprimée - design obsolète */
.vertical-label {
	display: none !important;
}
.colcont {
	margin: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap
}
.col {
	margin: 1em;
	flex: 1;
	position: relative;
	padding-bottom: 30px
}
.col2 {
	margin: 1em;
	position: relative;
	padding-bottom: 30px;
	width: calc(100% * 1 / 2 - 2em);
}
.col2 img{ width:100%; height:350px;}

.col3 {
	margin: 1em;
	position: relative;
	padding-bottom: 30px;
	width: calc(100% * 1 / 3 - 2em);
}
.photocol {flex: 1;     width: 100%; height:250px;
    overflow: hidden;}

ul {
	list-style: circle;
	list-style-position: inherit;
}



.logocdr {
	position: absolute;
	left: -100px;
	left: 50%;
	display: block;
	z-index: 9999;
	transform: translate(-50%, -50%)
}
#sidebar {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	background: 0 0;
	animation: transition 5s ease-in-out 0s, opacity 1s ease-in-out 2s;
	overflow: hidden
}
#sidebar2 {
	width: 100%;
	height: 50%;
	margin: 0 auto;
	background: 0 0;
	animation: transition 5s ease-in-out 0s, opacity 1s ease-in-out 2s;
	overflow: visible
}
#settings {
	padding: 0;
	text-align: center
}
a {
	text-decoration: none;
	font-weight: 400;
	color: #c00
}
a:hover {
	color: #f60;
	-webkit-transition: color .2s ease;
	-moz-transition: color .2s ease;
	-ms-transition: color .2s ease;
	-o-transition: color .2s ease;
	transition: color .2s ease
}
p {
	margin: 0 0 15px 0;
	padding: 0
}
.fdactu {
	background-color: var(--color-primary-light);
	color: var(--color-white);
}
.fdpromo {
	background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-secondary) 100%);
	color: var(--color-white);
	padding: 15px 0;
}
.fdpromo a { color: var(--color-white); text-decoration: underline; }
.fdpromo a:hover { color: var(--color-cream); }
.fdpromo strong { color: var(--color-white); }
.fdblanc {
	background-color: var(--color-white);
	color: var(--color-text);
}
a {
	color: var(--color-primary);
	transition: color var(--transition-fast);
}

/* Cartes de logement modernes */
.col.fdblanc.arondibasdroite {
	background: var(--color-white);
	box-shadow: var(--shadow-sm);
	transition: all var(--transition-slow);
	overflow: hidden;
	border-radius: 0;
	border-bottom-right-radius: 0;
	position: relative;
}
.col.fdblanc.arondibasdroite::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: var(--color-primary);
	transform: scaleX(0);
	transition: transform var(--transition-medium);
}
.col.fdblanc.arondibasdroite:hover {
	transform: translateY(-12px);
	box-shadow: var(--shadow-xl);
}
.col.fdblanc.arondibasdroite:hover::before {
	transform: scaleX(1);
}
.col.fdblanc.arondibasdroite img {
	transition: transform var(--transition-slow);
	width: 100%;
	height: 250px;
	object-fit: cover;
}
.col.fdblanc.arondibasdroite:hover img {
	transform: scale(1.08);
}
.col.fdblanc.arondibasdroite .pad1em {
	padding: var(--spacing-md);
}
.col.fdblanc.arondibasdroite h2 {
	font-size: 1.6rem;
	margin-bottom: var(--spacing-xs);
}
.col.fdblanc.arondibasdroite p {
	color: var(--color-text-light);
	font-size: 0.95rem;
	line-height: 1.7;
}
.haut100prct {
	height: 100%
}
.lrg100prct {
	width: 100%
}
.lrg50prct {
	width: 50%
}
.lrg70prct {
	width: 70%
}
.lrg30prct {
	width: 30%
}
/* Ancien logo - masqué */
.logoheader {
	display: none;
}

/* Nouveau logo cerf SVG */
.logo-link {
	display: flex;
	align-items: center;
	text-decoration: none;
	padding: 0.25rem 0;
	margin-right: 1.5rem;
}

.logo-deer {
	width: 36px;
	height: 44px;
	color: var(--color-dark);
	transition: color var(--transition-fast);
}

.logo-link:hover .logo-deer {
	color: var(--color-primary);
}
/* Bouton retour en haut moderne */
#btn_up {
	display: none;
	position: fixed;
	right: 2rem;
	bottom: 2rem;
	width: 48px;
	height: 48px;
	background: var(--color-primary);
	color: #fff;
	border-radius: 50%;
	cursor: pointer;
	z-index: 1000;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-lg);
	transition: all var(--transition-fast);
	text-decoration: none;
}

#btn_up:hover {
	background: var(--color-primary-light);
	transform: translateY(-3px);
	box-shadow: var(--shadow-xl);
}

#btn_up svg {
	display: block;
}

#btn_up.visible {
	display: flex;
}
.fdlogo {
	width: 100%;
	background: url(../images/fond-logo.jpg) center no-repeat
}
.fdlocalisation {
	background: url(../images/fond-localisation.png) left no-repeat
}
/* Navbar moderne et épurée */
#navigationfond {
	z-index: 99999;
	width: 100%;
	margin: 0;
	padding: 0;
	background: var(--color-white);
	border-bottom: 1px solid var(--color-border);
	box-shadow: none;
}
#navigationlarg {
	position: relative;
	margin: 0 auto;
	max-width: 1290px;
}
#navigation {
	z-index: 9999;
	position: relative;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 2rem;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.toggleMenu {
	display: none;
	width: 100%;
	padding: 0;
	color: #fff
}
.menacc {
	display: none
}
.nav {
	padding: 0;
	list-style: none;
	*zoom: 1;
	margin-left: 0;
	font-size: 1em;
	font-weight: normal;
	display: flex;
	align-items: center;
}
.nav:before, .nav:after {
	content: " ";
	display: table;
}
.nav:after {
	clear: both;
}
.nav ul {
	list-style: none;
	width: 13em;
}
.nav a {
	padding: 24px 18px;
	text-decoration: none;
	color: var(--color-text);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: color var(--transition-fast);
}
.nav li {
	position: relative;
}
.nav>li {
	float: left;
}
.nav>li>a {
	display: block;
}
.nav>li>a:hover {
	color: var(--color-primary);
}
#en-cours a {
	color: var(--color-primary) !important;
	position: relative;
}
#en-cours a::after {
	content: '';
	position: absolute;
	bottom: 20px;
	left: 18px;
	right: 18px;
	height: 2px;
	background: var(--color-primary);
}
/* Bouton Gîte SPA mis en avant */
.formule a {
	background: var(--color-primary) !important;
	color: var(--color-white) !important;
	padding: 24px 24px !important;
}
.formule a:hover {
	background: var(--color-accent) !important;
	color: var(--color-white) !important;
}
.nav li ul {
	visibility: hidden;
	position: absolute;
	left: 0;
	margin: 0;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
.nav>li.hover>ul {
	visibility: visible;
	left: 0;
	margin: 0;
	background-color: var(--color-white);
	border-top: none;
	box-shadow: var(--shadow-lg);
}
.nav li li.hover ul {
	top: 10px;
	left: 100%;
}
.nav li li a {
	display: block;
	z-index: 9999;
	position: relative;
	padding: 14px 20px;
	text-align: left;
	color: var(--color-text);
	background: var(--color-white);
	font-size: 0.75rem;
	border-bottom: 1px solid var(--color-border);
	text-transform: none;
	letter-spacing: 0.02em;
	font-weight: 400;
}
.nav li li a:hover {
	background-color: var(--color-beige);
	color: var(--color-primary);
	padding-left: 24px;
	transition: all var(--transition-fast);
}
.nav ul {
	list-style: none;
	list-style-position: outside;
}
.nav li::before {
	content: "";
	color: #96BB66;
	background: #33CC33;
	display: none;
	width: 0;
	margin-left: 0em;
}
.lrg100prct {
	position: relative;
	width: 100%;
	margin: 0 auto
}
#lrg100prctfooter {
	width: 100%;
	margin: 0 auto;
	font-size: 0.9rem;
	font-weight: 400;
	background: var(--color-dark);
	padding: var(--spacing-lg) var(--spacing-md);
	color: rgba(255,255,255,0.7);
	text-align: center;
	position: relative;
}
#lrg100prctfooter strong {
	color: var(--color-white);
	font-weight: 500;
	font-size: 1rem;
	display: block;
	margin-bottom: var(--spacing-sm);
}
#lrg100prctfooter a {
	font-weight: 400;
	color: rgba(255,255,255,0.8);
	transition: color var(--transition-fast);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
#lrg100prctfooter a:hover {
	color: var(--color-gold);
	border-bottom-color: var(--color-gold);
}
#lrg100prctfooter p {
	margin: 0;
	padding: 4px 0;
	line-height: 1.8;
}
.containerfoot {
	max-width: 1290px;
	margin: 0 auto;
	padding: 15px 0;
	position: relative
}
.clvert {color: var(--color-primary) !important;}
.fdvert {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
	color: var(--color-white);
	padding: var(--spacing-xl) 0;
}
.fdvert h2 {
	color: var(--color-white);
	position: relative;
	display: inline-block;
}
.fdvert h2::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 0;
	width: 60px;
	height: 3px;
	background: var(--color-gold);
}
.fdvert p {
	color: rgba(255,255,255,0.9);
	font-size: 1.05rem;
}
.fdvert a {
	color: var(--color-gold);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: all var(--transition-fast);
}
.fdvert a:hover {
	color: var(--color-white);
	border-bottom-color: var(--color-white);
}
.fdblanc {
	background: #fff;
	color: #333
}
.clear {
	clear: both
}
.aligndroite {
	text-align: right
}
.aligncentre {
	text-align: center!important
}
.pad10px {
	padding: 10px
}
.pad20px {
	padding: 20px
}
.pad30px {
	padding: 30px
}
.padhb4em {
	padding: 4em 0
}
.padhb50px {
	padding: 50px 0
}
* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0
}
.floright {
	float: right
}





























		@media screen and (max-width:800px) {
		.meteo { width:100%; margin:auto}

	.bloc { display:block; padding:10px; width: auto; margin:auto;}

			.container h1 {
				font-family: var(--font-heading);
				font-size: 2.5em;
				font-weight: 700;
				margin: 0;
				padding: 0 0 0.8em 0;
				color: var(--color-primary);
			}
			
			.vertical-label {
				display: none;
			}
			.colcont {
				margin: 0;
				display: block;
				/*important*/
			}
			.col {
				display: block;
				clear: both;
			}
			
.col3 {
				display: block;
				clear: both; width:100%;
}
			
			
			.logoheader {
				display: none;
			}
			.resaheader {
				display: none;
			}
			a {
				text-decoration: none;
				font-weight: 400;
				color: #999999;
			}
			a:hover {
				color: #CCCCCC;
				-webkit-transition: color .2s ease;
				-moz-transition: color .2s ease;
				-ms-transition: color .2s ease;
				-o-transition: color .2s ease;
				transition: color .2s ease;
			}
			.minimob {
				display: block;
			}
			.masmob {
				display: none;
			}
			.menmobi {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
			}
			#home {
				width: 100%;
			}
			.toggleMenu {
				z-index: 9999999;
				float: left;
				position: relative;
			}
			#navigation {
				z-index: 1002;
				float: left;
				position: relative;
				width: 100%;
				margin: 0 auto;
				padding: 0;
				text-align: left;
				text-transform: uppercase;
			}
			#navigationfond {
				z-index: 1002;
				position: fixed;
				top: 0;
				width: 100%;
				padding: 0;
				text-align: left;
				background: var(--color-primary);
			}
			#navigationfond2 {
				display: none;
			}
			#navigationlarg {
				width: 100%;
				margin: 0 auto;
			}
			#logo {
				display: none;
			}
			.containerlogo {
				display: none;
			}
			.minilogo {
				display: none;
			}
			.maskmob {
				display: none;
			}
			.menacc {
				display: none;
			}
			.logo-link {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				margin: 0;
				padding: 0.5rem 0;
			}
			.logo-deer {
				width: 28px;
				height: 34px;
				color: var(--color-white);
			}
			.logo-link:hover .logo-deer {
				color: var(--color-cream);
			}
			.nav {
				margin-left: 0;
				flex-direction: column;
			}
			.nav>li {
				float: none;
			}
			.nav li li .parent {
				background-repeat: no-repeat;
			}
			.nav ul {
				display: block;
				width: 100%;
			}
			.nav>li.hover>ul,
			.nav li li.hover ul {
				position: static;
			}
			.nav>li>a {
				margin: 0 32px 0 52px;
				padding: 10px 0;
				border-bottom: 1px #FFFFFF solid;
				color: #FFFFFF;
			}
			.menacc {
				margin: 0 32px 0 52px;
				padding: 14px 0;
			}
			.nav a {
				padding: 0;
				color: #FFFFFF;
			}
			.nav li ul {
				background-color: rgb(62, 61, 64);
			}
			.nav li li a {
				display: block;
				z-index: 1002;
				position: relative;
				width: 100%;
				margin: 0 32px 0 52px;
				margin-top: 2px;
				text-align: left;
				color: #FFFFFF;
			}
			#lrg100prctfooter {
				width: 100%;
				margin: 0 auto;
			}
			.containerfoot {
				margin: 0 auto;
				padding: 15px 0;
				text-align: center;
				width: 100%;
			}
			.floright {
				float: none;
			}
			
.map-responsive {
overflow:hidden;
padding-bottom:56.25%;
position:relative;>
height:0;
}

.map-responsive iframe {
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}			
			
		}

		@media only screen and (max-width:700px) {
		.meteo { width:100%; margin:auto}
			.responsive {
				width: 49.99999%;
				margin: 6px 0;
			}
			.colcont {
				margin: 0;
				display: block;
				/*important*/
			}
			.col {
				display: block;
				clear: both;
			}
			.logoheader {
				display: none;
			}
		}
		@media only screen and (max-width:500px) {
		.meteo { width:100%; margin:auto}
			.colcont {
				margin: 0;
				display: block;
				/*important*/
			}
			.col {
				display: block;
				clear: both;
			}
			.responsive {
				width: 100%;
			}
			.logoheader {
				display: none;
			}
		}

/* ==========================================================================
   FOOTER MODERNE ET ÉLÉGANT
   ========================================================================== */

.site-footer {
	background: var(--color-dark);
	color: rgba(255,255,255,0.8);
}

.footer-main {
	padding: var(--spacing-lg) 0;
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1.5fr;
	gap: var(--spacing-md);
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--spacing-md);
}

.footer-col h3 {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	color: var(--color-white);
	margin-bottom: var(--spacing-sm);
	font-weight: 500;
}

.footer-col h4 {
	font-family: var(--font-body);
	font-size: 0.8rem;
	color: var(--color-white);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: var(--spacing-sm);
	font-weight: 600;
}

.footer-about p {
	font-size: 0.9rem;
	line-height: 1.7;
	color: rgba(255,255,255,0.7);
	margin-bottom: var(--spacing-sm);
}

.footer-social {
	display: flex;
	gap: var(--spacing-sm);
}

.footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: rgba(255,255,255,0.1);
	color: var(--color-white);
	border-radius: 50%;
	transition: all var(--transition-medium);
}

.footer-social a:hover {
	background: var(--color-gold);
	color: var(--color-dark);
	transform: translateY(-3px);
}

.footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-col ul li {
	margin-bottom: 12px;
}

.footer-col ul li a {
	color: rgba(255,255,255,0.7);
	text-decoration: none;
	font-size: 0.9rem;
	transition: all var(--transition-fast);
	display: inline-block;
}

.footer-col ul li a:hover {
	color: var(--color-gold);
	transform: translateX(5px);
}

.footer-contact p {
	font-size: 0.9rem;
	line-height: 1.7;
	margin-bottom: var(--spacing-sm);
	color: rgba(255,255,255,0.7);
}

.footer-contact strong {
	color: var(--color-white);
	font-weight: 500;
	display: block;
	margin-bottom: 4px;
}

.footer-contact a {
	color: rgba(255,255,255,0.7);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.footer-contact a:hover {
	color: var(--color-gold);
}

.footer-bottom {
	background: rgba(0,0,0,0.3);
	padding: var(--spacing-sm) 0;
	text-align: center;
}

.footer-bottom p {
	margin: 0;
	font-size: 0.8rem;
	color: rgba(255,255,255,0.5);
}

/* Footer responsive */
@media screen and (max-width: 900px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--spacing-lg);
	}
	.footer-about {
		grid-column: span 2;
	}
}

@media screen and (max-width: 600px) {
	.footer-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
	}
	.footer-about {
		grid-column: span 1;
	}
	.footer-main {
		padding: var(--spacing-lg) 0;
	}
}


/* ========================================
   NOUVELLE HOMEPAGE - Style Cabin Booking
   ======================================== */

/* Hero Section */
.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0,0,0,0.3) 0%,
		rgba(0,0,0,0.1) 40%,
		rgba(0,0,0,0.4) 100%
	);
	z-index: 1;
}

/* Hero Navigation */
.hero-nav {
	position: relative;
	z-index: 10;
	padding: 1.5rem 2rem;
}

.hero-nav-container {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.hero-logo {
	display: flex;
	align-items: center;
}

.hero-logo-icon {
	width: 40px;
	height: 48px;
	color: #fff;
	transition: transform var(--transition-fast);
}

.hero-logo:hover .hero-logo-icon {
	transform: scale(1.05);
}

.hero-nav-links {
	display: flex;
	list-style: none;
	gap: 2.5rem;
	margin: 0;
	padding: 0;
}

.hero-nav-links a {
	color: #fff;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	transition: opacity var(--transition-fast);
}

.hero-nav-links a:hover {
	opacity: 0.8;
}

.hero-nav-btn {
	background: var(--color-primary);
	color: #fff;
	padding: 0.75rem 1.5rem;
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	border-radius: 4px;
	transition: background var(--transition-fast);
}

.hero-nav-btn:hover {
	background: var(--color-primary-light);
}

.hero-nav-right {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* Menu hamburger mobile - caché par défaut, visible seulement en mobile */
.main-navbar .mobile-menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 44px;
	height: 44px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	z-index: 1001;
}

.mobile-menu-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: #fff;
	margin: 3px 0;
	transition: all 0.3s ease;
	border-radius: 2px;
}

.mobile-menu-toggle.active span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
	opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
	transform: rotate(-45deg) translate(6px, -6px);
}

/* Menu mobile overlay */
.mobile-menu {
	display: none;
	position: fixed;
	inset: 0;
	background: var(--color-primary);
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s ease;
}

.mobile-menu.active {
	opacity: 1;
	visibility: visible;
}

.mobile-menu-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	padding: 2rem;
	gap: 0.5rem;
}

.mobile-menu-content a {
	color: #fff;
	text-decoration: none;
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 400;
	padding: 0.75rem 1rem;
	opacity: 0.9;
	transition: opacity 0.2s ease;
}

.mobile-menu-content a:hover {
	opacity: 1;
}

.mobile-menu-close {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	background: none;
	border: none;
	color: #fff;
	font-size: 2.5rem;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.2s;
	line-height: 1;
}

.mobile-menu-close:hover {
	opacity: 1;
}

.mobile-menu-logo {
	margin-bottom: 2rem;
}

.mobile-menu-logo img {
	height: 120px;
	width: auto;
}

.mobile-lang-switcher {
	margin-top: 2rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.mobile-lang-switcher a {
	font-size: 1rem !important;
	padding: 0.5rem !important;
	opacity: 0.6;
}

.mobile-lang-switcher a.active {
	opacity: 1;
	font-weight: 600;
}

.mobile-lang-switcher span {
	color: #fff;
	opacity: 0.4;
}

.mobile-menu-cta {
	margin-top: 1rem;
	padding: 1rem 2.5rem !important;
	background: #fff !important;
	color: var(--color-primary) !important;
	border-radius: 6px;
	font-weight: 600 !important;
	font-size: 1rem !important;
}

body.menu-open {
	overflow: hidden;
}

/* Hero Content */
.hero-content {
	position: relative;
	z-index: 5;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 2rem;
	color: #fff;
}

.hero-location {
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-bottom: 1rem;
	opacity: 0.9;
}

.hero-title {
	font-family: var(--font-heading);
	font-size: clamp(3rem, 8vw, 5.5rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	margin: 0 0 0.5rem 0;
	line-height: 1.1;
	text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.hero-subtitle {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 400;
	font-style: italic;
	opacity: 0.9;
	margin-bottom: 3rem;
}

/* Hero Search Bar */
.hero-search {
	display: flex;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.hero-search-item {
	display: flex;
	flex-direction: column;
	padding: 1.25rem 2rem;
	text-decoration: none;
	color: var(--color-text);
	border-right: 1px solid var(--color-border);
	transition: background var(--transition-fast);
}

.hero-search-item:hover {
	background: var(--color-beige);
}

.hero-search-label {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-light);
	margin-bottom: 0.25rem;
}

.hero-search-value {
	font-family: var(--font-heading);
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--color-dark);
}

.hero-search-btn {
	display: flex;
	align-items: center;
	padding: 1.25rem 2.5rem;
	background: var(--color-primary);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	transition: background var(--transition-fast);
}

.hero-search-btn:hover {
	background: var(--color-primary-light);
}

/* Hero Scroll Indicator */
.hero-scroll {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
}

.hero-scroll span {
	display: block;
	width: 24px;
	height: 40px;
	border: 2px solid rgba(255,255,255,0.5);
	border-radius: 12px;
	position: relative;
}

.hero-scroll span::after {
	content: '';
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 8px;
	background: #fff;
	border-radius: 2px;
	animation: scrollDown 2s infinite;
}

@keyframes scrollDown {
	0%, 100% { opacity: 1; top: 8px; }
	50% { opacity: 0.3; top: 18px; }
}

/* About Section */
.about-section {
	padding: 8rem 2rem;
	background: #fff;
}

.about-container {
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 5rem;
	align-items: start;
}

.about-text h2 {
	font-family: var(--font-heading);
	font-size: 2.75rem;
	font-weight: 600;
	color: var(--color-dark);
	margin: 0 0 1.5rem 0;
}

.about-intro {
	font-family: var(--font-heading);
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--color-text);
	margin-bottom: 1.5rem;
}

.about-text p {
	color: var(--color-text-light);
	line-height: 1.9;
	margin-bottom: 1rem;
}

.btn-outline {
	display: inline-block;
	margin-top: 1.5rem;
	padding: 1rem 2rem;
	border: 2px solid var(--color-primary);
	color: var(--color-primary);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	border-radius: 4px;
	transition: all var(--transition-fast);
}

.btn-outline:hover {
	background: var(--color-primary);
	color: #fff;
}

/* About Gallery avec tiles qui swappent */
.about-gallery {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.about-gallery-main {
	width: 100%;
	height: 350px;
	border-radius: 8px;
	overflow: hidden;
}

.about-gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

.about-gallery-grid > img {
	width: 100%;
	height: 120px;
	object-fit: cover;
	border-radius: 6px;
	transition: transform 0.4s ease;
}

.about-gallery-grid > img:hover {
	transform: scale(1.05);
}

/* Tile swap animation */
.tile-swap {
	position: relative;
	width: 100%;
	height: 100%;
}

.tile-swap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.6s ease-in-out, transform 0.4s ease;
}

.tile-swap:hover img {
	transform: scale(1.05);
}

.tile-swap img.fade-out {
	opacity: 0;
}

.tile-swap img.fade-in {
	opacity: 1;
}

/* Accommodations Section */
.accommodations-section {
	padding: 6rem 2rem;
	background: var(--color-beige);
}

.accommodations-container {
	max-width: 1400px;
	margin: 0 auto;
}

.accommodations-header {
	text-align: center;
	margin-bottom: 4rem;
}

.accommodations-header h2 {
	font-family: var(--font-heading);
	font-size: 2.75rem;
	font-weight: 600;
	color: var(--color-dark);
	margin: 0 0 0.5rem 0;
}

.accommodations-header p {
	color: var(--color-text-light);
	font-size: 1.1rem;
}

.accommodations-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

/* Accommodation Carousel */
.accommodations-carousel-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.accommodations-carousel {
	overflow: hidden;
	flex: 1;
}

.accommodations-track {
	display: flex;
	gap: 1.5rem;
	transition: transform 0.4s ease;
}

.accommodations-track .accommodation-card {
	flex: 0 0 calc(33.333% - 1rem);
	min-width: calc(33.333% - 1rem);
}

.carousel-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease;
}

.carousel-btn:hover {
	background: var(--color-primary);
	color: #fff;
}

.carousel-btn:hover svg {
	stroke: #fff;
}

.carousel-btn svg {
	stroke: var(--color-dark);
	transition: stroke 0.3s ease;
}

.carousel-btn-prev {
	left: -24px;
}

.carousel-btn-next {
	right: -24px;
}

.carousel-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.carousel-dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2rem;
}

.carousel-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ddd;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
}

.carousel-dot.active {
	background: var(--color-primary);
	transform: scale(1.2);
}

/* Accommodation Card */
.accommodation-card {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}

.accommodation-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-xl);
}

.accommodation-image {
	position: relative;
	height: 260px;
	overflow: hidden;
}

.accommodation-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.accommodation-card:hover .accommodation-image img {
	transform: scale(1.05);
}

.accommodation-badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	background: var(--color-primary);
	color: #fff;
	padding: 0.4rem 0.8rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: 4px;
}

.accommodation-content {
	padding: 1.5rem;
}

.accommodation-content h3 {
	font-family: var(--font-heading);
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--color-dark);
	margin: 0 0 0.75rem 0;
}

.accommodation-content p {
	color: var(--color-text-light);
	font-size: 0.95rem;
	line-height: 1.7;
	margin: 0 0 1rem 0;
}

.accommodation-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-primary);
	font-weight: 600;
	font-size: 0.85rem;
}

.accommodation-link svg {
	transition: transform var(--transition-fast);
}

.accommodation-card:hover .accommodation-link svg {
	transform: translateX(4px);
}

.accommodation-card-featured .accommodation-badge {
	background: var(--color-accent);
}

/* Video Section */
.video-section {
	padding: 5rem 2rem;
	background: var(--color-beige);
}

.video-container {
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}

.video-wrapper {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
	background: #000;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.video-placeholder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.video-placeholder img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: none;
	border: none;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.video-play-btn:hover {
	transform: translate(-50%, -50%) scale(1.1);
}

.video-placeholder:hover .video-play-btn {
	transform: translate(-50%, -50%) scale(1.1);
}

.video-iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video-caption {
	margin-top: 2rem;
}

.video-caption h3 {
	font-family: var(--font-heading);
	font-size: 1.8rem;
	font-weight: 600;
	color: var(--color-dark);
	margin: 0 0 0.5rem 0;
}

.video-caption p {
	color: var(--color-text-light);
	font-size: 1.1rem;
	margin: 0;
}

/* Experience Section */
.experience-section {
	padding: 0;
	background: #fff;
}

.experience-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	direction: rtl;
}

.experience-container > * {
	direction: ltr;
}

.experience-image {
	height: 600px;
}

.experience-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.experience-content {
	padding: 5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.experience-content h2 {
	font-family: var(--font-heading);
	font-size: 2.75rem;
	font-weight: 600;
	color: var(--color-dark);
	margin: 0 0 1rem 0;
}

.experience-intro {
	font-size: 1.15rem;
	color: var(--color-text-light);
	margin-bottom: 2rem;
}

.experience-list {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem 0;
}

.experience-list li {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text);
}

.experience-list li:last-child {
	border-bottom: none;
}

.experience-list svg {
	color: var(--color-primary);
	flex-shrink: 0;
}

.btn-primary {
	display: inline-block;
	padding: 1rem 2rem;
	background: var(--color-primary);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	border-radius: 4px;
	transition: background var(--transition-fast);
	align-self: flex-start;
}

.btn-primary:hover {
	background: var(--color-primary-light);
}

/* Location Section - Design moderne avec carte plein écran */
.location-section {
	position: relative;
	height: 600px;
}

.location-map-full {
	position: absolute;
	inset: 0;
}

.location-map-full iframe {
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(20%);
}

/* Map Legend */
.map-legend {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.map-legend-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1.25rem;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	font-size: 0.9rem;
	color: var(--color-dark);
}

.map-legend-warning {
	border-left: 4px solid #E53E3E;
}

.map-legend-warning svg {
	color: #E53E3E;
	flex-shrink: 0;
}

.location-card {
	position: absolute;
	top: 50%;
	left: 5%;
	transform: translateY(-50%);
	z-index: 10;
}

.location-card-inner {
	background: #fff;
	padding: 3rem 3.5rem;
	border-radius: 12px;
	box-shadow: var(--shadow-xl);
	max-width: 400px;
}

.location-card-inner h2 {
	font-family: var(--font-heading);
	font-size: 1.85rem;
	font-weight: 600;
	color: var(--color-dark);
	margin: 0 0 1.5rem 0;
}

.location-address {
	display: flex;
	gap: 1rem;
	margin-bottom: 1.5rem;
	color: var(--color-text);
	line-height: 1.6;
}

.location-address svg {
	color: var(--color-primary);
	flex-shrink: 0;
	margin-top: 2px;
}

.location-address strong {
	color: var(--color-dark);
}

.location-contact {
	margin-bottom: 1.5rem;
}

.location-phone-link {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.location-phone-link:hover {
	color: var(--color-primary-light);
}

.location-phone-link svg {
	flex-shrink: 0;
}

.location-rating {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--color-border);
}

.rating-stars {
	display: flex;
	gap: 0.25rem;
}

.rating-stars svg {
	width: 24px;
	height: 24px;
}

.rating-count {
	font-size: 0.9rem;
	color: var(--color-text-light);
	font-weight: 500;
}

.location-directions {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	background: var(--color-primary);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.85rem;
	border-radius: 6px;
	transition: background var(--transition-fast);
}

.location-directions:hover {
	background: var(--color-primary-light);
}

/* ========================================
   HOMEPAGE RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {
	.hero-nav-links {
		display: none;
	}

	.about-container {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.accommodations-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}

	.accommodations-track .accommodation-card {
		flex: 0 0 calc(50% - 0.75rem);
		min-width: calc(50% - 0.75rem);
	}

	.carousel-btn-prev {
		left: -12px;
	}

	.carousel-btn-next {
		right: -12px;
	}

	.carousel-btn {
		width: 40px;
		height: 40px;
	}

	.experience-container {
		grid-template-columns: 1fr;
	}

	.experience-image {
		height: 400px;
	}

	.experience-content {
		padding: 3rem 2rem;
	}

	.location-section {
		height: auto;
		display: flex;
		flex-direction: column;
	}

	.location-map-full {
		position: relative;
		height: 350px;
	}

	.location-card {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		padding: 2rem;
		background: var(--color-beige);
	}

	.location-card-inner {
		max-width: 100%;
	}
}

@media (max-width: 768px) {
	/* Hero mobile */
	.hero {
		background-attachment: scroll;
	}

	.hero-nav {
		padding: 1rem 1.5rem;
	}

	.hero-nav-btn {
		display: none;
	}

	.hero-content {
		padding: 1.5rem;
	}

	.hero-location {
		font-size: 0.75rem;
	}

	.hero-title {
		font-size: 2.5rem;
	}

	.hero-subtitle {
		font-size: 1rem;
		margin-bottom: 2rem;
	}

	.hero-search {
		flex-direction: column;
		width: 100%;
		max-width: 300px;
	}

	.hero-search-item {
		border-right: none;
		border-bottom: 1px solid var(--color-border);
		padding: 1rem 1.5rem;
	}

	.hero-search-btn {
		padding: 1rem 1.5rem;
		justify-content: center;
	}

	.hero-scroll {
		display: none;
	}

	/* About mobile */
	.about-section {
		padding: 4rem 1.5rem;
	}

	.about-text h2 {
		font-size: 2rem;
	}

	.about-intro {
		font-size: 1.15rem;
	}

	.about-gallery-main {
		height: 300px;
	}

	.about-gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.about-gallery-grid > img {
		height: 100px;
	}

	/* Accommodations mobile */
	.accommodations-section {
		padding: 4rem 1.5rem;
	}

	.accommodations-header h2 {
		font-size: 2rem;
	}

	.accommodations-grid {
		grid-template-columns: 1fr;
		max-width: 400px;
		margin: 0 auto;
	}

	.accommodations-track .accommodation-card {
		flex: 0 0 100%;
		min-width: 100%;
	}

	.accommodations-carousel-wrapper {
		margin: 0 -0.5rem;
	}

	.carousel-btn {
		width: 36px;
		height: 36px;
	}

	.carousel-btn-prev {
		left: 8px;
	}

	.carousel-btn-next {
		right: 8px;
	}

	.accommodation-image {
		height: 220px;
	}

	/* Experience mobile */
	.experience-image {
		height: 300px;
	}

	.experience-content {
		padding: 2.5rem 1.5rem;
	}

	.experience-content h2 {
		font-size: 2rem;
	}

	/* Location mobile */
	.location-map-full {
		height: 280px;
	}

	.location-card {
		padding: 1.5rem;
	}

	.location-card-inner {
		padding: 2rem;
	}

	.location-card-inner h2 {
		font-size: 1.5rem;
	}

	/* Footer mobile */
	.footer-grid {
		grid-template-columns: 1fr !important;
		text-align: center;
	}

	.footer-about {
		grid-column: span 1 !important;
	}

	.footer-social {
		justify-content: center;
	}

	/* Top bar mobile */
	.top-bar-container {
		flex-direction: column;
		gap: 0.5rem;
		padding: 0.75rem 1rem;
	}

	.top-bar-left {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem 1rem;
	}

	.top-bar-item {
		font-size: 0.75rem;
	}

	.top-bar-right {
		gap: 0.5rem;
	}

	.top-bar-link {
		font-size: 0.75rem;
		padding: 0.25rem 0.5rem;
	}

	/* Bouton retour haut mobile */
	#btn_up {
		right: 1rem;
		bottom: 1rem;
		width: 42px;
		height: 42px;
	}
}

@media (max-width: 480px) {
	.hero-nav {
		padding: 0.75rem 1rem;
	}

	.hero-logo-icon {
		width: 32px;
		height: 38px;
	}

	.hero-title {
		font-size: 2rem;
	}

	.hero-subtitle {
		font-size: 0.9rem;
	}

	.hero-search {
		max-width: 280px;
	}

	.hero-search-label {
		font-size: 0.65rem;
	}

	.hero-search-value {
		font-size: 1rem;
	}

	.about-section {
		padding: 3rem 1rem;
	}

	.about-text h2 {
		font-size: 1.75rem;
	}

	.about-intro {
		font-size: 1.05rem;
	}

	.about-gallery-main {
		height: 220px;
	}

	.about-gallery-grid > img {
		height: 80px;
	}

	.btn-outline {
		width: 100%;
		text-align: center;
	}

	.accommodations-section {
		padding: 3rem 1rem;
	}

	.accommodations-header h2 {
		font-size: 1.75rem;
	}

	.accommodation-content {
		padding: 1.25rem;
	}

	.accommodation-content h3 {
		font-size: 1.25rem;
	}

	.experience-content {
		padding: 2rem 1rem;
	}

	.experience-content h2 {
		font-size: 1.75rem;
	}

	.experience-list li {
		font-size: 0.9rem;
	}

	.btn-primary {
		width: 100%;
		text-align: center;
	}

	.location-card {
		padding: 1rem;
	}

	.location-card-inner {
		padding: 1.5rem;
	}

	.location-phone-link {
		font-size: 1.1rem;
	}

	.location-badges img {
		height: 40px;
	}

	.location-directions {
		width: 100%;
		justify-content: center;
	}

	/* Mobile menu petit écran */
	.mobile-menu-content a {
		font-size: 1.25rem;
		padding: 0.6rem 1rem;
	}
}

/* ========================================
   NOUVEAU HEADER V2 - Demande cliente
   Style inspiré La Ferme du Lac Vert
   ======================================== */

/* ========================================
   NAVBAR V3 - Logo centré, transparent puis noir
   ======================================== */

.main-navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.2) 80%, transparent 100%);
	transition: all 0.4s ease;
}

.navbar-container {
	max-width: 1600px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1.5rem;
	position: relative;
}

/* Logo icône (cerf) - caché par défaut, visible au scroll */
.navbar-icon {
	opacity: 0;
	width: 0;
	overflow: hidden;
	transition: all 0.4s ease;
	display: flex;
	align-items: center;
}

.navbar-icon img {
	height: 45px;
	width: auto;
}

/* Zone centrale avec liens + logo */
.navbar-center {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
}

/* Logo central */
.navbar-logo {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 0.5rem 2rem 0;
	transition: all 0.4s ease;
}

.navbar-logo img {
	height: 250px;
	width: auto;
	transition: all 0.4s ease;
}

/* Liens de navigation */
.navbar-links {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
}

.navbar-left {
	justify-content: flex-end;
}

.navbar-right {
	justify-content: flex-start;
}

.navbar-links li a {
	display: block;
	padding: 1.5rem 1.5rem;
	color: #fff;
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: all 0.3s ease;
	white-space: nowrap;
	text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.navbar-links li a:hover {
	color: var(--color-beige);
}

.navbar-links li.active a {
	color: var(--color-beige);
}

/* Dropdown menus */
.navbar-links li.has-dropdown {
	position: relative;
}

.navbar-links .dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	min-width: 220px;
	background: transparent;
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	text-align: center;
}

.navbar-links li.has-dropdown:hover .dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.navbar-links .dropdown li {
	display: block;
}

.navbar-links .dropdown li a {
	display: block;
	padding: 0.85rem 1.5rem;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0.02em;
	text-shadow: none;
	transition: all 0.2s ease;
}

.navbar-links .dropdown li a:hover {
	background: rgba(255,255,255,0.1);
	color: var(--color-beige);
}

/* Dropdown quand scrolled - fond solide, aligné gauche */
.main-navbar.scrolled .dropdown {
	background: var(--color-dark);
	left: 0;
	transform: translateY(10px);
	text-align: left;
}

.main-navbar.scrolled li.has-dropdown:hover .dropdown {
	transform: translateY(0);
}

/* Bouton Je réserve - position absolute à droite */
.navbar-cta {
	position: absolute;
	right: 6rem;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.4s ease;
}

.navbar-cta a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0;
	background: transparent;
	border: none;
	color: #fff;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: all 0.3s ease;
	text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.navbar-cta a::after {
	content: '→';
	font-size: 1.1rem;
	transition: transform 0.3s ease;
}

.navbar-cta a:hover {
	color: var(--color-beige);
}

.navbar-cta a:hover::after {
	transform: translateX(4px);
}

/* ========================================
   NAVBAR SCROLLED - État réduit au scroll
   ======================================== */

.main-navbar.scrolled {
	background: var(--color-dark);
	box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

/* Icône cerf apparaît */
.main-navbar.scrolled .navbar-icon {
	opacity: 1;
	width: auto;
	padding: 0.5rem 0;
}

/* Logo complet disparaît */
.main-navbar.scrolled .navbar-logo {
	opacity: 0;
	width: 0;
	padding: 0;
	overflow: hidden;
	pointer-events: none;
}

.main-navbar.scrolled .navbar-logo img {
	height: 0;
}

/* Alignement au scroll */
.main-navbar.scrolled .navbar-container {
	align-items: center;
}

.main-navbar.scrolled .navbar-center {
	justify-content: flex-start;
	flex: 1;
}

.main-navbar.scrolled .navbar-links li a {
	padding: 1rem 1.25rem;
	text-shadow: none;
}

.main-navbar.scrolled .navbar-cta a {
	text-shadow: none;
}

.main-navbar.scrolled .navbar-cta a:hover {
	color: var(--color-beige);
}

/* ========================================
   HERO V2 - Avec carrousel et contenu
   ======================================== */

.hero-v2 {
	position: relative;
	height: 100vh;
	min-height: 600px;
	overflow: hidden;
	margin-top: 0; /* La navbar est en position fixed, le hero passe dessous */
}

/* Carrousel d'images de fond */
.hero-slider {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.5s ease-in-out;
	background-size: cover;
	background-position: center;
}

.hero-slide.active {
	opacity: 1;
}

.hero-v2 .hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0,0,0,0.4) 0%,
		rgba(0,0,0,0.2) 50%,
		rgba(0,0,0,0.5) 100%
	);
	z-index: 2;
}

/* Contenu centré sur le hero */
.hero-v2-content {
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 10;
	width: 90%;
	max-width: 900px;
	color: #fff;
}

.hero-v2-address {
	font-size: 0.85rem;
	font-weight: 400;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	margin-bottom: 2.5rem;
	opacity: 0.85;
	text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

.hero-v2-title {
	font-family: var(--font-script);
	font-size: clamp(3.5rem, 10vw, 6rem);
	font-weight: 400;
	margin: 0 0 0.25rem 0;
	line-height: 1.1;
	text-shadow: 2px 2px 8px rgba(0,0,0,0.4);
}

.hero-v2-concept {
	font-size: 1.2rem;
	font-weight: 300;
	letter-spacing: 0.15em;
	margin-bottom: 2rem;
	text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

.hero-v2-slogan {
	font-family: var(--font-script);
	font-size: 2.2rem;
	margin-bottom: 3rem;
	opacity: 0.9;
	text-shadow: 2px 2px 6px rgba(0,0,0,0.4);
}

.hero-v2-btn {
	display: inline-block;
	background: rgba(255,255,255,0.95);
	color: var(--color-dark);
	padding: 1.1rem 3rem;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	border: none;
	transition: all 0.3s ease;
}

.hero-v2-btn:hover {
	background: var(--color-beige);
	transform: translateY(-3px);
	box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* ========================================
   SECTIONS ALTERNÉES - Style Le Cheval Blanc
   ======================================== */

.section-alternate {
	display: flex;
	align-items: stretch;
	min-height: 500px;
}

.section-alternate.reverse {
	flex-direction: row-reverse;
}

.section-alternate-text {
	flex: 1;
	padding: 5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.section-alternate-text h2 {
	font-family: var(--font-script);
	font-size: 3.5rem;
	color: var(--color-primary);
	margin: 0 0 1.5rem 0;
	font-weight: 400;
}

.section-alternate-text p {
	font-size: 1.1rem;
	line-height: 1.9;
	color: var(--color-text-light);
	margin-bottom: 1rem;
}

.section-alternate-text .btn-outline {
	align-self: flex-start;
	margin-top: 1rem;
}

.section-alternate-image {
	flex: 1;
	min-height: 400px;
}

.section-alternate-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Fond blanc */
.section-alternate.bg-white {
	background: #fff;
}

/* Fond beige marqué */
.section-alternate.bg-beige {
	background: var(--color-beige);
}

.section-alternate.bg-beige .section-alternate-text h2 {
	color: var(--color-dark);
}

.section-alternate.bg-beige .section-alternate-text p {
	color: var(--color-text);
}

/* Fond gris/noir */
.section-alternate.bg-dark {
	background: var(--color-gray-dark);
}

.section-alternate.bg-dark .section-alternate-text h2 {
	color: #fff;
}

.section-alternate.bg-dark .section-alternate-text p {
	color: rgba(255,255,255,0.8);
}

.section-alternate.bg-dark .btn-outline {
	border-color: #fff;
	color: #fff;
}

.section-alternate.bg-dark .btn-outline:hover {
	background: #fff;
	color: var(--color-dark);
}

/* Responsive sections alternées */
@media (max-width: 900px) {
	.section-alternate,
	.section-alternate.reverse {
		flex-direction: column;
	}

	.section-alternate-text {
		padding: 3rem 2rem;
	}

	.section-alternate-text h2 {
		font-size: 2.5rem;
	}

	.section-alternate-image {
		min-height: 300px;
	}
}

/* Responsive navbar V3 */
@media (max-width: 1300px) {
	.navbar-links li a {
		padding: 1.25rem 1rem;
		font-size: 0.85rem;
	}

	.navbar-logo img {
		height: 180px;
	}

	.navbar-cta a {
		font-size: 0.85rem;
	}
}

@media (max-width: 1100px) {
	.navbar-links li a {
		padding: 1rem 0.75rem;
		font-size: 0.8rem;
	}

	.navbar-logo img {
		height: 150px;
	}

	.navbar-logo {
		padding: 0 1rem;
	}

	/* Cacher "Je réserve" quand ça devient trop serré */
	.navbar-cta {
		display: none;
	}
}

/* Mode hamburger - quand les liens se chevauchent */
@media (max-width: 900px) {
	.main-navbar {
		padding: 0.75rem 1rem;
		background: var(--color-dark);
	}

	.navbar-container {
		justify-content: space-between;
	}

	/* Cacher tout sauf hamburger et logo */
	.navbar-center,
	.navbar-cta,
	.lang-switcher {
		display: none !important;
	}

	/* Afficher le hamburger */
	.main-navbar .mobile-menu-toggle {
		display: flex !important;
		order: 1;
	}

	/* Afficher le logo icône au centre */
	.navbar-icon {
		opacity: 1;
		width: auto;
		position: static;
		padding: 0;
		order: 2;
		flex: 1;
		display: flex;
		justify-content: center;
	}

	.navbar-icon img {
		height: 50px;
	}

	.mobile-menu {
		display: block;
	}
}

@media (max-width: 600px) {
	.main-navbar {
		padding: 0.5rem 1rem;
	}

	.navbar-icon img {
		height: 40px;
	}

	.hero-v2-address {
		font-size: 0.85rem;
		letter-spacing: 0.1em;
	}

	.hero-v2-title {
		font-size: 2.5rem;
	}

	.hero-v2-concept {
		font-size: 1rem;
	}

	.hero-v2-slogan {
		font-size: 1.8rem;
	}

	.hero-v2-btn {
		padding: 0.9rem 2rem;
		font-size: 0.9rem;
	}

	.section-alternate-text {
		padding: 2rem 1.5rem;
	}

	.section-alternate-text h2 {
		font-size: 2rem;
	}
}
/* ========================================
   PAGES DETAIL HEBERGEMENT
   Style Airbnb-like
   ======================================== */

/* Header simplifié pour pages internes */
.page-header {
	background: var(--color-dark);
	padding: 1rem 2rem;
	position: sticky;
	top: 0;
	z-index: 1000;
}

.page-header-inner {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.page-header-logo img {
	height: 50px;
	width: auto;
}

.page-header-nav {
	display: flex;
	gap: 2rem;
	align-items: center;
}

.page-header-nav a {
	color: #fff;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	transition: color var(--transition-fast);
}

.page-header-nav a:hover {
	color: var(--color-beige);
}

.page-header-btn {
	background: var(--color-beige);
	color: var(--color-dark);
	padding: 0.6rem 1.5rem;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
	transition: all var(--transition-fast);
}

.page-header-btn:hover {
	background: #fff;
	color: var(--color-dark);
}

/* Container principal hébergement */
.listing-page {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem;
	padding-top: 100px; /* Espace pour la navbar fixe */
}

/* Galerie photos */
.listing-gallery {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 200px 200px;
	gap: 8px;
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: 2rem;
}

.listing-gallery-main {
	grid-row: span 2;
	position: relative;
	cursor: pointer;
}

.listing-gallery-main img,
.listing-gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-medium);
}

.listing-gallery-main:hover img,
.listing-gallery-thumb:hover img {
	transform: scale(1.02);
}

.listing-gallery-thumb {
	position: relative;
	cursor: pointer;
	overflow: hidden;
}

.gallery-view-all {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	background: #fff;
	color: var(--color-dark);
	padding: 0.5rem 1rem;
	border-radius: 8px;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid var(--color-dark);
	transition: all var(--transition-fast);
}

.gallery-view-all:hover {
	background: var(--color-dark);
	color: #fff;
}

/* Layout principal */
.listing-content {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 4rem;
	align-items: start;
}

/* Infos principales */
.listing-info {
	padding-right: 2rem;
}

.listing-title {
	font-family: var(--font-heading);
	font-size: 2.5rem;
	font-weight: 600;
	color: var(--color-dark);
	margin: 0 0 0.5rem 0;
}

.listing-subtitle {
	font-size: 1.1rem;
	color: var(--color-text-light);
	margin: 0 0 1.5rem 0;
}

.listing-meta {
	display: flex;
	gap: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-border);
	margin-bottom: 1.5rem;
}

.listing-meta-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.95rem;
	color: var(--color-text);
}

.listing-meta-item svg {
	color: var(--color-primary);
}

/* Description */
.listing-description {
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--color-border);
}

.listing-description h3 {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0 0 1rem 0;
	color: var(--color-dark);
}

.listing-description p {
	color: var(--color-text);
	line-height: 1.8;
	margin-bottom: 1rem;
}

/* Équipements */
.listing-amenities {
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--color-border);
}

.listing-amenities h3 {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0 0 1.5rem 0;
	color: var(--color-dark);
}

.amenities-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.amenity-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 0;
}

.amenity-icon {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
}

.amenity-text {
	font-size: 0.95rem;
	color: var(--color-text);
}

/* Card de réservation (sticky) */
.listing-booking {
	position: sticky;
	top: 100px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 16px;
	padding: 1.5rem;
	box-shadow: var(--shadow-lg);
	max-height: calc(100vh - 120px);
	overflow-y: auto;
}

.booking-price {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.booking-price-amount {
	font-size: 1.75rem;
	font-weight: 600;
	color: var(--color-dark);
}

.booking-price-period {
	font-size: 1rem;
	color: var(--color-text-light);
}

/* Calendrier placeholder */
.booking-calendar {
	border: 1px solid var(--color-border);
	border-radius: 12px;
	margin-bottom: 1rem;
	overflow: hidden;
}

.calendar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.6rem 0.75rem;
	background: var(--color-beige-light);
}

.calendar-header-title {
	font-weight: 600;
	color: var(--color-dark);
}

.calendar-nav {
	background: transparent;
	border: none;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all var(--transition-fast);
	color: var(--color-dark);
	border-radius: 50%;
}

.calendar-nav:hover {
	background: var(--color-beige);
	color: var(--color-primary);
}

.calendar-nav svg {
	width: 20px;
	height: 20px;
}

.calendar-grid {
	padding: 0.5rem 0.75rem 0.75rem;
}

.calendar-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
	margin-bottom: 0.5rem;
}

.calendar-weekdays span {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-text-light);
	padding: 0.5rem 0;
}

.calendar-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}

.calendar-day {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast);
	position: relative;
}

.calendar-day:hover:not(.disabled):not(.booked):not(.selected):not(.in-range) {
	background: var(--color-beige-light);
	border-radius: 50%;
}

.calendar-day.disabled {
	color: #ccc;
	cursor: not-allowed;
}

.calendar-day.booked {
	background: #ffebee;
	color: #c62828;
	cursor: not-allowed;
	text-decoration: line-through;
}

.calendar-day.selected {
	background: var(--color-primary);
	color: #fff;
}

.calendar-day.selected.start {
	border-radius: 50% 0 0 50%;
}

.calendar-day.selected.end {
	border-radius: 0 50% 50% 0;
}

.calendar-day.selected.single {
	border-radius: 50%;
}

.calendar-day.in-range {
	background: rgba(139, 90, 43, 0.15);
	border-radius: 0;
}

/* Sélection dates */
.booking-dates {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	margin-bottom: 1rem;
	overflow: hidden;
}

.booking-date-input {
	padding: 0.6rem 1rem;
	cursor: pointer;
	transition: background var(--transition-fast);
}

.booking-date-input:first-child {
	border-right: 1px solid var(--color-border);
}

.booking-date-input:hover {
	background: var(--color-beige-light);
}

.booking-date-label {
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--color-text-light);
	margin-bottom: 0.1rem;
}

.booking-date-value {
	font-size: 0.95rem;
	color: var(--color-dark);
}

/* Sélection voyageurs */
.booking-guests {
	border: 1px solid var(--color-border);
	border-radius: 12px;
	padding: 0.6rem 1rem;
	margin-bottom: 1rem;
	cursor: pointer;
	transition: background var(--transition-fast);
}

.booking-guests:hover {
	background: var(--color-beige-light);
}

.booking-guests-label {
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--color-text-light);
	margin-bottom: 0.1rem;
}

.booking-guests-value {
	font-size: 0.95rem;
	color: var(--color-dark);
}

/* Bouton réserver */
.booking-submit {
	width: 100%;
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
	color: #fff;
	border: none;
	padding: 1rem;
	border-radius: 12px;
	font-size: 1.1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--transition-fast);
	margin-bottom: 1rem;
}

.booking-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(27, 67, 50, 0.3);
}

.booking-note {
	text-align: center;
	font-size: 0.85rem;
	color: var(--color-text-light);
}

/* Récap prix */
.booking-summary {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-border);
}

.booking-summary-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.75rem;
	font-size: 0.95rem;
}

.booking-summary-row.total {
	font-weight: 600;
	font-size: 1.1rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-border);
	margin-top: 0.75rem;
}

/* Section infos pratiques */
.listing-practical {
	padding: 2rem 0;
	margin-top: 2rem;
	border-top: 1px solid var(--color-border);
}

.listing-practical h3 {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0 0 1.5rem 0;
	color: var(--color-dark);
}

.practical-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}

.practical-item {
	display: flex;
	gap: 1rem;
}

.practical-icon {
	width: 48px;
	height: 48px;
	background: var(--color-beige-light);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.practical-icon svg {
	color: var(--color-primary);
}

.practical-content h4 {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 0.25rem 0;
	color: var(--color-dark);
}

.practical-content p {
	font-size: 0.9rem;
	color: var(--color-text-light);
	margin: 0;
}

/* Lightbox galerie */
.gallery-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.95);
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
}

.gallery-lightbox.active {
	display: flex;
}

.lightbox-close {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	background: #fff;
	border: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
}

.lightbox-image {
	max-width: 90%;
	max-height: 85vh;
	object-fit: contain;
}

.lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: #fff;
	border: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lightbox-prev {
	left: 2rem;
}

.lightbox-next {
	right: 2rem;
}

.lightbox-counter {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 0.9rem;
}

/* Formules romantiques CTA */
.listing-formules {
	background: var(--color-beige-light);
	border-radius: 16px;
	padding: 2rem;
	margin-top: 2rem;
	text-align: center;
}

.listing-formules h3 {
	font-family: var(--font-script);
	font-size: 2rem;
	color: var(--color-primary);
	margin: 0 0 0.5rem 0;
}

.listing-formules p {
	color: var(--color-text-light);
	margin: 0 0 1.5rem 0;
}

.listing-formules .btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border: 2px solid var(--color-primary);
	color: var(--color-primary);
	text-decoration: none;
	border-radius: 8px;
	font-weight: 600;
	transition: all var(--transition-fast);
}

.listing-formules .btn-outline:hover {
	background: var(--color-primary);
	color: #fff;
}

/* Responsive pages détail */
@media (max-width: 1024px) {
	.listing-content {
		grid-template-columns: 1fr;
	}

	.listing-info {
		padding-right: 0;
	}

	.listing-booking {
		position: relative;
		top: 0;
		margin-top: 2rem;
	}

	.listing-gallery {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 250px 125px;
	}

	.listing-gallery-main {
		grid-column: span 2;
		grid-row: span 1;
	}
}

@media (max-width: 768px) {
	.listing-page {
		padding: 1rem;
	}

	.listing-gallery {
		grid-template-columns: 1fr;
		grid-template-rows: 250px;
	}

	.listing-gallery-main {
		grid-column: span 1;
	}

	.listing-gallery-thumb {
		display: none;
	}

	.listing-title {
		font-size: 1.8rem;
	}

	.amenities-grid,
	.practical-grid {
		grid-template-columns: 1fr;
	}

	.listing-meta {
		flex-wrap: wrap;
		gap: 1rem;
	}

	.page-header-nav {
		display: none;
	}
}

/* ========================================
   BOOKING MODAL & GUEST SELECTOR
   ======================================== */

/* Sélecteur de voyageurs amélioré */
.guests-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	box-shadow: var(--shadow-lg);
	padding: 1rem;
	z-index: 100;
	margin-top: 0.5rem;
}

.guests-dropdown.active {
	display: block;
}

.booking-guests {
	position: relative;
}

.guest-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--color-border);
}

.guest-row:last-child {
	border-bottom: none;
}

.guest-info h4 {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--color-dark);
}

.guest-info p {
	margin: 0;
	font-size: 0.8rem;
	color: var(--color-text-light);
}

.guest-controls {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.guest-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--color-primary);
	transition: all var(--transition-fast);
}

.guest-btn:hover:not(:disabled) {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

.guest-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.guest-count {
	min-width: 24px;
	text-align: center;
	font-weight: 600;
	font-size: 1rem;
}

/* Modal de réservation */
.booking-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 10000;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	backdrop-filter: blur(4px);
}

.booking-modal.active {
	display: flex;
}

.booking-modal-content {
	background: #fff;
	border-radius: 20px;
	max-width: 500px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: var(--shadow-xl);
	animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.booking-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.5rem;
	border-bottom: 1px solid var(--color-border);
}

.booking-modal-header h2 {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 1.5rem;
	color: var(--color-dark);
}

.booking-modal-close {
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	color: var(--color-text-light);
	padding: 0.5rem;
	line-height: 1;
	transition: color var(--transition-fast);
}

.booking-modal-close:hover {
	color: var(--color-dark);
}

.booking-modal-body {
	padding: 1.5rem;
}

.booking-recap {
	background: var(--color-beige-light);
	border-radius: 12px;
	padding: 1.25rem;
	margin-bottom: 1.5rem;
}

.booking-recap-title {
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--color-dark);
	margin-bottom: 0.75rem;
}

.booking-recap-row {
	display: flex;
	justify-content: space-between;
	padding: 0.5rem 0;
	font-size: 0.95rem;
	border-bottom: 1px solid rgba(0,0,0,0.06);
}

.booking-recap-row:last-child {
	border-bottom: none;
}

.booking-recap-row.total {
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--color-primary);
	padding-top: 0.75rem;
	margin-top: 0.5rem;
	border-top: 2px solid var(--color-primary);
}

/* Formulaire de réservation */
.booking-form-group {
	margin-bottom: 1.25rem;
}

.booking-form-group label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-dark);
	margin-bottom: 0.5rem;
}

.booking-form-group input,
.booking-form-group textarea {
	width: 100%;
	padding: 0.875rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	font-size: 1rem;
	font-family: var(--font-body);
	transition: all var(--transition-fast);
	box-sizing: border-box;
}

.booking-form-group input:focus,
.booking-form-group textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(27, 67, 50, 0.1);
}

.booking-form-group textarea {
	resize: vertical;
	min-height: 100px;
}

.booking-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.booking-form-submit {
	width: 100%;
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
	color: #fff;
	border: none;
	padding: 1rem;
	border-radius: 12px;
	font-size: 1.1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--transition-fast);
	margin-top: 0.5rem;
}

.booking-form-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(27, 67, 50, 0.3);
}

.booking-or-contact {
	text-align: center;
	margin: 1.5rem 0;
	color: var(--color-text-light);
	font-size: 0.9rem;
}

.booking-contact-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.booking-contact-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem 1rem;
	border-radius: 10px;
	font-size: 0.95rem;
	font-weight: 500;
	text-decoration: none;
	transition: all var(--transition-fast);
}

.booking-contact-btn.phone {
	background: var(--color-beige-light);
	color: var(--color-dark);
	border: 1px solid var(--color-border);
}

.booking-contact-btn.phone:hover {
	background: var(--color-beige);
}

.booking-contact-btn.whatsapp {
	background: #25D366;
	color: #fff;
	border: none;
}

.booking-contact-btn.whatsapp:hover {
	background: #1fae55;
}

/* Confirmation réservation */
.booking-success {
	text-align: center;
	padding: 2rem 1rem;
}

.booking-success-icon {
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.5rem;
}

.booking-success-icon svg {
	width: 40px;
	height: 40px;
	color: #fff;
}

.booking-success h3 {
	font-family: var(--font-heading);
	font-size: 1.75rem;
	color: var(--color-dark);
	margin: 0 0 0.75rem 0;
}

.booking-success p {
	color: var(--color-text-light);
	margin: 0 0 1.5rem 0;
	line-height: 1.6;
}

.booking-success-details {
	background: var(--color-beige-light);
	border-radius: 12px;
	padding: 1.25rem;
	margin-bottom: 1.5rem;
	text-align: left;
}

.booking-success-details p {
	margin: 0.5rem 0;
	font-size: 0.95rem;
}

.booking-success-close {
	background: var(--color-dark);
	color: #fff;
	border: none;
	padding: 0.875rem 2rem;
	border-radius: 10px;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: all var(--transition-fast);
}

.booking-success-close:hover {
	background: var(--color-primary);
}

@media (max-width: 600px) {
	.booking-form-row {
		grid-template-columns: 1fr;
	}

	.booking-contact-options {
		grid-template-columns: 1fr;
	}

	.booking-modal-content {
		border-radius: 16px 16px 0 0;
		max-height: 95vh;
		margin-top: auto;
	}
}

/* Language Switcher */
.lang-switcher {
	position: absolute;
	right: 2px;
	top: 50%;
	transform: translateY(-50%);
	display: none;
	gap: 0.25rem;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 6px;
	padding: 0.25rem;
	z-index: 10;
}

.main-navbar.scrolled .lang-switcher {
	display: flex;
}

.lang-option {
	padding: 0.35rem 0.6rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-decoration: none;
	color: inherit;
	border-radius: 4px;
	transition: all var(--transition-fast);
}

.lang-option:hover {
	background: rgba(255, 255, 255, 0.2);
}

.lang-option.active {
	background: var(--color-beige);
	color: var(--color-dark);
}

.main-navbar.scrolled .lang-option.active {
	background: var(--color-beige);
	color: var(--color-dark);
}

/* ========================================
   LEGAL PAGE STYLES
   ======================================== */
.legal-page {
	padding-top: 100px; /* Navbar height */
}

.legal-content {
	padding: var(--spacing-xl) var(--spacing-md);
	background: var(--color-white);
	min-height: calc(100vh - 300px);
}

.legal-content .container {
	max-width: 900px;
}

.legal-content h1 {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 600;
	color: var(--color-primary);
	margin-bottom: var(--spacing-lg);
	padding-bottom: var(--spacing-md);
	border-bottom: 2px solid var(--color-beige);
	text-align: center;
}

.legal-section {
	margin-bottom: var(--spacing-lg);
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--color-border);
}

.legal-section:last-of-type {
	border-bottom: none;
}

.legal-section h2 {
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 600;
	color: var(--color-primary);
	margin-bottom: var(--spacing-md);
	padding-bottom: var(--spacing-sm);
	border-bottom: 1px solid var(--color-beige);
}

.legal-section h3 {
	font-family: var(--font-heading);
	font-size: clamp(1.2rem, 2.5vw, 1.5rem);
	font-weight: 600;
	color: var(--color-secondary);
	margin-top: var(--spacing-md);
	margin-bottom: var(--spacing-sm);
}

.legal-section p {
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.8;
	color: var(--color-text);
	margin-bottom: var(--spacing-sm);
}

.legal-section p strong {
	color: var(--color-dark);
	font-weight: 600;
}

.legal-update {
	text-align: center;
	color: var(--color-text-light);
	font-size: 0.9rem;
	margin-top: var(--spacing-lg);
	padding-top: var(--spacing-md);
	border-top: 1px solid var(--color-border);
}

/* Legal page responsive */
@media (max-width: 768px) {
	.legal-page {
		padding-top: 70px;
	}

	.legal-content {
		padding: var(--spacing-lg) var(--spacing-sm);
	}

	.legal-section h2 {
		font-size: 1.4rem;
	}

	.legal-section h3 {
		font-size: 1.2rem;
	}

	.legal-section p {
		font-size: 0.95rem;
	}
}