/* =============================================
LA VILLA DE LA PLAGE — Modern Redesign
============================================= */
/* --- Custom Properties --- */
:root {
--color-primary: #3a5068;
--color-primary-light: #4a6a88;
--color-accent: #c4a265;
--color-accent-dark: #a88845;
--color-sand: #f5ead9;
--color-teal: #9ec5ca;
--color-teal-dark: #6fa9b1;
--color-bg: #f8f6f5;
--color-bg-warm: #f3f0ed;
--color-bg-dark: #1a2a3a;
--color-text: #3a5068;
--color-text-light: #6b7b8b;
--color-text-inverse: #f5ead9;
--color-border: #e0dbd3;
--font-heading: 'Cormorant Garamond', Georgia, serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 2rem;
--space-lg: 4rem;
--space-xl: 6rem;
--space-2xl: 8rem;
--container-max: 1200px;
--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* --- Reset & Base --- */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
background: var(--color-bg-dark);
}
body {
font-family: var(--font-body);
color: var(--color-text);
background-color: var(--color-bg);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
transition: color var(--transition);
}
ul {
list-style: none;
}
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-md);
}
/* --- Navigation --- */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: var(--space-sm) 0;
transition: all var(--transition);
}
.nav--scrolled {
background: rgba(250, 249, 247, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 1px 0 var(--color-border);
}
.nav--scrolled .nav__link {
color: var(--color-text);
}
.nav--scrolled .nav__logo-img {
filter: none;
}
.nav__container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-md);
display: flex;
align-items: center;
justify-content: space-between;
}
.nav__logo-img {
height: 50px;
width: auto;
filter: brightness(0) invert(1);
transition: filter var(--transition);
}
.nav__menu {
display: flex;
gap: var(--space-md);
align-items: center;
}
.nav__link {
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.9);
position: relative;
padding: var(--space-xs) 0;
}
.nav__link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background: var(--color-accent);
transition: width var(--transition);
}
.nav__link:hover::after,
.nav__link--active::after {
width: 100%;
}
.nav__toggle {
display: none;
flex-direction: column;
gap: 6px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 4px;
cursor: pointer;
padding: 10px;
z-index: 1001;
transition: all var(--transition);
}
.nav__toggle:active {
transform: scale(0.95);
}
.nav--scrolled .nav__toggle {
background: rgba(0, 0, 0, 0.05);
border-color: var(--color-border);
}
.nav__toggle span {
display: block;
width: 22px;
height: 2.5px;
background: #fff;
border-radius: 2px;
transition: all var(--transition);
}
.nav--scrolled .nav__toggle span {
background: var(--color-text);
}
/* Hamburger → X animation */
.nav__toggle--open span:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.nav__toggle--open span:nth-child(2) {
opacity: 0;
}
.nav__toggle--open span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
/* --- Hero with Video --- */
/* --- Hero (Option C — titre géant + stats bar) --- */
.hero {
position: relative;
height: 100vh;
height: 100dvh;
min-height: 600px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(15, 30, 46, 0.4) 0%,
rgba(15, 30, 46, 0.1) 35%,
rgba(15, 30, 46, 0.1) 65%,
rgba(15, 30, 46, 0.5) 100%
);
}
.hero__content {
position: relative;
z-index: 1;
flex: 1;
text-align: center;
color: #fff;
padding: 0 var(--space-md);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(1.5rem, 4vh, 3rem);
}
.hero__subtitle {
display: inline-block;
font-family: var(--font-body);
font-size: clamp(0.72rem, 1.75vw, 0.95rem);
font-weight: 500;
font-style: italic;
letter-spacing: clamp(0.1em, 0.5vw, 0.15em);
text-transform: uppercase;
background: var(--color-sand);
color: var(--color-primary);
padding: 0.4rem 1rem;
margin: 0;
white-space: nowrap;
opacity: 0;
animation: fadeUp 1s ease 0.3s forwards;
}
.hero__title,
.hero__brand {
font-family: var(--font-heading);
font-size: clamp(3rem, 11vw, 9rem);
font-weight: 300;
line-height: 1.0;
letter-spacing: -0.02em;
margin: 0;
opacity: 0;
animation: fadeUp 1s ease 0.5s forwards;
}
.hero__h1 {
font-family: var(--font-body);
font-size: clamp(0.95rem, 2vw, 1.25rem);
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.92);
max-width: 720px;
margin: 0.6rem 0 0.4rem;
padding: 0 1rem;
opacity: 0;
animation: fadeUp 1s ease 0.7s forwards;
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}
.hero__cta {
display: inline-block;
font-size: clamp(0.7rem, 1.5vw, 0.85rem);
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: clamp(0.7rem, 1.5vh, 1rem) clamp(1.5rem, 4vw, 2.5rem);
border: 1px solid rgba(255, 255, 255, 0.6);
color: #fff;
margin-top: clamp(4rem, 12vh, 9rem);
transition: all var(--transition);
opacity: 0;
animation: fadeUp 1s ease 0.7s forwards;
}
.hero__cta:hover {
background: #fff;
color: var(--color-primary);
border-color: #fff;
}
/* Scroll hint between CTA and stats bar */
.hero__scroll-hint {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
padding: 0.8rem 1.2rem;
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
cursor: pointer;
transition: color 0.3s ease;
}
.hero__scroll-hint:hover {
color: var(--color-sand);
}
.hero__scroll-text {
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
animation: fadeOpacity 2.5s ease-in-out infinite;
}
.hero__scroll-chevrons {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.1rem;
height: 36px;
}
.hero__scroll-chevrons svg {
width: 18px;
height: 18px;
opacity: 0;
animation: chevronFall 2s cubic-bezier(.77, 0, .18, 1) infinite;
}
.hero__scroll-chevrons svg:nth-child(1) { animation-delay: 0s; }
.hero__scroll-chevrons svg:nth-child(2) { animation-delay: 0.2s; }
.hero__scroll-chevrons svg:nth-child(3) { animation-delay: 0.4s; }
@keyframes chevronFall {
0% { opacity: 0; transform: translateY(-8px); }
40% { opacity: 1; }
80% { opacity: 0; transform: translateY(10px); }
100% { opacity: 0; transform: translateY(10px); }
}
@keyframes fadeOpacity {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
/* Stats bar at bottom of hero */
.hero__stats-bar {
position: relative;
z-index: 1;
width: 100%;
display: flex;
justify-content: center;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid rgba(255, 255, 255, 0.12);
opacity: 0;
animation: fadeUp 1s ease 0.9s forwards;
}
.hero__stat-block {
flex: 1;
max-width: 280px;
text-align: center;
padding: clamp(0.8rem, 2.5vh, 1.5rem) 0.6rem;
border-right: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.hero__stat-block:last-child {
border-right: none;
}
.hero__stat-num {
display: block;
font-family: var(--font-heading);
font-size: clamp(1.6rem, 3.5vw, 2.5rem);
font-weight: 300;
line-height: 1;
margin-bottom: 0.4rem;
white-space: nowrap; /* évite "2 500" sur 2 lignes */
}
.hero__stat-label {
display: flex;
align-items: flex-start;
justify-content: center;
font-size: clamp(0.5rem, 1.2vw, 0.65rem);
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0.6;
line-height: 1.3;
min-height: 2.6em; /* 2 lignes — même hauteur pour tous les blocs */
}
/* Wave effect on buttons hover */
.hero__cta,
.btn,
.pricing__cta,
.cta-banner__btn,
.form__submit {
position: relative;
overflow: visible;
}
.hero__cta::before,
.btn::before,
.pricing__cta::before,
.cta-banner__btn::before,
.form__submit::before {
content: '';
position: absolute;
bottom: -10px;
left: -10%;
width: 120%;
height: 10px;
background: var(--color-accent);
mask-image: url('data:image/svg+xml,');
-webkit-mask-image: url('data:image/svg+xml,');
mask-size: 200% 100%;
-webkit-mask-size: 200% 100%;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.hero__cta::after,
.btn::after,
.pricing__cta::after,
.cta-banner__btn::after,
.form__submit::after {
content: '';
position: absolute;
bottom: -16px;
left: -10%;
width: 120%;
height: 10px;
background: var(--color-accent);
mask-image: url('data:image/svg+xml,');
-webkit-mask-image: url('data:image/svg+xml,');
mask-size: 200% 100%;
-webkit-mask-size: 200% 100%;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.hero__cta:hover::before,
.btn:hover::before,
.pricing__cta:hover::before,
.cta-banner__btn:hover::before,
.form__submit:hover::before {
opacity: 0.6;
animation: waves 6s linear infinite;
}
.hero__cta:hover::after,
.btn:hover::after,
.pricing__cta:hover::after,
.cta-banner__btn:hover::after,
.form__submit:hover::after {
opacity: 0.3;
animation: wavesReverse 4s linear infinite;
}
@keyframes waves {
0% { mask-position: 0 0; -webkit-mask-position: 0 0; }
100% { mask-position: 200% 0; -webkit-mask-position: 200% 0; }
}
@keyframes wavesReverse {
0% { mask-position: 200% 0; -webkit-mask-position: 200% 0; }
100% { mask-position: 0 0; -webkit-mask-position: 0 0; }
}
.hero__scroll {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
color: rgba(255, 255, 255, 0.7);
font-size: 0.65rem;
letter-spacing: 0.2em;
text-transform: uppercase;
z-index: 1;
animation: heroScroll 3s ease-in-out infinite;
}
.hero__scroll-line {
font-size: 1.8rem;
line-height: 1;
}
@keyframes heroScroll {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-15px); }
}
/* --- Sections --- */
.section {
padding: var(--space-2xl) 0;
}
.section--maison {
background: var(--color-bg);
}
.section--chambres {
background: var(--color-bg-warm);
}
.section--tarifs {
background: var(--color-bg);
}
.section--conditions {
background: var(--color-bg-warm);
}
.section--reservation {
background: var(--color-bg);
}
.section--decouvrir {
background: var(--color-bg-warm);
}
.section--contact {
background: var(--color-bg);
}
.section--villa-overview {
background: var(--color-bg);
}
.section--living-spaces {
background: var(--color-bg-warm);
}
.section--villa-bedrooms {
background: var(--color-bg);
}
.section--intro {
background: var(--color-bg);
}
.section--gallery {
background: var(--color-bg-warm);
}
.section--tarifs-preview {
background: var(--color-bg);
}
/* --- Video Button & Modal --- */
.video-btn {
margin-top: 1.5rem;
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.9rem 1.8rem;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
color: #fff;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s cubic-bezier(.165, .84, .44, 1);
}
.video-btn:hover {
background: var(--color-accent);
border-color: var(--color-accent);
transform: translateY(-2px);
}
.video-btn__icon {
flex-shrink: 0;
}
.video-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0s 0.3s;
}
.video-modal--open {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease;
}
.video-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
cursor: pointer;
}
.video-modal__content {
position: relative;
width: 90vw;
max-width: 1100px;
transform: scale(0.95);
transition: transform 0.3s ease;
}
.video-modal--open .video-modal__content {
transform: scale(1);
}
.video-modal__iframe-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.video-modal__iframe-wrap iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.video-modal__close {
position: absolute;
top: -50px;
right: 0;
background: none;
border: none;
color: #fff;
font-size: 2.5rem;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s;
line-height: 1;
padding: 0 0.5rem;
}
.video-modal__close:hover {
opacity: 1;
}
@media (max-width: 768px) {
.video-btn {
font-size: 0.7rem;
padding: 0.75rem 1.4rem;
}
.video-modal__content {
width: 95vw;
}
.video-modal__close {
top: -40px;
font-size: 2rem;
}
}
/* --- Tarifs Liste horizontale (page tarifs) --- */
.pricing-list {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 900px;
margin: 0 auto;
}
.pricing-row {
display: grid;
grid-template-columns: 1.3fr 1fr 2fr auto;
gap: 2rem;
align-items: center;
padding: 1.6rem 2rem;
background: #fff;
border: 1px solid var(--color-border);
border-radius: 8px;
transition: all 0.4s cubic-bezier(.165, .84, .44, 1);
}
.pricing-row:hover {
border-color: var(--color-accent);
transform: translateX(6px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
.pricing-row--featured {
border-color: var(--color-accent);
background: var(--color-sand);
}
.pricing-row__season {
font-family: var(--font-heading);
font-size: 1.4rem;
font-weight: 500;
color: var(--color-primary);
margin: 0 0 0.2rem;
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.pricing-row__badge {
font-family: var(--font-body);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #fff;
background: var(--color-accent);
padding: 0.2rem 0.6rem;
border-radius: 3px;
}
.pricing-row__period {
font-size: 0.78rem;
color: var(--color-text-light);
margin: 0;
}
.pricing-row__price {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.pricing-row__amount {
font-family: var(--font-heading);
font-size: 2.4rem;
font-weight: 300;
color: var(--color-accent);
line-height: 1;
}
.pricing-row__unit {
font-size: 0.75rem;
color: var(--color-text-light);
margin-top: 0.2rem;
}
.pricing-row__includes {
font-size: 0.8rem;
color: var(--color-text-light);
line-height: 1.7;
}
.pricing-row__cta {
padding: 0.9rem 1.8rem;
background: var(--color-primary);
color: #fff;
text-decoration: none;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
border-radius: 4px;
white-space: nowrap;
transition: all 0.3s;
}
.pricing-row__cta:hover {
background: var(--color-accent);
color: #fff;
}
@media (max-width: 900px) {
.pricing-row {
grid-template-columns: 1fr;
text-align: left;
gap: 0.8rem;
padding: 1.5rem;
}
.pricing-row:hover {
transform: none;
}
.pricing-row__price {
flex-direction: row;
align-items: baseline;
gap: 0.4rem;
}
.pricing-row__cta {
text-align: center;
}
}
/* --- Tarifs Glassmorphism (page tarifs) --- */
.section--tarifs-glass {
background: linear-gradient(135deg, var(--color-primary) 0%, #2a3d52 100%);
position: relative;
}
.section--tarifs-glass::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(196, 162, 101, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(158, 197, 202, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.section--tarifs-glass > * {
position: relative;
z-index: 1;
}
.section--tarifs-glass .section__tag {
background: rgba(245, 234, 217, 0.15);
color: var(--color-sand);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.section--tarifs-glass .section__title {
color: #fff;
}
.section--tarifs-glass .section__intro {
color: rgba(255, 255, 255, 0.7);
}
.pricing--glass {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-bottom: var(--space-xl);
}
.pricing--glass .pricing__card {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 16px;
padding: 2.5rem 2rem;
color: #fff;
text-align: center;
position: relative;
transition: all 0.4s cubic-bezier(.165, .84, .44, 1);
transform: none;
}
.pricing--glass .pricing__card:hover {
background: rgba(255, 255, 255, 0.12);
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.pricing--glass .pricing__card--featured {
background: rgba(196, 162, 101, 0.15);
border-color: var(--color-accent);
transform: none;
}
.pricing--glass .pricing__card--featured:hover {
background: rgba(196, 162, 101, 0.2);
transform: translateY(-4px);
}
.pricing--glass .pricing__badge {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background: var(--color-accent);
color: #fff;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 0.3rem 1rem;
border-radius: 20px;
}
.pricing--glass .pricing__season {
font-family: var(--font-heading);
font-size: 1.6rem;
font-weight: 400;
color: #fff;
margin-bottom: 0.3rem;
}
.pricing--glass .pricing__period {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 1.8rem;
}
.pricing--glass .pricing__price {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.4rem;
padding: 1.4rem 0;
margin-bottom: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.pricing--glass .pricing__amount {
font-family: var(--font-heading);
font-size: 3.2rem;
font-weight: 300;
color: var(--color-accent);
line-height: 1;
}
.pricing--glass .pricing__unit {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.7);
display: inline;
margin-top: 0;
}
.pricing--glass .pricing__includes {
text-align: left;
margin-bottom: 1.8rem;
padding: 0;
}
.pricing--glass .pricing__includes li {
padding: 0.4rem 0 0.4rem 1.5rem;
position: relative;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.85);
border: none;
}
.pricing--glass .pricing__includes li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--color-accent);
font-weight: 600;
background: none;
width: auto;
height: auto;
border-radius: 0;
top: 0.4rem;
transform: none;
}
.pricing--glass .pricing__cta {
display: block;
width: 100%;
padding: 1rem;
background: var(--color-accent);
color: #fff;
border: none;
border-radius: 8px;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
transition: all 0.3s;
}
.pricing--glass .pricing__cta:hover {
background: #fff;
color: var(--color-primary);
}
.pricing--glass .pricing__card--featured .pricing__cta {
background: #fff;
color: var(--color-primary);
}
.pricing--glass .pricing__card--featured .pricing__cta:hover {
background: var(--color-accent);
color: #fff;
}
@media (max-width: 1024px) {
.pricing--glass {
grid-template-columns: 1fr;
max-width: 450px;
margin-left: auto;
margin-right: auto;
}
}
/* --- Year Calendar (tarifs preview) --- */
.year-calendar {
max-width: 900px;
margin: 0 auto;
background: #fff;
border: 1px solid var(--color-border);
border-radius: 12px;
padding: var(--space-md);
}
.year-calendar--tarifs {
margin-top: var(--space-lg);
}
.year-calendar__title {
text-align: center;
margin-bottom: var(--space-md);
}
.year-calendar__label {
display: inline-block;
font-size: 0.7rem;
font-weight: 500;
font-style: italic;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-primary);
background: var(--color-sand);
padding: 0.3rem 0.9rem;
margin-bottom: 0.6rem;
}
.year-calendar__title h3 {
font-family: var(--font-heading);
font-size: clamp(1.4rem, 2.5vw, 1.9rem);
font-weight: 400;
color: var(--color-primary);
margin: 0;
}
.year-calendar__months {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 0.35rem;
margin-bottom: var(--space-md);
}
.year-calendar__month {
padding: 1.3rem 0.3rem;
text-align: center;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 6px;
color: var(--color-primary);
transition: transform 0.3s ease;
}
.year-calendar__month--low {
background: rgba(158, 197, 202, 0.3);
}
.year-calendar__month--mid {
background: rgba(245, 234, 217, 0.85);
}
.year-calendar__month--high {
background: rgba(220, 120, 80, 0.3);
}
.year-calendar__month:hover {
transform: scale(1.05);
}
.year-calendar__legend {
display: flex;
justify-content: center;
gap: var(--space-sm);
flex-wrap: wrap;
}
.year-calendar__season {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: 1rem 1.5rem;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 10px;
min-width: 240px;
flex: 1;
}
.year-calendar__dot {
width: 16px;
height: 16px;
border-radius: 50%;
flex-shrink: 0;
}
.year-calendar__dot--low {
background: rgba(158, 197, 202, 0.7);
}
.year-calendar__dot--mid {
background: rgba(245, 234, 217, 1);
border: 1px solid var(--color-accent);
}
.year-calendar__dot--high {
background: rgba(220, 120, 80, 0.85);
}
.year-calendar__info {
display: flex;
flex-direction: column;
}
.year-calendar__name {
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 500;
color: var(--color-primary);
}
.year-calendar__price {
font-size: 0.85rem;
color: var(--color-accent);
font-weight: 600;
}
@media (max-width: 768px) {
.year-calendar {
padding: var(--space-sm);
}
.year-calendar__months {
grid-template-columns: repeat(6, 1fr);
gap: 0.3rem;
}
.year-calendar__month {
padding: 1rem 0.2rem;
font-size: 0.65rem;
}
.year-calendar__legend {
flex-direction: column;
gap: 0.5rem;
}
.year-calendar__season {
min-width: auto;
width: 100%;
padding: 0.8rem 1rem;
}
}
/* --- Compact sections for content-heavy pages (à découvrir) --- */
.section--restaurants,
.section--specialties,
.section--markets,
.section--hiking,
.section--golf,
.section--nautique,
.section--nearby,
.section--webcam {
padding: var(--space-lg) 0;
}
.section--restaurants .section__header,
.section--specialties .section__header,
.section--markets .section__header,
.section--hiking .section__header,
.section--golf .section__header,
.section--nautique .section__header,
.section--nearby .section__header,
.section--webcam .section__header {
margin-bottom: var(--space-lg);
}
.section--restaurants {
background: var(--color-bg);
}
.section--specialties {
background: var(--color-bg-warm);
}
.section--markets {
background: var(--color-bg);
}
.section--hiking {
background: var(--color-bg-warm);
}
.section--golf {
background: var(--color-bg);
}
.section--nearby {
background: var(--color-bg-warm);
}
.section--map {
background: var(--color-bg-warm);
}
/* --- Section CTA & Buttons --- */
.section__cta {
text-align: center;
margin-top: var(--space-lg);
}
.btn {
display: inline-block;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 1rem 2.5rem;
border: 1px solid var(--color-primary);
color: var(--color-primary);
transition: all var(--transition);
}
.btn:hover {
background: var(--color-primary);
color: #fff;
}
.link-arrow {
display: inline-block;
font-size: 0.9rem;
font-weight: 500;
color: var(--color-accent);
transition: all var(--transition);
padding: var(--space-xs) 0;
border-bottom: 1px solid transparent;
}
.link-arrow:hover {
border-bottom-color: var(--color-accent);
}
/* --- Contact Map --- */
.contact__map {
margin-top: var(--space-sm);
border: 1px solid var(--color-border);
overflow: hidden;
}
.contact__map iframe {
display: block;
}
/* --- Access Details --- */
.access-details h4 {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 0.3rem;
margin-top: var(--space-sm);
}
.access-details h4:first-child {
margin-top: 0;
}
.access-details p {
font-size: 0.9rem;
color: var(--color-text-light);
line-height: 1.7;
}
.access-details .gps {
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--color-text-light);
background: var(--color-bg);
padding: 0.5rem 0.8rem;
border: 1px solid var(--color-border);
display: inline-block;
margin-bottom: var(--space-sm);
}
.section__header {
text-align: center;
max-width: 700px;
margin: 0 auto var(--space-xl);
}
.section__tag {
display: inline-block;
font-size: 0.8rem;
font-weight: 500;
font-style: italic;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-primary);
background: var(--color-sand);
padding: 0.25rem 0.9rem;
margin-bottom: var(--space-sm);
}
.section__title {
font-family: var(--font-heading);
font-size: clamp(2.2rem, 4.5vw, 3.8rem);
font-weight: 300;
color: var(--color-primary);
line-height: 1.15;
margin-bottom: var(--space-md);
}
.section__intro {
font-size: 1.05rem;
color: var(--color-text-light);
line-height: 1.8;
}
/* --- Features (original icon style) --- */
.features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
margin-bottom: var(--space-xl);
}
.feature {
text-align: center;
padding: var(--space-lg) var(--space-md);
border: 1px solid var(--color-border);
transition: all var(--transition);
}
.feature:hover {
border-color: var(--color-accent);
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}
.feature__icon {
color: var(--color-accent);
margin-bottom: var(--space-md);
}
.feature__title {
font-family: var(--font-heading);
font-size: 1.3rem;
font-weight: 500;
color: var(--color-primary);
margin-bottom: var(--space-xs);
}
.feature__text {
font-size: 0.9rem;
color: var(--color-text-light);
}
/* --- Features with photos --- */
.features-photo {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-sm);
}
.feature-photo {
position: relative;
overflow: hidden;
display: block;
text-decoration: none;
aspect-ratio: 4 / 3;
}
.feature-photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.9s cubic-bezier(.165, .84, .44, 1);
}
.feature-photo:hover img {
transform: scale(1.1);
}
.feature-photo__overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: var(--space-md);
background: linear-gradient(0deg, rgba(26, 42, 58, 0.9) 0%, rgba(26, 42, 58, 0.4) 60%, transparent 100%);
transition: background 0.6s cubic-bezier(.165, .84, .44, 1);
z-index: 1;
}
.feature-photo:hover .feature-photo__overlay {
background: linear-gradient(0deg, rgba(26, 42, 58, 0.95) 0%, rgba(26, 42, 58, 0.55) 60%, rgba(26, 42, 58, 0.15) 100%);
}
.feature-photo__title {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 400;
color: #fff;
margin-bottom: 0.3rem;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.feature-photo__text {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.5;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
/* --- Gallery with real images --- */
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
gap: var(--space-sm);
margin-bottom: var(--space-xl);
}
.gallery__item {
overflow: hidden;
position: relative;
}
.gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.9s cubic-bezier(.165, .84, .44, 1);
}
.gallery__item {
cursor: zoom-in;
}
.gallery__item::after {
content: '';
position: absolute;
inset: 0;
background: var(--color-primary);
opacity: 0;
transition: opacity 0.9s cubic-bezier(.165, .84, .44, 1);
pointer-events: none;
}
/* Zoom icon on hover */
.gallery__item::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.8);
width: 44px;
height: 44px;
border: 2px solid #fff;
border-radius: 50%;
background: url('data:image/svg+xml,') center/20px no-repeat;
opacity: 0;
z-index: 3;
transition: all 0.4s ease;
pointer-events: none;
}
.gallery__item:hover::before {
opacity: 0.9;
transform: translate(-50%, -50%) scale(1);
}
.gallery__item:hover img {
transform: scale(1.1);
}
.gallery__item:hover::after {
opacity: 0.25;
}
/* Same for gallery-row items */
.gallery-row__item {
cursor: zoom-in;
position: relative;
}
.gallery-row__item::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.8);
width: 44px;
height: 44px;
border: 2px solid #fff;
border-radius: 50%;
background: url('data:image/svg+xml,') center/20px no-repeat;
opacity: 0;
z-index: 3;
transition: all 0.4s ease;
pointer-events: none;
}
.gallery-row__item::after {
content: '';
position: absolute;
inset: 0;
background: var(--color-primary);
opacity: 0;
transition: opacity 0.9s cubic-bezier(.165, .84, .44, 1);
pointer-events: none;
}
.gallery-row__item:hover::before {
opacity: 0.9;
transform: translate(-50%, -50%) scale(1);
}
.gallery-row__item:hover::after {
opacity: 0.2;
}
.gallery__item--large {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.gallery__item--large img {
min-height: 100%;
}
.gallery__item:not(.gallery__item--large) img {
height: 250px;
}
/* --- Details (alternating image/text) --- */
.details {
display: flex;
flex-direction: column;
gap: var(--space-xl);
}
.details__item {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
align-items: center;
}
.details__item--reverse {
direction: rtl;
}
.details__item--reverse > * {
direction: ltr;
}
.details__item img {
width: 100%;
height: 350px;
object-fit: cover;
}
.details__text h3 {
font-family: var(--font-heading);
font-size: 1.8rem;
font-weight: 400;
color: var(--color-primary);
margin-bottom: var(--space-sm);
}
.details__text p {
font-size: 1rem;
color: var(--color-text-light);
line-height: 1.8;
}
/* --- Rooms with real images --- */
.rooms {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.room {
display: flex;
flex-direction: column;
border: 1px solid var(--color-border);
overflow: hidden;
transition: all var(--transition);
background: var(--color-bg);
}
.room:hover {
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
transform: translateY(-2px);
}
.room__image {
height: 250px;
overflow: hidden;
}
.room__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.room__image img {
transition: transform 0.9s cubic-bezier(.165, .84, .44, 1);
}
.room:hover .room__image img {
transform: scale(1.1);
}
/* --- Flip effect on hover (rooms & spaces) --- */
.room__image--flip,
.space-card__image--flip {
position: relative;
}
.room__image--flip .room__img-front,
.room__image--flip .room__img-back,
.space-card__image--flip .room__img-front,
.space-card__image--flip .room__img-back {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.5s ease, transform 0.6s ease;
}
.room__image--flip .room__img-back,
.space-card__image--flip .room__img-back {
position: absolute;
inset: 0;
opacity: 0;
}
.room__image--flip:hover .room__img-front,
.space-card__image--flip:hover .room__img-front {
opacity: 0;
}
.room__image--flip:hover .room__img-back,
.space-card__image--flip:hover .room__img-back {
opacity: 1;
transform: scale(1.03);
}
.room__flip-hint {
position: absolute;
bottom: 0.6rem;
right: 0.6rem;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.05em;
color: #fff;
background: rgba(0, 0, 0, 0.45);
padding: 0.25rem 0.6rem;
opacity: 0.7;
transition: opacity var(--transition);
pointer-events: none;
z-index: 1;
}
.room__image--flip:hover .room__flip-hint {
opacity: 0;
}
.room__info {
padding: var(--space-md);
}
.room__name {
font-family: var(--font-heading);
font-size: 1.4rem;
font-weight: 500;
color: var(--color-primary);
margin-bottom: var(--space-xs);
}
.room__desc {
font-size: 0.9rem;
color: var(--color-text-light);
margin-bottom: var(--space-sm);
line-height: 1.7;
}
.room__amenities {
display: flex;
gap: var(--space-sm);
flex-wrap: wrap;
}
.room__amenities li {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-accent);
padding: 0.3rem 0.8rem;
border: 1px solid var(--color-accent);
}
/* --- Bathroom row : 3 colonnes, hauteur uniforme (ratio 3/2) --- */
.bathroom-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
}
/* Cas 2 cartes seules : 2 colonnes */
.bathroom-row:has(> .bathroom-card:nth-child(2):last-child) {
grid-template-columns: 1fr 1fr;
}
.bathroom-card {
overflow: hidden;
border: 1px solid var(--color-border);
display: flex;
flex-direction: column;
}
.bathroom-card img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
object-position: center 35%; /* favorise le haut sur la photo portrait */
}
.bathroom-card p {
padding: var(--space-sm) var(--space-md);
font-family: var(--font-heading);
font-size: 1.1rem;
color: var(--color-primary);
text-align: center;
margin: 0;
}
/* Tablette / petits écrans : 1 colonne empilée, image plus généreuse */
@media (max-width: 900px) {
.bathroom-row,
.bathroom-row:has(> .bathroom-card:nth-child(2):last-child) {
grid-template-columns: 1fr;
}
.bathroom-card img { aspect-ratio: 16 / 10; }
}
/* --- Photo Banner --- */
.photo-banner {
position: relative;
height: 50vh;
min-height: 350px;
overflow: hidden;
}
.photo-banner img {
width: 100%;
height: 100%;
object-fit: cover;
}
.photo-banner__overlay {
position: absolute;
inset: 0;
background: rgba(15, 30, 46, 0.5);
display: flex;
align-items: center;
justify-content: center;
}
.quote {
text-align: center;
}
.quote p {
font-family: var(--font-heading);
font-size: clamp(1.5rem, 3vw, 2.5rem);
font-weight: 300;
font-style: italic;
color: #fff;
opacity: 0.95;
}
/* --- Pricing --- */
.pricing {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
margin-bottom: var(--space-xl);
}
.pricing__card {
background: var(--color-bg-warm);
padding: var(--space-lg);
text-align: center;
border: 1px solid var(--color-border);
position: relative;
transition: all var(--transition);
}
.pricing__card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.pricing__card--featured {
background: var(--color-primary);
color: var(--color-text-inverse);
border-color: var(--color-primary);
transform: scale(1.04);
}
.pricing__card--featured:hover {
transform: scale(1.04) translateY(-4px);
}
.pricing__badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--color-accent);
color: #fff;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 0.3rem 1.2rem;
}
.pricing__season {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 500;
margin-bottom: var(--space-xs);
}
.pricing__period {
font-size: 0.85rem;
opacity: 0.7;
margin-bottom: var(--space-md);
}
.pricing__price {
margin-bottom: var(--space-md);
padding: var(--space-md) 0;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.pricing__card--featured .pricing__price {
border-color: rgba(255, 255, 255, 0.2);
}
.pricing__amount {
font-family: var(--font-heading);
font-size: 3rem;
font-weight: 300;
}
.pricing__unit {
display: block;
font-size: 0.85rem;
margin-top: var(--space-xs);
opacity: 0.7;
}
.pricing__includes {
margin-bottom: var(--space-md);
text-align: left;
}
.pricing__includes li {
font-size: 0.9rem;
padding: var(--space-xs) 0;
border-bottom: 1px solid var(--color-border);
position: relative;
padding-left: 1.5rem;
}
.pricing__card--featured .pricing__includes li {
border-color: rgba(255, 255, 255, 0.1);
}
.pricing__includes li::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-accent);
}
.pricing__cta {
display: inline-block;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 0.9rem 2rem;
border: 1px solid currentColor;
transition: all var(--transition);
}
.pricing__card--featured .pricing__cta {
border-color: rgba(255, 255, 255, 0.5);
color: #fff;
}
.pricing__card--featured .pricing__cta:hover {
background: #fff;
color: var(--color-primary);
border-color: #fff;
}
.pricing__cta:hover {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
/* --- Conditions --- */
.conditions {
text-align: center;
}
.conditions h3 {
font-family: var(--font-heading);
font-size: 1.4rem;
font-weight: 500;
color: var(--color-primary);
margin-bottom: var(--space-md);
}
.conditions__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-sm);
}
.conditions__item {
padding: var(--space-md);
border: 1px solid var(--color-border);
}
.conditions__item strong {
display: block;
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--space-xs);
}
.conditions__item p {
font-size: 0.9rem;
color: var(--color-text-light);
}
.conditions__details {
max-width: 800px;
margin: var(--space-lg) auto 0;
padding: var(--space-md);
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 4px;
font-size: 0.95rem;
line-height: 1.8;
color: var(--color-text-light);
text-align: left;
}
/* --- Booking Widget --- */
.booking-widget {
max-width: 900px;
margin: 0 auto var(--space-lg);
}
.booking-widget iframe {
display: block;
border-radius: 4px;
}
.booking-fallback {
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.booking-fallback p {
margin-bottom: var(--space-sm);
color: var(--color-text-light);
}
.booking-fallback a:not(.pricing__cta) {
color: var(--color-primary);
font-weight: 500;
}
.booking-fallback a:not(.pricing__cta):hover {
color: var(--color-accent);
}
.booking-fallback .pricing__cta {
margin-top: var(--space-md);
}
/* --- Discover with images --- */
.discover {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-sm);
margin-bottom: var(--space-lg);
}
.discover__card--with-image {
padding: 0;
overflow: hidden;
}
.discover__card--with-image img {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 0.6s ease;
}
.discover__card--with-image:hover img {
transform: scale(1.05);
}
.discover__card-content {
padding: var(--space-md);
}
.discover__card {
background: var(--color-bg);
border: 1px solid var(--color-border);
transition: all var(--transition);
}
.discover__card:hover {
border-color: var(--color-accent);
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}
.discover__card h3 {
font-family: var(--font-heading);
font-size: 1.3rem;
font-weight: 500;
color: var(--color-primary);
margin-bottom: var(--space-sm);
}
.discover__card p {
font-size: 0.9rem;
color: var(--color-text-light);
line-height: 1.7;
}
/* --- Specialties --- */
.specialties {
text-align: center;
}
.specialties__title {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 400;
color: var(--color-primary);
margin-bottom: var(--space-md);
}
.specialties__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-xs);
}
.specialties__list span {
display: inline-block;
font-size: 0.85rem;
font-weight: 400;
color: var(--color-text-light);
padding: 0.5rem 1.2rem;
border: 1px solid var(--color-border);
transition: all var(--transition);
}
.specialties__list span:hover {
border-color: var(--color-accent);
color: var(--color-accent);
}
/* --- Contact --- */
.contact {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: var(--space-xl);
align-items: start;
}
.contact__detail {
margin-bottom: var(--space-md);
}
.contact__detail h3 {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--space-xs);
}
.contact__detail p {
font-size: 0.95rem;
color: var(--color-text-light);
line-height: 1.8;
}
.contact__detail a:hover {
color: var(--color-accent);
}
.contact__booking-link {
display: inline-block;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.7rem 1.5rem;
border: 1px solid var(--color-accent);
color: var(--color-accent);
transition: all var(--transition);
margin-top: 0.3rem;
}
.contact__booking-link:hover {
background: var(--color-accent);
color: #fff;
}
.contact__social {
display: flex;
gap: var(--space-sm);
margin-top: var(--space-md);
margin-bottom: var(--space-md);
}
.contact__social a {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid var(--color-border);
color: var(--color-text-light);
transition: all var(--transition);
}
.contact__social a:hover {
border-color: var(--color-accent);
color: var(--color-accent);
}
.contact__map {
margin-top: var(--space-sm);
border: 1px solid var(--color-border);
overflow: hidden;
}
.contact__map iframe {
display: block;
}
/* --- Form --- */
.contact__form {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-sm);
}
.form__group {
display: flex;
flex-direction: column;
}
.form__group label {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-light);
margin-bottom: var(--space-xs);
}
.form__group input,
.form__group textarea,
.form__group select {
font-family: var(--font-body);
font-size: 0.95rem;
padding: 0.9rem 1rem;
border: 1px solid var(--color-border);
background: var(--color-bg-warm);
color: var(--color-text);
transition: border-color var(--transition);
outline: none;
border-radius: 0;
-webkit-appearance: none;
}
.form__group select {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.5rem;
}
.form__group input:focus,
.form__group textarea:focus,
.form__group select:focus {
border-color: var(--color-accent);
}
.form__group textarea {
resize: vertical;
min-height: 120px;
}
.form__submit {
align-self: flex-start;
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 1rem 2.5rem;
background: var(--color-primary);
color: #fff;
border: 1px solid var(--color-primary);
cursor: pointer;
transition: all var(--transition);
}
.form__submit:hover {
background: transparent;
color: var(--color-primary);
}
/* --- Footer --- */
.footer {
background: var(--color-bg-dark);
color: var(--color-text-inverse);
padding: var(--space-xl) 0 var(--space-md);
position: relative;
}
.footer::before {
content: '';
position: absolute;
top: -25px;
left: 0;
right: 0;
height: 30px;
background: var(--color-sand);
mask-image: url('data:image/svg+xml,');
-webkit-mask-image: url('data:image/svg+xml,');
mask-size: 100% 100%;
-webkit-mask-size: 100% 100%;
}
.footer__content {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: var(--space-xl);
padding-bottom: var(--space-lg);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer__logo {
height: 45px;
width: auto;
filter: brightness(0) invert(1);
margin-bottom: var(--space-sm);
}
.footer__brand p {
font-size: 0.9rem;
opacity: 0.6;
line-height: 1.7;
}
.footer__owner {
margin-top: var(--space-xs);
font-style: italic;
}
.footer__links h4 {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: var(--space-md);
color: var(--color-accent);
}
.footer__links li {
margin-bottom: var(--space-xs);
}
.footer__links a {
font-size: 0.9rem;
opacity: 0.6;
transition: opacity var(--transition);
}
.footer__links a:hover {
opacity: 1;
}
.footer__seo-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.4rem 1.2rem;
padding: var(--space-md) 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
font-size: 0.78rem;
}
.footer__seo-links a {
opacity: 0.45;
transition: opacity var(--transition);
white-space: nowrap;
}
.footer__seo-links a:hover {
opacity: 0.85;
}
@media (max-width: 600px) {
.footer__seo-links { font-size: 0.72rem; gap: 0.3rem 0.9rem; }
}
.footer__bottom {
padding-top: var(--space-md);
text-align: center;
}
.footer__bottom p {
font-size: 0.8rem;
opacity: 0.4;
}
.footer__credits {
margin-top: var(--space-xs);
font-size: 0.7rem !important;
opacity: 0.3 !important;
}
/* --- Footer Partners & Picto --- */
.footer__partners {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xl);
padding: var(--space-lg) 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer__partner-logo {
height: 55px;
width: auto;
opacity: 0.7;
filter: brightness(0) invert(1);
transition: opacity var(--transition);
}
.footer__partner-logo:hover {
opacity: 1;
}
.footer__picto {
height: 35px;
width: auto;
margin: 0 auto var(--space-sm);
opacity: 0.4;
filter: brightness(0) invert(1);
}
/* --- Webcam --- */
.webcam-container {
max-width: 900px;
margin: 0 auto;
border: 1px solid var(--color-border);
overflow: hidden;
box-shadow: -15px -15px 0 0 var(--color-primary);
}
.webcam-container iframe {
display: block;
}
/* --- Contact Booking Widget --- */
.contact__booking-widget {
margin-bottom: var(--space-md);
}
.contact__booking-widget h3 {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--space-sm);
}
/* --- Specialties chips as links --- */
.specialties__list a,
.specialties__chip {
display: inline-block;
font-size: 0.85rem;
font-weight: 400;
color: var(--color-text-light);
padding: 0.5rem 1.2rem;
border: 1px solid var(--color-border);
transition: all var(--transition);
text-decoration: none;
}
.specialties__list a:hover,
.specialties__chip:hover {
border-color: var(--color-accent);
color: var(--color-accent);
}
/* --- Hike difficulty badge --- */
.hike-card__difficulty {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-light);
margin-bottom: var(--space-xs);
}
.hike-card__desc {
font-size: 0.9rem;
color: var(--color-text-light);
line-height: 1.7;
margin-top: var(--space-sm);
}
.hike-card__spoiler {
margin-top: var(--space-sm);
border-top: 1px solid var(--color-border);
}
.hike-card__spoiler summary {
cursor: pointer;
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.05em;
color: var(--color-accent);
padding: var(--space-xs) 0;
transition: color var(--transition);
list-style: none;
}
.hike-card__spoiler summary::-webkit-details-marker {
display: none;
}
.hike-card__spoiler summary::before {
content: '+ ';
}
.hike-card__spoiler[open] summary::before {
content: '− ';
}
.hike-card__spoiler summary:hover {
color: var(--color-primary);
}
.hike-card__spoiler p {
font-size: 0.85rem;
color: var(--color-text-light);
line-height: 1.7;
padding: var(--space-xs) 0 var(--space-xs);
}
/* --- Nautical activity cards --- */
.activity-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
}
.activity-card {
background: var(--color-bg);
border: 1px solid var(--color-border);
overflow: hidden;
transition: all var(--transition);
}
.activity-card:hover {
border-color: var(--color-accent);
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}
.activity-card__image {
height: 200px;
overflow: hidden;
}
.activity-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.activity-card:hover .activity-card__image img {
transform: scale(1.05);
}
.activity-card__content {
padding: var(--space-md);
}
.activity-card__content h3 {
font-family: var(--font-heading);
font-size: 1.3rem;
font-weight: 500;
color: var(--color-primary);
margin-bottom: var(--space-xs);
}
.activity-card__content p {
font-size: 0.9rem;
color: var(--color-text-light);
line-height: 1.7;
margin-bottom: var(--space-xs);
}
.activity-card__link {
display: inline-block;
font-size: 0.8rem;
font-weight: 500;
color: var(--color-accent);
margin-top: var(--space-xs);
transition: all var(--transition);
}
.activity-card__link:hover {
color: var(--color-primary);
}
.activity-card__phone {
font-size: 0.85rem;
color: var(--color-text-light);
}
/* --- Kerscuntec-inspired: decorative box shadows on key images --- */
.gallery__item--large {
box-shadow: -12px -12px 0 0 var(--color-primary);
}
.details__item img {
box-shadow: 12px 12px 0 0 rgba(26, 58, 92, 0.15);
transition: box-shadow var(--transition), transform 0.6s ease;
}
.details__item img:hover {
box-shadow: 12px 12px 0 0 var(--color-accent);
}
.hike-banner {
box-shadow: -10px -10px 0 0 var(--color-accent);
}
.golf-banner {
box-shadow: 10px -10px 0 0 var(--color-primary);
}
/* --- Section divider with warm bg --- */
.section--warm {
background: var(--color-bg-warm);
}
.section--webcam {
background: var(--color-bg-warm);
}
.section--nautique {
background: var(--color-bg-warm);
}
/* --- Page Header (subpages) --- */
.page-header {
position: relative;
min-height: max(55vh, 380px);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.page-header__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.page-header__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(15, 30, 46, 0.45) 0%,
rgba(15, 30, 46, 0.2) 40%,
rgba(15, 30, 46, 0.2) 60%,
rgba(15, 30, 46, 0.6) 100%
);
}
.page-header__content {
position: relative;
z-index: 1;
text-align: center;
color: #fff;
padding: var(--space-md);
max-width: 750px;
}
.page-header__tag {
display: inline-block;
font-size: clamp(0.78rem, 1.75vw, 1rem);
font-weight: 500;
font-style: italic;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-primary);
background: rgba(245, 234, 217, 0.85);
padding: 0.4rem 1rem;
margin-bottom: var(--space-sm);
}
.page-header__title {
font-family: var(--font-heading);
font-size: clamp(2.5rem, 6vw, 5rem);
font-weight: 300;
line-height: 1.15;
margin-bottom: var(--space-md);
}
.page-header__subtitle {
font-size: 1.05rem;
font-weight: 300;
line-height: 1.8;
opacity: 0.9;
}
/* --- Space Cards (living spaces grid) --- */
.space-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.space-card {
border: 1px solid var(--color-border);
overflow: hidden;
background: var(--color-bg);
transition: all var(--transition);
}
.space-card:hover {
border-color: var(--color-accent);
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}
.space-card__image {
height: 240px;
overflow: hidden;
}
.space-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.space-card:hover .space-card__image img {
transform: scale(1.05);
}
.space-card__content {
padding: var(--space-md);
}
.space-card__title {
font-family: var(--font-heading);
font-size: 1.4rem;
font-weight: 500;
color: var(--color-primary);
margin-bottom: var(--space-xs);
}
.space-card__text {
font-size: 0.9rem;
color: var(--color-text-light);
line-height: 1.7;
}
/* --- Gallery Row (3 images side by side) --- */
.gallery-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-sm);
margin-top: var(--space-lg);
}
.gallery-row__item {
overflow: hidden;
}
.gallery-row__item img {
width: 100%;
height: 250px;
object-fit: cover;
transition: transform 0.9s cubic-bezier(.165, .84, .44, 1);
}
.gallery-row__item:hover img {
transform: scale(1.1);
}
/* --- Page Mentions légales --- */
.section--legal {
padding-top: clamp(8rem, 14vh, 10rem);
padding-bottom: var(--space-xl);
}
.legal__title {
font-family: var(--font-heading);
font-size: clamp(2.2rem, 5vw, 3.2rem);
font-weight: 400;
color: var(--color-primary);
margin: 0 0 0.6rem;
line-height: 1.1;
}
.legal__intro {
font-size: 0.85rem;
color: #8a847c;
font-style: italic;
margin-bottom: var(--space-lg);
border-bottom: 1px solid #ece5d5;
padding-bottom: 0.8rem;
}
.section--legal h2 {
font-family: var(--font-heading);
font-size: clamp(1.4rem, 2.5vw, 1.8rem);
font-weight: 500;
color: var(--color-primary);
margin: 2.2rem 0 0.6rem;
line-height: 1.2;
}
.section--legal h3 {
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 500;
color: var(--color-primary);
margin: 1.4rem 0 0.4rem;
}
.section--legal p,
.section--legal li {
font-size: 0.95rem;
line-height: 1.65;
color: #4a4540;
}
.section--legal p { margin: 0 0 1rem; }
.section--legal ul {
margin: 0 0 1rem 1.2rem;
padding: 0;
}
.section--legal li { margin-bottom: 0.4rem; }
.section--legal a {
color: #c08557;
text-decoration: underline;
text-underline-offset: 2px;
}
.section--legal a:hover { color: var(--color-primary); }
/* --- Cookie banner RGPD (discret, coin bas-gauche) --- */
.cookie-banner {
position: fixed;
left: 1rem;
bottom: 1rem;
right: auto;
z-index: 9999;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(58, 80, 104, 0.12);
border-radius: 8px;
box-shadow: 0 6px 22px rgba(58, 80, 104, 0.12);
padding: 0.7rem 0.9rem;
max-width: 320px;
animation: cookieIn 0.35s cubic-bezier(.165, .84, .44, 1);
}
@keyframes cookieIn {
from { transform: translateY(12px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.cookie-banner__inner {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.cookie-banner__text strong { display: none; }
.cookie-banner__text p {
margin: 0;
font-size: 0.78rem;
line-height: 1.45;
color: #5a544c;
}
.cookie-banner__actions {
display: flex;
gap: 0.45rem;
justify-content: flex-end;
}
.cookie-banner__btn {
display: inline-block;
padding: 0.35rem 0.85rem;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.04em;
border-radius: 4px;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
border: 1px solid;
}
.cookie-banner__btn--refuse {
background: transparent;
color: #6a625a;
border-color: rgba(58, 80, 104, 0.2);
}
.cookie-banner__btn--refuse:hover {
color: var(--color-primary, #3a5068);
border-color: var(--color-primary, #3a5068);
}
.cookie-banner__btn--accept {
background: var(--color-primary, #3a5068);
color: #fff;
border-color: var(--color-primary, #3a5068);
}
.cookie-banner__btn--accept:hover {
background: #c08557;
border-color: #c08557;
}
@media (max-width: 600px) {
.cookie-banner { left: 0.6rem; right: 0.6rem; bottom: 5.5rem; max-width: none; padding: 0.65rem 0.85rem; }
}
/* --- Mid-page reservation CTA (sur les landings) --- */
.section--cta-mid {
padding: var(--space-lg) 0;
background: linear-gradient(180deg, #fafaf6 0%, #f5ede0 100%);
}
.cta-mid {
background: #fff;
border: 1px solid #ece5d5;
border-radius: 12px;
padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.8rem);
box-shadow: 0 18px 48px rgba(58, 80, 104, 0.1);
position: relative;
overflow: hidden;
}
.cta-mid::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 100% 0%, rgba(192, 133, 87, 0.08), transparent 60%);
pointer-events: none;
}
.cta-mid__inner {
position: relative;
text-align: center;
}
.cta-mid__tag {
display: inline-block;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.18em;
color: #c08557;
margin-bottom: 0.6rem;
}
.cta-mid__title {
font-family: var(--font-heading);
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 500;
color: var(--color-primary);
margin: 0 0 0.6rem;
line-height: 1.2;
}
.cta-mid__text {
font-size: 0.98rem;
line-height: 1.6;
color: #5a5045;
max-width: 540px;
margin: 0 auto 1.4rem;
}
.cta-mid__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.8rem;
}
.cta-mid__btn {
display: inline-block;
padding: 0.85rem 1.8rem;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
border-radius: 4px;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease;
}
.cta-mid__btn--primary {
background: var(--color-primary);
color: #fff;
border: 1px solid var(--color-primary);
}
.cta-mid__btn--primary:hover {
background: #c08557;
border-color: #c08557;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(192, 133, 87, 0.3);
}
.cta-mid__btn--outline {
background: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
}
.cta-mid__btn--outline:hover {
background: var(--color-primary);
color: #fff;
transform: translateY(-2px);
}
@media (max-width: 600px) {
.cta-mid__btn { width: 100%; padding: 0.85rem 1.2rem; }
}
/* --- Related links (maillage interne SEO) --- */
.section--related {
background: #fafaf6;
padding: var(--space-xl) 0;
}
.related-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-md);
margin-top: var(--space-md);
}
.related-link {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: 1.3rem 1.4rem;
background: #fff;
border: 1px solid #ece5d5;
border-radius: 8px;
text-decoration: none;
color: var(--color-primary);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.related-link:hover {
transform: translateY(-3px);
border-color: #c08557;
box-shadow: 0 10px 28px rgba(58, 80, 104, 0.1);
text-decoration: none;
}
.related-link strong {
font-family: var(--font-heading);
font-size: 1.2rem;
font-weight: 500;
color: var(--color-primary);
line-height: 1.3;
}
.related-link span {
font-size: 0.92rem;
color: #6f655a;
line-height: 1.5;
}
/* --- Landing pages SEO --- */
.section--landing-intro {
background: #fafaf6;
padding-top: var(--space-xl);
padding-bottom: var(--space-lg);
}
.landing-intro {
font-family: var(--font-heading);
font-size: clamp(1.2rem, 2.2vw, 1.5rem);
line-height: 1.55;
color: var(--color-primary);
text-align: center;
margin: 0;
font-style: italic;
font-weight: 400;
}
.section--landing {
padding: var(--space-xl) 0;
}
.section--landing-alt {
background: #f5ede0;
}
.section--landing .section__title {
text-align: center;
margin-bottom: var(--space-md);
}
.landing-body {
font-size: 1.05rem;
line-height: 1.75;
color: #4a4540;
max-width: 760px;
margin: 0 auto;
}
.section--landing-links {
background: var(--color-bg-light, #fff);
}
.landing-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-md);
margin-top: var(--space-md);
}
.landing-link {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: 1.5rem 1.4rem;
background: #fff;
border: 1px solid #ece5d5;
border-radius: 8px;
text-decoration: none;
color: var(--color-primary);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.landing-link:hover {
transform: translateY(-3px);
border-color: #c08557;
box-shadow: 0 10px 28px rgba(58, 80, 104, 0.1);
}
.landing-link strong {
font-family: var(--font-heading);
font-size: 1.3rem;
font-weight: 500;
color: var(--color-primary);
}
.landing-link span {
font-size: 0.92rem;
color: #6f655a;
line-height: 1.5;
}
/* --- FAQ section --- */
.section--faq {
background: #fafaf6;
}
.container--narrow {
max-width: 880px;
margin: 0 auto;
padding: 0 var(--space-md);
}
.faq {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin-top: var(--space-lg);
}
.faq__item {
background: #fff;
border: 1px solid #ece5d5;
border-radius: 8px;
overflow: hidden;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq__item[open] {
border-color: #c08557;
box-shadow: 0 6px 22px rgba(192, 133, 87, 0.12);
}
.faq__question {
list-style: none;
cursor: pointer;
padding: 1rem 1.3rem;
font-family: var(--font-heading);
font-size: 1.2rem;
font-weight: 500;
color: var(--color-primary);
position: relative;
padding-right: 2.6rem;
transition: color 0.2s ease;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
content: '+';
position: absolute;
right: 1.2rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.5rem;
color: #c08557;
transition: transform 0.25s ease;
line-height: 1;
}
.faq__item[open] .faq__question::after {
transform: translateY(-50%) rotate(45deg);
}
.faq__question:hover { color: #c08557; }
.faq__answer {
padding: 0 1.3rem 1.1rem;
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.65;
color: #5a5045;
}
@media (max-width: 600px) {
.faq__question { font-size: 1.05rem; padding: 0.85rem 1rem; padding-right: 2.4rem; }
.faq__answer { padding: 0 1rem 0.9rem; font-size: 0.9rem; }
}
/* --- CTA Banner --- */
.cta-banner {
background: var(--color-bg-dark);
padding: var(--space-xl) 0;
text-align: center;
}
.cta-banner__title {
font-family: var(--font-heading);
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 400;
color: #fff;
margin-bottom: var(--space-xs);
}
.cta-banner__text {
font-size: 1.05rem;
color: rgba(255, 255, 255, 0.6);
margin-bottom: var(--space-lg);
}
.cta-banner__buttons {
display: flex;
gap: var(--space-sm);
justify-content: center;
flex-wrap: wrap;
}
.cta-banner__btn {
display: inline-block;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 1rem 2.5rem;
background: var(--color-accent);
color: #fff;
border: 1px solid var(--color-accent);
transition: all var(--transition);
}
.cta-banner__btn:hover {
background: transparent;
color: var(--color-accent);
}
.cta-banner__btn--outline {
background: transparent;
border-color: rgba(255, 255, 255, 0.4);
color: #fff;
}
.cta-banner__btn--outline:hover {
background: #fff;
color: var(--color-primary);
border-color: #fff;
}
/* --- Discover Groups (restaurants, bars) --- */
.discover-group {
margin-bottom: var(--space-md);
}
.discover-group__title {
font-family: var(--font-heading);
font-size: 1.6rem;
font-weight: 500;
color: var(--color-primary);
margin-bottom: var(--space-md);
padding-bottom: var(--space-xs);
border-bottom: 1px solid var(--color-border);
}
.discover-group__detail {
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 400;
color: var(--color-text-light);
}
.restaurant-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-xs) var(--space-md);
}
.restaurant-list__item {
display: flex;
align-items: baseline;
gap: var(--space-xs);
padding: 0.6rem 0;
border-bottom: 1px solid var(--color-border);
}
.restaurant-list__name {
font-size: 0.95rem;
font-weight: 500;
color: var(--color-text);
white-space: nowrap;
}
.restaurant-list__desc {
font-size: 0.85rem;
color: var(--color-text-light);
font-style: italic;
}
/* --- Market Section --- */
.market-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
align-items: center;
}
.market-section__image {
overflow: hidden;
}
.market-section__image img {
width: 100%;
height: 250px;
object-fit: cover;
}
.market-list {
display: flex;
flex-direction: column;
}
.market-list__item {
display: flex;
align-items: baseline;
gap: var(--space-md);
padding: var(--space-sm) 0;
border-bottom: 1px solid var(--color-border);
}
.market-list__day {
font-family: var(--font-heading);
font-size: 1.2rem;
font-weight: 500;
color: var(--color-primary);
min-width: 110px;
}
.market-list__place {
font-size: 0.95rem;
color: var(--color-text-light);
}
/* --- Hike Cards --- */
.hike-banner {
margin-bottom: var(--space-md);
overflow: hidden;
}
.hike-banner img {
width: 100%;
height: 250px;
object-fit: cover;
}
.hike-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-sm);
margin-bottom: var(--space-md);
}
.hike-card {
background: var(--color-bg);
border: 1px solid var(--color-border);
padding: var(--space-md);
transition: all var(--transition);
}
.hike-card:hover {
border-color: var(--color-accent);
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}
.hike-card__title {
font-family: var(--font-heading);
font-size: 1.3rem;
font-weight: 500;
color: var(--color-primary);
margin-bottom: var(--space-sm);
}
.hike-card__details {
display: flex;
gap: var(--space-md);
}
.hike-card__distance,
.hike-card__duration {
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-accent);
padding: 0.3rem 0.8rem;
border: 1px solid var(--color-accent);
}
.hike-map {
overflow: hidden;
border: 1px solid var(--color-border);
}
/* --- Golf Cards --- */
.golf-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-sm);
margin-bottom: var(--space-md);
}
.golf-card {
background: var(--color-bg-warm);
border: 1px solid var(--color-border);
padding: var(--space-md);
transition: all var(--transition);
}
.golf-card:hover {
border-color: var(--color-accent);
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}
.golf-card__name {
font-family: var(--font-heading);
font-size: 1.3rem;
font-weight: 500;
color: var(--color-primary);
margin-bottom: var(--space-xs);
}
.golf-card__address {
font-size: 0.85rem;
color: var(--color-text-light);
margin-bottom: 0.2rem;
}
.golf-card__phone {
font-size: 0.85rem;
color: var(--color-accent);
font-weight: 500;
margin-bottom: var(--space-xs);
}
.golf-card__desc {
font-size: 0.9rem;
color: var(--color-text-light);
font-style: italic;
line-height: 1.7;
}
.golf-banner {
overflow: hidden;
}
.golf-banner img {
width: 100%;
height: 400px;
object-fit: cover;
}
/* --- Bottom Navigation (mobile) --- */
/* --- Bottom Navigation (mobile) --- */
.bottom-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 0.6rem 1rem;
padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
pointer-events: none;
transition: transform 0.4s cubic-bezier(0.62, 0, 0.2, 1);
}
.bottom-nav--hidden,
.bottom-nav--initial {
transform: translateY(calc(100% + 20px));
}
.bottom-nav__items {
display: grid;
grid-template-columns: repeat(5, 1fr);
align-items: end;
max-width: 420px;
margin: 0 auto;
background: rgba(15, 30, 46, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 50px;
padding: 0.45rem 0.8rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
pointer-events: auto;
}
.bottom-nav__item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.15rem;
text-decoration: none;
color: rgba(255, 255, 255, 0.5);
font-size: 0.55rem;
font-weight: 500;
letter-spacing: 0.03em;
text-transform: uppercase;
padding: 0.3rem 0;
transition: all var(--transition);
}
.bottom-nav__item:active {
transform: scale(0.92);
}
.bottom-nav__item svg {
width: 20px;
height: 20px;
stroke-width: 1.5;
}
.bottom-nav__item--active {
color: #fff;
}
.bottom-nav__item--cta {
color: #fff;
background: var(--color-accent);
border-radius: 50%;
width: 48px;
height: 48px;
margin: -20px auto 0;
justify-content: center;
gap: 0;
font-size: 0;
padding: 0;
box-shadow:
0 4px 15px rgba(196, 162, 101, 0.4),
0 0 0 3px rgba(15, 30, 46, 0.85),
0 0 0 5px rgba(196, 162, 101, 0.2);
transition: transform var(--transition), box-shadow var(--transition);
}
.bottom-nav__item--cta:active {
transform: scale(0.9);
}
.bottom-nav__item--cta svg {
width: 21px;
height: 21px;
stroke: #fff;
stroke-width: 2;
}
/* --- Lightbox --- */
.lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.lightbox--open {
opacity: 1;
visibility: visible;
}
.lightbox__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.92);
}
.lightbox__img {
position: relative;
max-width: 90vw;
max-height: 85vh;
object-fit: contain;
transform: scale(0.95);
transition: transform 0.3s ease;
}
.lightbox--open .lightbox__img {
transform: scale(1);
}
.lightbox__close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
background: none;
border: none;
color: #fff;
font-size: 2.5rem;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s;
z-index: 1;
line-height: 1;
}
.lightbox__close:hover { opacity: 1; }
.lightbox__prev,
.lightbox__next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #fff;
font-size: 3rem;
cursor: pointer;
opacity: 0.5;
transition: opacity 0.2s;
z-index: 1;
padding: 1rem;
line-height: 1;
}
.lightbox__prev { left: 1rem; }
.lightbox__next { right: 1rem; }
.lightbox__prev:hover,
.lightbox__next:hover { opacity: 1; }
/* --- Sticky Booking Bar --- */
.sticky-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 900;
background: var(--color-bg-dark);
padding: 0.8rem 0;
transform: translateY(100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}
.sticky-bar--visible {
transform: translateY(0);
}
.sticky-bar__inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-md);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
}
.sticky-bar__text {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
}
.sticky-bar__text strong {
color: #fff;
font-family: var(--font-heading);
font-size: 1.1rem;
}
.sticky-bar__actions {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.sticky-bar__btn {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.7rem 1.8rem;
background: var(--color-accent);
color: #fff;
border: none;
cursor: pointer;
transition: all var(--transition);
text-decoration: none;
}
.sticky-bar__btn:hover {
background: #fff;
color: var(--color-primary);
}
.sticky-bar__close {
background: none;
border: none;
color: rgba(255, 255, 255, 0.4);
font-size: 1.4rem;
cursor: pointer;
padding: 0.3rem;
line-height: 1;
}
.sticky-bar__close:hover {
color: #fff;
}
/* --- Trustindex-style Reviews Widget --- */
.section--reviews {
background: var(--color-bg-warm);
padding: var(--space-lg) 0;
}
.ti-widget {
max-width: 800px;
margin: 0 auto;
background: #fff;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
/* Header */
.ti-widget__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.2rem 1.5rem;
border-bottom: 1px solid #eee;
}
.ti-widget__rating-box {
display: flex;
flex-direction: column;
}
.ti-widget__label {
font-size: 0.95rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: 0.15rem;
}
.ti-widget__stars-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.ti-widget__stars {
color: #f5a623;
font-size: 1.1rem;
letter-spacing: 0.05em;
}
.ti-widget__score {
font-size: 0.8rem;
color: var(--color-text-light);
font-weight: 500;
}
.ti-widget__based {
font-size: 0.7rem;
color: #999;
margin-top: 0.1rem;
}
.ti-widget__logos {
display: flex;
align-items: center;
gap: 0.8rem;
}
.ti-widget__logo-link {
opacity: 0.6;
transition: opacity var(--transition);
display: flex;
}
.ti-widget__logo-link:hover {
opacity: 1;
}
.ti-widget__logo-link img {
height: 28px;
width: auto;
}
/* Slider */
.ti-widget__slider {
position: relative;
overflow: hidden;
}
.ti-widget__track {
display: flex;
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Review card */
.ti-review {
min-width: 100%;
padding: 1.5rem;
}
.ti-review__top {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.8rem;
}
.ti-review__avatar {
width: 38px;
height: 38px;
border-radius: 50%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: 600;
flex-shrink: 0;
}
.ti-review__name {
font-size: 0.88rem;
font-weight: 600;
color: var(--color-text);
line-height: 1.2;
}
.ti-review__stars {
color: #f5a623;
font-size: 0.78rem;
letter-spacing: 0.06em;
}
.ti-review__source {
margin-left: auto;
flex-shrink: 0;
opacity: 0.5;
}
.ti-review__text {
font-size: 0.9rem;
color: #444;
line-height: 1.75;
margin-bottom: 0.6rem;
}
.ti-review__date {
font-size: 0.72rem;
color: #aaa;
}
/* Dots */
.ti-widget__dots {
display: flex;
justify-content: center;
gap: 0.4rem;
padding: 0.6rem 0;
}
.ti-widget__dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: none;
background: #ddd;
cursor: pointer;
padding: 0;
transition: all var(--transition);
}
.ti-widget__dot--active {
background: var(--color-primary);
transform: scale(1.25);
}
/* Footer */
.ti-widget__footer {
text-align: center;
padding: 0.7rem 1.5rem;
border-top: 1px solid #eee;
}
.ti-widget__footer a {
font-size: 0.78rem;
color: #4285f4;
text-decoration: none;
font-weight: 500;
}
.ti-widget__footer a:hover {
text-decoration: underline;
}
/* --- Photo Strip (auto-scroll) --- */
.photo-strip {
overflow: hidden;
padding: var(--space-xs) 0;
}
.photo-strip__track {
display: flex;
gap: var(--space-xs);
animation: scrollStrip 30s linear infinite;
width: max-content;
}
.photo-strip__track img {
height: 180px;
width: auto;
object-fit: cover;
flex-shrink: 0;
}
.photo-strip:hover .photo-strip__track {
animation-play-state: paused;
}
@keyframes scrollStrip {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* --- Wave Divider --- */
.wave-divider {
position: relative;
height: 60px;
overflow: hidden;
margin-top: -1px;
}
.wave-divider svg {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
}
.wave-divider--warm svg { fill: var(--color-bg-warm); }
.wave-divider--light svg { fill: var(--color-bg); }
.wave-divider--dark svg { fill: var(--color-bg-dark); }
/* --- Destination Cards (V2 : image plein cadre + texte overlay qui descend au hover) --- */
.dest-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-sm);
}
.dest-card {
position: relative;
aspect-ratio: 3 / 4;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
}
.dest-card__img {
position: absolute;
inset: 0;
}
.dest-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(.165, .84, .44, 1);
}
.dest-card:hover .dest-card__img img {
transform: scale(1.08);
}
/* Dégradé permanent pour la lisibilité du texte (et s'intensifie au survol) */
.dest-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 0%, transparent 45%, rgba(0, 0, 0, 0.85) 100%);
pointer-events: none;
transition: background 0.45s cubic-bezier(.165, .84, .44, 1);
}
.dest-card:hover::after {
background: linear-gradient(180deg, transparent 0%, transparent 25%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.82) 100%);
}
.dest-card__content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: var(--space-md);
color: #fff;
z-index: 2;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.5);
}
.dest-card__subtitle {
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.15em;
opacity: 0.85;
color: var(--color-sand);
margin-bottom: 0.4rem;
}
.dest-card__title {
font-family: var(--font-heading);
font-size: 1.8rem;
font-weight: 500;
line-height: 1.1;
margin: 0 0 0.4rem;
color: #fff;
}
.dest-card__desc {
font-size: 0.88rem;
line-height: 1.55;
margin: 0;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.45s cubic-bezier(.165, .84, .44, 1), opacity 0.3s ease, margin-bottom 0.4s ease;
}
.dest-card:hover .dest-card__desc {
max-height: 220px;
opacity: 1;
margin-bottom: 0.9rem;
}
.dest-card__link {
display: inline-block;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #fff;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
padding-bottom: 2px;
align-self: flex-start;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(.165, .84, .44, 1) 0.05s, opacity 0.3s ease 0.1s, border-color 0.2s ease;
}
.dest-card:hover .dest-card__link {
max-height: 40px;
opacity: 1;
}
.dest-card__link:hover {
border-bottom-color: var(--color-sand);
color: var(--color-sand);
}
/* ---- Mobile : 2 colonnes, tap-to-reveal pour le texte (même effet que le hover PC) ---- */
@media (max-width: 768px) {
.dest-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.7rem;
}
.dest-card {
aspect-ratio: 3 / 4;
}
.dest-card__content {
padding: 0.9rem;
}
.dest-card__title {
font-size: 1.15rem;
margin-bottom: 0.2rem;
}
.dest-card__subtitle {
font-size: 0.62rem;
letter-spacing: 0.12em;
margin-bottom: 0.3rem;
}
.dest-card__desc {
font-size: 0.78rem;
line-height: 1.45;
}
.dest-card__link {
font-size: 0.68rem;
}
/* État ouvert (tap) = même comportement que hover PC */
.dest-card.is-open::after {
background: linear-gradient(180deg, transparent 0%, transparent 25%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.82) 100%);
}
.dest-card.is-open .dest-card__desc {
max-height: 220px;
opacity: 1;
margin-bottom: 0.6rem;
}
.dest-card.is-open .dest-card__link {
max-height: 40px;
opacity: 1;
}
}
/* ---- Très petits écrans ---- */
@media (max-width: 380px) {
.dest-grid { gap: 0.5rem; }
.dest-card__content { padding: 0.7rem; }
.dest-card__title { font-size: 1rem; }
.dest-card__subtitle { font-size: 0.58rem; }
.dest-card__desc { font-size: 0.72rem; }
}
/* --- Accordions --- */
.accordions {
max-width: 800px;
margin: 0 auto;
}
.accordion {
border-bottom: 1px solid var(--color-border);
}
.accordion__title {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--space-sm) 0;
font-family: var(--font-heading);
font-size: 1.3rem;
font-weight: 500;
color: var(--color-primary);
cursor: pointer;
list-style: none;
transition: color var(--transition);
}
.accordion__title::-webkit-details-marker {
display: none;
}
.accordion__title::after {
content: '+';
font-family: var(--font-body);
font-size: 1.4rem;
font-weight: 300;
color: var(--color-accent);
transition: transform var(--transition);
}
.accordion[open] .accordion__title::after {
content: '−';
}
.accordion__title:hover {
color: var(--color-accent);
}
.accordion__content {
padding: 0 0 var(--space-md);
}
.accordion__content h4 {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-accent);
margin: var(--space-sm) 0 var(--space-xs);
}
.accordion__content h4:first-child {
margin-top: 0;
}
.accordion__content ul {
list-style: none;
padding: 0;
}
.accordion__content li {
padding: 0.4rem 0;
border-bottom: 1px solid rgba(0,0,0,0.05);
font-size: 0.9rem;
color: var(--color-text-light);
}
.accordion__content li a {
color: var(--color-primary);
font-weight: 500;
}
.accordion__content li a:hover {
color: var(--color-accent);
}
.accordion__content li em {
color: var(--color-text-light);
font-size: 0.85rem;
}
.accordion__content p {
font-size: 0.9rem;
color: var(--color-text-light);
line-height: 1.7;
margin-bottom: var(--space-xs);
}
.accordion__content ol {
padding-left: 1.5rem;
}
.accordion__content ol li {
font-size: 0.9rem;
color: var(--color-text);
padding: 0.3rem 0;
}
/* --- Garden Cards --- */
.garden-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-sm);
}
.garden-card {
background: var(--color-bg);
border: 1px solid var(--color-border);
padding: var(--space-md);
transition: all var(--transition);
}
.garden-card:hover {
border-color: var(--color-accent);
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}
.garden-card__name {
font-family: var(--font-heading);
font-size: 1.2rem;
font-weight: 500;
color: var(--color-primary);
margin-bottom: var(--space-xs);
}
.garden-card__name a {
color: inherit;
}
.garden-card__name a:hover {
color: var(--color-accent);
}
.garden-card__desc {
font-size: 0.85rem;
color: var(--color-text-light);
line-height: 1.7;
}
/* Section backgrounds */
.section--destinations {
background: var(--color-bg);
}
.section--addresses {
background: var(--color-bg-warm);
padding: var(--space-lg) 0;
}
.section--gardens {
background: var(--color-bg-warm);
padding: var(--space-lg) 0;
}
/* --- Instagram CTA --- */
.section--instagram {
background: var(--color-bg-warm);
padding: var(--space-lg) 0;
}
.instagram-cta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
align-items: center;
}
.instagram-cta__images {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xs);
}
.instagram-cta__images img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
transition: transform 0.9s cubic-bezier(.165, .84, .44, 1);
}
.instagram-cta__images img:hover {
transform: scale(1.05);
}
.instagram-cta__content {
text-align: center;
}
.instagram-cta__icon {
color: var(--color-primary);
margin-bottom: var(--space-sm);
}
.instagram-cta__title {
font-family: var(--font-heading);
font-size: 1.8rem;
font-weight: 400;
color: var(--color-primary);
margin-bottom: var(--space-xs);
}
.instagram-cta__text {
font-size: 0.9rem;
color: var(--color-text-light);
margin-bottom: var(--space-md);
}
.instagram-cta__link {
display: inline-block;
font-size: 1rem;
font-weight: 500;
color: var(--color-primary);
border-bottom: 2px solid var(--color-accent);
padding-bottom: 0.2rem;
transition: all var(--transition);
}
.instagram-cta__link:hover {
color: var(--color-accent);
}
/* --- Scroll Progress Bar --- */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 0;
background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
z-index: 9999;
transition: width 0.1s linear;
pointer-events: none;
}
/* --- Image Reveal (color block wipe via span) --- */
.img-wipe {
position: absolute;
inset: 0;
background: var(--color-primary);
transform: scaleX(1);
transform-origin: right;
transition: transform 0.8s cubic-bezier(0.77, 0, 0.18, 1);
z-index: 4;
pointer-events: none;
}
.img-wipe--done {
transform: scaleX(0);
}
/* --- Hero Character Animation --- */
.hero-char {
display: inline-block;
opacity: 0;
transform: translateY(40px);
animation: charReveal 0.6s ease forwards;
}
.hero-char:empty,
.hero-char:blank {
width: 0.3em;
}
@keyframes charReveal {
to {
opacity: 1;
transform: translateY(0);
}
}
/* --- Animations --- */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes scrollPulse {
0%, 100% {
opacity: 0.6;
transform: scaleY(1);
}
50% {
opacity: 1;
transform: scaleY(1.3);
}
}
/* Scroll reveal */
.reveal {
opacity: 0;
transform: translateY(40px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal--visible {
opacity: 1;
transform: translateY(0);
}
/* --- Responsive --- */
@media (max-width: 1024px) {
.features {
grid-template-columns: repeat(2, 1fr);
}
.features-photo {
grid-template-columns: repeat(2, 1fr);
}
.pricing {
grid-template-columns: 1fr;
max-width: 450px;
margin-left: auto;
margin-right: auto;
}
.pricing__card--featured {
transform: none;
}
.pricing__card--featured:hover {
transform: translateY(-4px);
}
.discover {
grid-template-columns: repeat(2, 1fr);
}
.golf-cards {
grid-template-columns: 1fr;
}
.space-cards {
grid-template-columns: repeat(2, 1fr);
}
.activity-cards {
grid-template-columns: repeat(2, 1fr);
}
.dest-grid {
grid-template-columns: repeat(2, 1fr);
}
.ti-widget__header {
flex-direction: column;
align-items: flex-start;
gap: 0.8rem;
}
.ti-widget__logos {
align-self: flex-start;
}
.ti-review {
padding: 1.2rem;
}
.contact {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.footer__content {
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
}
.details__item {
gap: var(--space-md);
}
}
@media (max-width: 768px) {
:root {
--space-2xl: 5rem;
}
/* Hide nav on mobile */
.nav {
transform: translateY(-100%);
transition: transform 0.4s cubic-bezier(0.62, 0, 0.2, 1);
}
.nav__toggle {
display: none !important;
}
.nav__menu {
display: none;
}
/* Bottom tab bar */
.bottom-nav {
display: flex;
}
.features {
grid-template-columns: 1fr;
}
.features-photo {
grid-template-columns: 1fr;
gap: var(--space-xs);
}
.feature-photo {
aspect-ratio: 16 / 9;
}
.feature-photo__overlay {
padding: var(--space-sm);
}
.feature-photo__title {
font-size: 1.2rem;
margin-bottom: 0.25rem;
}
.feature-photo__text {
font-size: 0.75rem;
line-height: 1.45;
}
.hero {
height: 100vh;
height: 100dvh;
height: -webkit-fill-available;
min-height: 0;
}
/* Show logo top-left on hero/page-header on mobile */
.hero::before,
.page-header::before {
content: '';
position: absolute;
top: 1.2rem;
left: 1.2rem;
width: 110px;
height: 110px;
background: url('../images/logo/logo.png') center/contain no-repeat;
filter: brightness(0) invert(1);
z-index: 2;
opacity: 0.95;
}
.hero__scroll {
display: none;
}
.hero__scroll-hint svg {
width: 20px;
height: 20px;
}
.hero__stat-block {
padding: 0.6rem 0.3rem;
}
.hero__stat-label {
font-size: 0.45rem;
}
.hero__description br {
display: none;
}
.instagram-cta {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.custom-cursor {
display: none !important;
}
.dest-grid {
grid-template-columns: 1fr;
}
.dest-card {
height: 240px;
}
.garden-cards {
grid-template-columns: 1fr;
}
.gallery {
grid-template-columns: 1fr;
}
.gallery__item--large {
grid-column: auto;
grid-row: auto;
}
.gallery__item:not(.gallery__item--large) img {
height: 200px;
}
.details__item,
.details__item--reverse {
grid-template-columns: 1fr;
direction: ltr;
}
.details__item img {
height: 250px;
}
.rooms {
grid-template-columns: 1fr;
}
/* .bathroom-row responsive géré plus haut en @media (max-width: 900px) */
.conditions__grid {
grid-template-columns: repeat(2, 1fr);
}
.space-cards {
grid-template-columns: 1fr;
}
.gallery-row {
grid-template-columns: 1fr;
}
.gallery-row__item img {
height: 200px;
}
.page-header {
min-height: max(55vh, 350px);
padding-bottom: 2rem;
}
.video-btn {
margin-top: 2rem;
}
.discover {
grid-template-columns: 1fr;
}
.restaurant-list {
grid-template-columns: 1fr;
}
.market-section {
grid-template-columns: 1fr;
}
.market-section__image img {
height: 250px;
}
.hike-cards {
grid-template-columns: 1fr;
}
.hike-banner img {
height: 250px;
}
.golf-banner img {
height: 250px;
}
.activity-cards {
grid-template-columns: 1fr;
}
.webcam-container {
box-shadow: none;
}
.gallery__item--large {
box-shadow: none;
}
.footer__partners {
gap: var(--space-lg);
}
.footer__partner-logo {
height: 40px;
}
.form__row {
grid-template-columns: 1fr;
}
.footer__content {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.photo-banner {
height: 35vh;
min-height: 250px;
}
/* Hide sticky bar on mobile — bottom nav handles CTA */
.sticky-bar {
display: none;
}
/* Add padding for bottom nav */
body {
padding-bottom: 0;
}
.footer {
padding-bottom: calc(var(--space-md) + 80px);
}
.photo-strip__track img {
height: 130px;
}
.lightbox__prev,
.lightbox__next {
font-size: 2rem;
}
}
@media (max-width: 480px) {
.conditions__grid {
grid-template-columns: 1fr;
}
.room__amenities {
gap: var(--space-xs);
}
}
/* =============================================
Custom Video Modal + Player
============================================= */
.drone-modal {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.drone-modal[hidden] { display: none; }
.drone-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.88);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
cursor: pointer;
opacity: 0;
animation: videoFadeIn .25s forwards;
}
.drone-modal__dialog {
position: relative;
width: 100%;
max-width: 1200px;
z-index: 1;
opacity: 0;
transform: scale(.96);
animation: videoPopIn .35s .08s forwards;
}
.drone-modal__close {
position: absolute;
top: -3rem;
right: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
color: #fff;
cursor: pointer;
transition: background .2s, transform .2s;
}
.drone-modal__close:hover { background: rgba(255, 255, 255, 0.15); transform: rotate(90deg); }
@media (max-width: 720px) {
.drone-modal__close { top: -2.5rem; width: 36px; height: 36px; }
}
@keyframes videoFadeIn { to { opacity: 1; } }
@keyframes videoPopIn { to { opacity: 1; transform: scale(1); } }
/* --- Player --- */
.video-player {
position: relative;
background: #000;
border-radius: 6px;
overflow: hidden;
aspect-ratio: 16 / 9;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.video-player__media {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
}
.video-player__bigplay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 88px;
height: 88px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.9);
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .2s, transform .2s, opacity .25s;
padding-left: 6px; /* compense la forme asymétrique du triangle */
}
.video-player__bigplay:hover { background: rgba(255, 255, 255, 0.2); transform: translate(-50%, -50%) scale(1.08); }
.video-player.is-playing .video-player__bigplay { opacity: 0; pointer-events: none; }
.video-player__controls {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 1.25rem 1.1rem 0.9rem;
display: flex;
align-items: center;
gap: 0.8rem;
color: #fff;
background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
opacity: 0;
transition: opacity .25s;
pointer-events: none;
}
.video-player:hover .video-player__controls,
.video-player.is-paused .video-player__controls {
opacity: 1;
pointer-events: auto;
}
.video-player__btn {
background: transparent;
border: none;
color: #fff;
cursor: pointer;
padding: 0.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.9;
transition: opacity .15s;
}
.video-player__btn:hover { opacity: 1; }
.video-player .vp-icon--pause,
.video-player .vp-icon--vol-off { display: none; }
.video-player.is-playing .vp-icon--play { display: none; }
.video-player.is-playing .vp-icon--pause { display: inline-flex; }
.video-player.is-muted .vp-icon--vol-on { display: none; }
.video-player.is-muted .vp-icon--vol-off { display: inline-flex; }
.video-player__time {
font-size: 0.82rem;
font-variant-numeric: tabular-nums;
min-width: 42px;
font-family: 'Inter', system-ui, sans-serif;
}
.video-player__progress {
flex: 1;
-webkit-appearance: none;
appearance: none;
height: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.25);
cursor: pointer;
transition: height .15s;
}
.video-player__progress:hover { height: 6px; }
.video-player__progress::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
cursor: pointer;
border: none;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15);
}
.video-player__progress::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
border: none;
cursor: pointer;
}
@media (max-width: 640px) {
.video-player__bigplay { width: 64px; height: 64px; }
.video-player__controls { padding: 1rem 0.7rem 0.6rem; gap: 0.5rem; }
.video-player__time { min-width: 36px; font-size: 0.75rem; }
}
/* =============================================
Carte illustrée v2 — aquarelle, géographie fidèle
============================================= */
.hand-map {
background: #f3e8d3;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 16px 40px rgba(58,80,104,0.1);
position: relative;
}
.hand-map svg { display: block; width: 100%; height: auto; }
/* =============================================
Leaflet — carte Sainte-Marine (contact.html)
============================================= */
.villa-map {
height: 520px;
width: 100%;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 12px 32px rgba(58,80,104,0.15);
background: #eae0ce;
position: relative;
z-index: 1;
}
/* Filtre warm/sandy appliqué uniquement aux tuiles (pas aux controls ni popup) */
.villa-map .leaflet-tile-pane {
filter: none;
}
/* Controles zoom */
.leaflet-control-zoom a {
background: #fff !important;
color: #3a5068 !important;
border: 1px solid #c4a265 !important;
}
.leaflet-control-zoom a:hover { background: #c4a265 !important; color: #fff !important; }
/* Attribution */
.leaflet-control-attribution {
background: rgba(243,232,211,0.88) !important;
color: #6b4a2a !important;
font-size: 10px !important;
}
.leaflet-control-attribution a { color: #a48459 !important; }
/* Marqueur pin (sans restyling supplémentaire, le SVG fait tout) */
.villa-map__pin { background: transparent; border: none; }
/* Popup */
.leaflet-popup-content-wrapper {
background: #fff;
border-radius: 6px;
border: 1px solid #c4a265;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.leaflet-popup-content {
font-family: var(--font-body);
font-size: 0.88rem;
color: #3a5068;
line-height: 1.5;
margin: 0.7rem 0.9rem;
}
.leaflet-popup-tip { background: #fff; border: 1px solid #c4a265; }
.page-header__content {
padding-top: clamp(4rem, 8vh, 6rem);
}
/* =============================================
Fix universel — nav fixe chevauche les hero / page-header
============================================= */
.hero__content {
padding-top: clamp(6rem, 12vh, 9rem);
}
/* Pour .page-header, on padde le PARENT car le contenu est centré avec align-items */
.page-header {
padding-top: clamp(6rem, 10vh, 8rem);
padding-bottom: clamp(2rem, 4vh, 3rem);
}
/* =============================================
Scroll anchors — atterrissage sous la nav fixe
============================================= */
section[id],
.bathroom-row[id],
[id="villa-overview"],
[id="espaces"],
[id="chambres"],
[id="salles-d-eau"] {
scroll-margin-top: clamp(5rem, 8vh, 7rem);
}
/* =============================================
Carrousel photos — chambres & espaces
(remplace l'effet hover-flip par un slider)
============================================= */
/* Conteneur appliqué à .room__image et .space-card__image */
.room__image,
.space-card__image {
position: relative;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
touch-action: pan-y;
}
/* Désactiver l'ancien comportement de flip au survol */
.room__image--flip:hover .room__img-back,
.space-card__image--flip:hover .room__img-back { opacity: 0; }
.room__image--flip .room__img-back,
.space-card__image--flip .room__img-back { opacity: 0; transition: none; }
.room__img-front, .room__img-back { transition: none; }
.room__flip-hint { display: none !important; }
/* Track slidant (contient les images) */
.carousel-track {
position: absolute;
inset: 0;
display: flex;
transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.carousel-slide {
min-width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
/* Boutons flèches (desktop prioritaire, mobile aussi) */
.carousel-nav {
position: absolute;
top: 50%; transform: translateY(-50%);
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.88);
border: none;
display: flex; align-items: center; justify-content: center;
color: var(--color-primary);
cursor: pointer;
transition: opacity .2s, background .2s, transform .2s;
z-index: 3;
opacity: 0;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.room__image:hover .carousel-nav,
.space-card__image:hover .carousel-nav { opacity: 1; }
.carousel-nav:hover {
background: #fff;
transform: translateY(-50%) scale(1.08);
}
.carousel-nav--prev { left: 12px; }
.carousel-nav--next { right: 12px; }
.carousel-nav svg { width: 22px; height: 22px; }
/* ===== Hint V1 (desktop) : chevrons pulsants sur les côtés ===== */
.carousel-hint-desktop {
position: absolute; inset: 0;
pointer-events: none; z-index: 2;
display: flex; align-items: center; justify-content: space-between;
padding: 0 1rem;
opacity: 1;
transition: opacity .3s;
}
.room__image:hover .carousel-hint-desktop,
.space-card__image:hover .carousel-hint-desktop { opacity: 0; }
.carousel-hint-desktop__arrow {
width: 36px; height: 36px; border-radius: 50%;
background: rgba(255,255,255,0.18);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
color: #fff;
}
.carousel-hint-desktop__arrow--left {
animation: carousel-pulse-left 2s ease-in-out infinite;
}
.carousel-hint-desktop__arrow--right {
animation: carousel-pulse-right 2s ease-in-out infinite 1s;
}
@keyframes carousel-pulse-left {
0%, 100% { transform: translateX(0); opacity: 0.5; }
50% { transform: translateX(-8px); opacity: 1; }
}
@keyframes carousel-pulse-right {
0%, 100% { transform: translateX(0); opacity: 0.5; }
50% { transform: translateX(8px); opacity: 1; }
}
/* ===== Hint V5 (mobile) : bandeau fin + progress ===== */
.carousel-hint-mobile {
position: absolute; left: 0; right: 0; bottom: 0;
pointer-events: none; z-index: 2;
background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
padding: 2.5rem 1rem 0.8rem;
display: flex; align-items: center; justify-content: space-between;
color: #fff;
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.carousel-hint-mobile__label { opacity: 0.9; }
.carousel-hint-mobile__bar {
flex: 1; height: 2px; margin: 0 1rem;
background: rgba(255,255,255,0.2);
border-radius: 1px; overflow: hidden; position: relative;
}
.carousel-hint-mobile__bar::after {
content: ''; position: absolute; inset: 0; width: 33%;
background: #fff; border-radius: 1px;
animation: carousel-bar 3s ease-in-out infinite;
}
@keyframes carousel-bar {
0% { transform: translateX(-100%); }
50%, 100% { transform: translateX(300%); }
}
/* Responsive : hint desktop caché mobile, hint mobile caché desktop */
@media (max-width: 720px) {
.carousel-hint-desktop { display: none; }
.carousel-nav { display: none; }
}
@media (min-width: 721px) {
.carousel-hint-mobile { display: none; }
}
/* =============================================
Photo lightbox — clic sur une photo du carrousel
============================================= */
.photo-lightbox {
position: fixed;
inset: 0;
z-index: 3000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(10, 15, 22, 0.94);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 2rem 3rem;
animation: photoFadeIn 0.25s forwards;
}
.photo-lightbox[hidden] { display: none; }
@keyframes photoFadeIn { from { opacity: 0; } to { opacity: 1; } }
.photo-lightbox__img-wrap {
max-width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
-webkit-user-select: none;
touch-action: pan-y;
}
.photo-lightbox__img {
max-width: 100%;
max-height: 85vh;
object-fit: contain;
border-radius: 4px;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
animation: photoPop 0.3s forwards;
}
@keyframes photoPop { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.photo-lightbox__close,
.photo-lightbox__prev,
.photo-lightbox__next {
position: absolute;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.3);
color: #fff;
width: 48px; height: 48px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .2s, transform .2s;
z-index: 1;
}
.photo-lightbox__close:hover,
.photo-lightbox__prev:hover,
.photo-lightbox__next:hover {
background: rgba(255,255,255,0.22);
transform: scale(1.06);
}
.photo-lightbox__close { top: 1.5rem; right: 1.5rem; }
.photo-lightbox__prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.photo-lightbox__next { right: 1.5rem; top: 50%; transform: translateY(-50%); }
.photo-lightbox__prev:hover,
.photo-lightbox__next:hover { transform: translateY(-50%) scale(1.06); }
.photo-lightbox__counter {
position: absolute;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
color: #fff;
font-family: var(--font-heading);
font-style: italic;
font-size: 1rem;
background: rgba(0,0,0,0.35);
padding: 0.4rem 1rem;
border-radius: 99px;
border: 1px solid rgba(255,255,255,0.2);
}
@media (max-width: 720px) {
.photo-lightbox { padding: 1rem; }
.photo-lightbox__prev,
.photo-lightbox__next { display: none; }
.photo-lightbox__close {
top: 1rem; right: 1rem;
width: 40px; height: 40px;
}
.photo-lightbox__counter { bottom: 1rem; font-size: 0.85rem; }
}
/* Indique clic sur les slides */
.carousel-slide { cursor: zoom-in; }
/* =============================================
Language switcher (nav + bottom-nav mobile)
============================================= */
.lang-switcher {
display: flex;
align-items: center;
gap: 0.15rem;
margin-left: 1rem;
padding-left: 1rem;
border-left: 1px solid rgba(58, 80, 104, 0.15);
}
.nav--scrolled .lang-switcher { border-left-color: rgba(58, 80, 104, 0.2); }
.lang-switcher__item {
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.35rem 0.55rem;
color: var(--color-text-light);
text-decoration: none;
border-radius: 3px;
transition: color .15s, background .15s;
}
.lang-switcher__item:hover {
color: var(--color-primary);
background: rgba(196, 162, 101, 0.1);
}
.lang-switcher__item--active {
color: var(--color-primary);
background: var(--color-sand);
font-weight: 600;
}
/* White variant when nav is over dark hero (not scrolled) */
.nav:not(.nav--scrolled) .lang-switcher {
border-left-color: rgba(255, 255, 255, 0.25);
}
.nav:not(.nav--scrolled) .lang-switcher__item {
color: rgba(255, 255, 255, 0.75);
}
.nav:not(.nav--scrolled) .lang-switcher__item:hover {
color: #fff;
background: rgba(255, 255, 255, 0.1);
}
.nav:not(.nav--scrolled) .lang-switcher__item--active {
color: var(--color-primary);
background: var(--color-sand);
}
/* Mobile : masque dans le menu principal, affiche dans un bloc séparé */
@media (max-width: 1024px) {
.lang-switcher {
margin-left: 0;
padding-left: 0;
border-left: none;
justify-content: center;
padding: 1rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
margin-top: 1rem;
}
}
/* =============================================
Language pill (hero) + bottom sheet — mobile only
============================================= */
.lang-pill {
display: none;
position: absolute;
top: 1.4rem;
right: 1.2rem;
z-index: 15;
align-items: center;
gap: 0.35rem;
padding: 0.45rem 0.85rem;
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 99px;
color: #fff;
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.1em;
cursor: pointer;
transition: background .2s;
}
.lang-pill:hover, .lang-pill:active { background: rgba(0, 0, 0, 0.55); }
.lang-pill svg { opacity: 0.85; }
/* Mobile uniquement */
@media (max-width: 1024px) {
.lang-pill { display: flex; }
}
/* Bottom sheet */
.lang-sheet {
position: fixed;
inset: 0;
z-index: 3000;
background: rgba(10, 15, 22, 0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex;
align-items: flex-end;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity .25s;
}
.lang-sheet.open { opacity: 1; pointer-events: auto; }
.lang-sheet__box {
background: #fff;
width: 100%;
max-width: 440px;
border-radius: 16px 16px 0 0;
padding: 1.5rem 1.5rem 2rem;
transform: translateY(100%);
transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.lang-sheet.open .lang-sheet__box { transform: translateY(0); }
.lang-sheet__title {
font-family: var(--font-heading);
font-style: italic;
font-weight: 400;
font-size: 1.3rem;
color: var(--color-primary);
text-align: center;
margin-bottom: 1.2rem;
}
.lang-sheet__list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.lang-sheet__link {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.9rem 1rem;
background: var(--color-bg);
border-radius: 8px;
color: var(--color-primary);
text-decoration: none;
font-family: var(--font-body);
font-size: 0.92rem;
font-weight: 500;
transition: background .15s;
}
.lang-sheet__link span:last-child {
font-size: 0.72rem;
letter-spacing: 0.1em;
color: var(--color-text-light);
font-weight: 600;
}
.lang-sheet__link:hover { background: var(--color-bg-warm); }
.lang-sheet__link--active {
background: var(--color-accent);
color: #fff;
}
.lang-sheet__link--active span:last-child { color: rgba(255,255,255,0.75); }
.lang-sheet__close {
display: block;
margin: 1rem auto 0;
background: transparent;
border: none;
color: var(--color-text-light);
cursor: pointer;
font-family: var(--font-body);
font-size: 0.85rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.5rem 1rem;
}
@media (min-width: 1025px) {
.lang-sheet { display: none !important; }
}