@font-face {
font-family:Amazon;
src:url('../fonts/amazon.woff2') format('woff2');
font-display:swap
}
@font-face {
font-family:Baskerville;
src:url('../fonts/baskerville.woff2') format('woff2');
font-display:swap
}
@font-face {
font-family:'Work Sans';
src:url('../fonts/work-sans.woff2') format('woff2');
font-weight:100 900;
font-display:swap
}
@font-face {
font-family:'Playfair Display';
src:url('../fonts/playfair-display.woff2') format('woff2');
font-weight:400 900;
font-display:swap
}
:root {
--accent:#9cd33a;
--accent-ink:#466b10;
--ink:#222;
--text:#5b5b5b;
--muted:#f8f9fa;
--border:#ddd;
--footer:#333;
--width:1140px;
--space:clamp(3.5rem,7vw,7rem);
--header:88px;
color-scheme:light
}
*,*::before,*::after {
box-sizing:border-box
}
html {
scroll-behavior:smooth;
scroll-padding-top:calc(var(--header) + 1rem)
}
body {
margin:0;
color:var(--text);
font:400 16px/1.75 'Work Sans',Arial,sans-serif;
background:#fff
}
h1,h2,h3 {
color:var(--ink);
line-height:1.25;
font-weight:400;
margin:0 0 1.2rem
}
h2 {
font-size:clamp(1.7rem,3vw,2rem)
}
h3 {
font-size:1.2rem
}
p {
margin:0 0 1.4rem
}
a {
color:var(--accent-ink);
text-underline-offset:.22em
}
a:hover {
color:#263d06
}
button,input,textarea {
font:inherit
}
button,a,input,textarea,summary {
-webkit-tap-highlight-color:transparent
}
button,summary {
cursor:pointer
}
button {
color:inherit
}
button:disabled {
cursor:wait;
opacity:.65
}
img {
max-width:100%;
height:auto;
display:block
}
ul {
padding-left:1.3rem
}
li+li {
margin-top:.55rem
}
address {
font-style:normal
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible {
outline:3px solid #446d0b;
outline-offset:4px
}
[hidden] {
display:none!important
}
.container {
width:min(calc(100% - 3rem),var(--width));
margin-inline:auto
}
.section {
padding-block:var(--space)
}
.section-muted {
background:var(--muted)
}
.section-title {
text-align:center;
margin-bottom:3rem;
padding-bottom:1.5rem;
position:relative
}
.section-title::after {
content:'';
position:absolute;
width:80px;
height:2px;
bottom:0;
left:calc(50% - 40px);
background:var(--accent)
}
.align-left {
text-align:left
}
.align-left::after {
left:0
}
.main-title {
font:400 clamp(2.6rem,5vw,3.6rem)/1.3 Amazon,cursive;
text-align:center;
margin-bottom:3.5rem
}
.button {
display:inline-block;
padding:.65rem 1.65rem;
border:1px solid transparent;
border-radius:2rem;
background:var(--accent);
color:#1f3108;
text-decoration:none;
font-size:.95rem
}
.button:hover {
background:#8dc22d;
color:#172408
}
.text-link {
text-transform:uppercase;
font-size:.8rem;
letter-spacing:.1em
}
.sr-only,.skip-link:not(:focus) {
position:absolute;
width:1px;
height:1px;
padding:0;
overflow:hidden;
clip-path:inset(50%);
white-space:nowrap
}
.skip-link:focus {
position:fixed;
top:.5rem;
left:.5rem;
z-index:100;
background:#fff;
padding:1rem
}
.site-header {
position:absolute;
inset:0 0 auto;
z-index:30;
padding:1.4rem 0;
color:#fff;
transition:background .2s,color .2s
}
.site-header.is-scrolled {
position:fixed;
padding:.8rem 0;
background:rgba(255,255,255,.98);
color:#222;
box-shadow:0 2px 10px #0001
}
.header-inner {
width:min(calc(100% - 2.5rem),1320px);
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:2rem
}
.brand {
font:400 1.9rem/1.2 Baskerville,Georgia,serif;
white-space:nowrap;
text-decoration:none;
color:inherit
}
.brand span {
color:var(--accent)
}
.site-nav {
display:flex;
align-items:center;
gap:1.7rem
}
.site-nav>a,.room-nav>summary {
color:inherit;
text-decoration:none;
font-size:.9rem
}
.site-nav a:hover {
color:var(--accent-ink)
}
.site-header:not(.is-scrolled) .site-nav>a:hover {
color:var(--accent)
}
.room-nav {
position:relative
}
.room-nav summary {
list-style:none;
min-height:44px;
display:flex;
align-items:center;
gap:.5rem
}
.room-nav summary::after {
content:'⌄'
}
.room-nav ul {
position:absolute;
top:100%;
right:0;
min-width:190px;
background:#fff;
color:#222;
margin:0;
padding:.7rem 0;
list-style:none;
box-shadow:0 5px 24px #0002
}
.room-nav li {
margin:0
}
.room-nav li a {
display:block;
padding:.5rem 1.2rem;
text-decoration:none;
color:inherit
}
.room-nav li a:hover,.room-nav a[aria-current] {
background:var(--muted);
color:var(--accent-ink)
}
.social-link {
font:bold 2rem/1 Arial!important;
color:var(--accent)!important
}
.menu-toggle {
border:0;
background:transparent;
color:inherit;
font-size:1.8rem;
min-width:44px;
min-height:44px
}
.home-hero,.room-hero {
height:min(900px,100svh);
min-height:560px;
position:relative;
background:#333;
isolation:isolate;
color:#fff
}
.hero-slide {
position:absolute;
inset:0;
touch-action:pan-y;
user-select:none;
cursor:grab
}
.hero-slide:active { cursor:grabbing; }
.hero-slide::after,.room-hero::after {
content:'';
position:absolute;
inset:0;
background:#0005;
z-index:0
}
.hero-image {
position:absolute;
width:100%;
height:100%;
object-fit:cover;
inset:0;
z-index:-1
}
.hero-content {
position:absolute;
z-index:1;
inset:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:6rem 1.5rem 8rem
}
.hero-title,.room-hero h1 {
font:400 clamp(3.4rem,7vw,6rem)/1.3 Amazon,cursive;
color:#fff;
max-width:900px;
margin:0 0 .5rem;
text-wrap:balance
}
.eyebrow {
text-transform:uppercase;
letter-spacing:.25em;
font-size:.75rem;
font-weight:600;
color:#fff
}
.carousel-controls {
position:absolute;
bottom:190px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:.5rem;
z-index:2
}
.carousel-controls button {
width:44px;
height:44px;
border:1px solid #fff7;
border-radius:50%;
background:#0003;
color:#fff
}
.booking-section {
position:relative;
z-index:3;
background:var(--muted);
padding:3rem 0
}
.home-hero+.booking-section {
padding:0 0 1px;
background:linear-gradient(transparent 80px,#fff 80px);
margin-top:-160px
}
.booking-box {
padding:1.4rem 1.8rem;
background:rgb(156 211 58 / 92%);
border-radius:4px;
color:#23320e
}
.booking-box h2 {
font-size:1.35rem;
margin-bottom:.4rem
}
.booking-box>p {
font-size:.85rem;
margin-bottom:.8rem
}
.booking-fallback {
display:inline-block;
font-size:.85rem;
margin-top:.6rem;
color:#23320e
}
.booking-box [data-booking] {
min-height:100px
}
.booking-box iframe {
width:100%;
border:0
}
.about-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:6rem;
align-items:center
}
.about-visual {
position:relative;
margin:0 1.5rem 3rem 0
}
.video-link {
display:block;
border:1px solid var(--accent);
position:relative;
padding:1rem
}
.video-link>img {
width:100%
}
.play-icon {
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
display:grid;
place-items:center;
border-radius:50%;
width:64px;
height:64px;
background:#fff;
color:var(--accent-ink)
}
.about-logo {
width:38%;
position:absolute;
right:-1.5rem;
bottom:-2rem;
border:7px solid #fff
}
.practical {
margin-top:4rem
}
.practical li {
margin-bottom:.65rem
}
.rooms-layout {
display:grid;
grid-template-columns:1fr 1fr;
gap:3rem
}
.room-cards {
display:grid;
grid-template-columns:1fr 1fr;
gap:1.5rem;
align-items:start
}
.room-card {
background:#fff
}
.room-card>a {
text-decoration:none;
color:var(--ink)
}
.room-card img {
width:100%;
aspect-ratio:3/2;
object-fit:cover;
transition:opacity .2s
}
.room-card:hover img {
opacity:.88
}
.room-card-body {
padding:1.5rem .8rem;
text-align:center
}
.room-card h3 {
font-size:1.05rem;
text-transform:uppercase;
margin-bottom:.5rem
}
.room-card p {
font-size:.8rem;
margin:0;
color:var(--text)
}
.room-included {
align-self:center
}
.room-included li {
margin-bottom:1.2rem
}
.cycling-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:4rem;
align-items:center
}
.cycling-grid>a img {
max-height:330px;
margin:auto;
object-fit:contain
}
.services-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:2rem
}
.service {
text-align:center;
padding:1rem
}
.service svg {
width:70px;
height:70px;
color:var(--accent-ink);
margin-bottom:1rem
}
.service h3 {
font-size:1.1rem
}
.photo-divider {
height:260px;
background:center/cover url('../../images/chambre/chambres-hotes-a-coque-line-salle-commune.webp')
}
.gallery {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:.5rem
}
.gallery a {
display:block;
overflow:hidden
}
.gallery img {
width:100%;
aspect-ratio:4/3;
object-fit:cover;
transition:opacity .2s
}
.gallery a:hover img {
opacity:.8
}
.region-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:2rem
}
.region-card>a {
text-decoration:none
}
.region-grid { touch-action:pan-y; }
.region-grid, .region-grid * { -webkit-user-select:none; user-select:none; }
.region-grid img { -webkit-user-drag:none; user-drag:none; }
.region-card img {
width:100%;
height:145px;
object-fit:contain;
background:#fff;
margin-bottom:1.6rem
}
.region-card h3 {
font-size:1.35rem
}
.region-card p {
font-size:.95rem
}
.manage-consent { border:0; padding:0; color:inherit; background:transparent; text-decoration:underline; cursor:pointer; font:inherit; }
.consent-banner { position:fixed; z-index:3000; inset:auto 18px 18px; display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:1100px; margin-inline:auto; padding:18px 22px; border:1px solid #d7ddcc; border-radius:10px; background:#fff; color:#333; box-shadow:0 8px 32px #0003; }
.consent-banner[hidden] { display:none; }
.consent-copy { max-width:700px; }
.consent-copy p { margin:4px 0 0; line-height:1.5; }
.consent-copy a { color:#466b10; text-decoration:underline; text-underline-offset:.15em; }
.consent-actions { display:flex; flex-wrap:wrap; gap:10px; }
.consent-actions button { min-width:112px; min-height:44px; margin:0; }
.consent-actions .consent-reject { background:#fff; color:#304713; border-color:#466b10; }
.consent-actions .consent-reject:hover { background:#f2f6ea; color:#243309; }
.consent-banner :focus-visible, .manage-consent:focus-visible { outline:3px solid #31580a; outline-offset:3px; }
.consent-storage-error { color:#9b1c1c; font-weight:600; }
@media(max-width:680px) {
.consent-banner { inset:auto 10px 10px; align-items:stretch; flex-direction:column; gap:12px; padding:16px; }
.consent-actions { display:grid; grid-template-columns:1fr 1fr; }
.consent-actions button { min-width:0; padding-inline:10px; }
}
.faq {
max-width:850px
}
.faq details {
border-bottom:1px solid var(--border);
padding:1rem 0
}
.faq summary {
font-size:1.05rem;
color:var(--ink);
padding:.4rem 0
}
.faq details p {
padding:.7rem 0;
margin:0
}
.contact-grid {
display:grid;
grid-template-columns:2fr 1fr;
gap:3rem
}
.contact-form {
padding:2.5rem;
background:#fff
}
.contact-form label {
display:block;
color:#333;
font-weight:600;
margin-bottom:1.2rem
}
.contact-form input:not([type=hidden]),.contact-form textarea {
display:block;
width:100%;
padding:.65rem .8rem;
border:1px solid #bbb;
border-radius:3px;
margin-top:.4rem;
color:var(--ink);
background:#fff;
font-weight:400
}
.contact-form textarea {
resize:vertical;
min-height:150px
}
.form-hint {
font-size:.85rem
}
.form-status {
margin:1rem 0 0
}
.form-status:empty {
margin:0
}
.form-status[data-state=error] {
color:#9b2424
}
.form-status[data-state=success] {
color:#365900
}
.honeypot {
position:absolute;
left:-10000px;
width:1px;
height:1px;
overflow:hidden
}
.contact-info {
background:#fff;
padding:2rem;
align-self:start
}
.contact-info a {
overflow-wrap:anywhere
}
.site-footer {
background:var(--footer);
color:#c7c7c7;
padding:4rem 0 2rem
}
.footer-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:4rem
}
.site-footer h2 {
color:#fff;
font-size:1.2rem
}
.site-footer a {
color:#d0e9a8
}
.site-footer .button {
color:#23320e
}
.footer-bottom {
border-top:1px solid #ffffff20;
padding-top:2rem;
margin-top:3rem;
text-align:center;
font-size:.8rem
}
.room-hero {
height:75svh;
min-height:480px;
max-height:760px
}
.room-hero .hero-content {
padding-bottom:3rem
}
.room-hero h1 {
font-size:clamp(3.2rem,6vw,5.8rem);
margin-bottom:1.5rem
}
.breadcrumbs {
font-size:.85rem;
margin-bottom:3rem
}
.capacity {
text-align:center;
color:var(--accent-ink);
font-size:1.2rem
}
.room-features {
max-width:800px;
margin:0 auto 3rem
}
.room-features li {
margin-bottom:.8rem
}
.room-gallery {
grid-template-columns:repeat(3,1fr)
}
.other-rooms {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1.5rem
}
.other-rooms a {
text-decoration:none;
text-align:center
}
.other-rooms img {
aspect-ratio:3/2;
object-fit:cover;
width:100%;
margin-bottom:1rem
}
.page-intro {
padding-top:calc(var(--header) + 4rem)
}
body:has(.page-intro) .site-header {
background:#fff;
color:var(--ink);
box-shadow:0 2px 10px #0001
}
.prose {
max-width:800px
}
.prose h1 {
font-size:2.5rem;
margin-bottom:3rem
}
.prose h2 {
font-size:1.5rem;
margin-top:2.5rem
}
.lightbox {
border:0;
padding:1rem;
background:#161616;
color:#fff;
max-width:95vw;
max-height:95svh;
width:max-content
}
.lightbox::backdrop {
background:#000c
}
.lightbox-toolbar {
display:flex;
justify-content:flex-end;
gap:.5rem;
margin-bottom:.8rem
}
.lightbox button {
min-width:44px;
min-height:44px;
border:1px solid #fff8;
background:transparent;
color:#fff;
font-size:1.4rem
}
.lightbox figure {
margin:0
}
.lightbox img {
max-width:85vw;
max-height:72svh;
width:auto;
object-fit:contain;
margin:auto
}
.lightbox figcaption {
text-align:center;
padding-top:.8rem;
font-size:.9rem
}
body.has-modal {
overflow:hidden
}
@media(min-width:1000px) {
.menu-toggle {
display:none
}
.home-hero+.booking-section .booking-box {
width:min(calc(100% - 3rem),1040px)
}
}
@media(max-width:999px) {
:root {
--header:78px
}
.header-inner {
gap:1rem;
flex-wrap:wrap
}
.menu-toggle:not([hidden]) {
display:block;
margin-left:auto
}
.site-nav {
width:100%;
display:flex;
flex-wrap:wrap;
gap:.5rem 1.2rem;
background:#fff;
color:#222;
padding:1rem
}
.site-nav.is-enhanced {
display:none;
max-height:75svh;
overflow:auto
}
.site-nav.is-open {
display:flex;
flex-direction:column;
align-items:stretch;
gap:0
}
.site-nav.is-open>a,.site-nav.is-open summary {
padding:.65rem;
min-height:44px
}
.room-nav ul {
position:static;
box-shadow:none;
padding-left:1rem
}
.site-header:has(.site-nav.is-open) {
background:#fff;
color:#222
}
.about-grid {
gap:3rem
}
.services-grid {
grid-template-columns:repeat(3,1fr)
}
.region-grid {
grid-template-columns:repeat(2,1fr)
}
.contact-grid {
gap:1.5rem
}
.contact-form {
padding:1.5rem
}
.footer-grid {
gap:2rem
}
}
@media(max-width:680px) {
.container {
width:calc(100% - 2rem)
}
.brand {
font-size:1.6rem
}
.home-hero {
height:80svh;
min-height:540px;
max-height:760px
}
.hero-content {
padding-bottom:5rem
}
.hero-title {
font-size:clamp(3rem,12vw,4.5rem)
}
.carousel-controls {
bottom:6.5rem
}
.home-hero+.booking-section {
margin-top:-80px;
background:linear-gradient(transparent 40px,#fff 40px)
}
.booking-box {
padding:1rem
}
.booking-box h2 {
font-size:1.15rem
}
.booking-box>p {
font-size:.8rem
}
.about-grid,.rooms-layout,.cycling-grid,.contact-grid,.footer-grid {
grid-template-columns:1fr;
gap:2.5rem
}
.about-visual {
max-width:480px
}
.room-cards {
gap:1rem
}
.room-card-body {
padding:1rem .5rem
}
.room-card h3 {
font-size:.9rem
}
.services-grid {
grid-template-columns:repeat(2,1fr);
gap:1rem
}
.service {
padding:.5rem
}
.gallery,.room-gallery,.other-rooms {
grid-template-columns:repeat(2,1fr)
}
.region-grid {
gap:2.5rem 1.25rem
}
.region-card img {
height:100px
}
.region-card h3 {
font-size:1.15rem
}
.photo-divider {
height:180px
}
.section-title {
margin-bottom:2.2rem
}
.contact-form {
padding:1.25rem
}
.room-hero {
height:65svh;
min-height:440px
}
.room-hero h1 {
font-size:3.4rem
}
.room-hero .hero-content {
padding-top:5rem
}
.footer-grid {
gap:2.5rem
}
.practical {
margin-top:3rem
}
}
@media(prefers-reduced-motion:reduce) {
html {
scroll-behavior:auto
}
*,*::before,*::after {
transition:none!important;
animation:none!important
}
}
@font-face {
font-family: SiteIcons;
src: url('../fonts/site-icons.woff2') format('woff2');
font-display: swap;
}
@font-face {
font-family: ServiceIcons;
src: url('../../fonts/flaticon2/font/Flaticon.woff2') format('woff2');
font-display: block;
}
:root {
--accent: #9cd33a;
--accent-ink: #466b10;
--text: #666;
--ink: #000;
--header: 72px;
--space: 7rem;
}
body { line-height: 1.7; }
body.has-navigation { overflow: hidden; }
a { text-decoration: none; transition: color .3s; }
a:hover { color: #78a327; }
h1, h2, h3 { font-weight: 500; line-height: 1.2; }
.container { width: 100%; max-width: 1140px; padding-inline: 15px; }
.section-title { font: 400 40px/1.2 'Playfair Display', Georgia, serif; padding-bottom: 0; margin-bottom: 5rem; }
.section-title::after { width: 100px; height: 1px; background: #000; left: calc(50% - 50px); bottom: -10px; }
.section-title.align-left::after { left: 0; }
.main-title { font-size: 64px; font-weight: 900; line-height: 1.2; margin-bottom: 24px; }
.button { background: #9cd33a; color: #243309; padding: 6px 24px; font-size: 16px; border: 2px solid #9cd33a; }
.button:hover { background: #8dc02e; border-color: #8dc02e; color: #243309; }
.site-icon { font-family: SiteIcons !important; font-weight: normal; font-style: normal; line-height: 1; -webkit-font-smoothing: antialiased; }
.site-icon--facebook::before { content: '\f082'; }
.site-icon--menu::before { content: '\e5d2'; }
.site-icon--close::before { content: '\e5cd'; }
.site-icon--previous::before { content: '\e5c4'; }
.site-icon--next::before { content: '\e5c8'; }
.site-icon--play::before { content: '\f04b'; }
.site-icon--heart::before { content: '\f004'; }
.site-icon--thumb::before { content: '\f087'; }
.site-header { position: fixed; z-index: 99; padding: 20px 0; transition: padding .3s, background .3s, box-shadow .3s; }
.header-inner { width: calc(100% - 30px); max-width: none; min-height: 72px; gap: 20px; }
.brand { font-size: 26px; font-weight: 200; line-height: 1.2; }
.site-nav { padding-right: 15px; gap: 10px; }
.site-nav > a, .room-nav > summary { padding: 20px 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.6); line-height: 1.7; }
.site-header:not(.is-scrolled) .site-nav > a:hover { color: #fff; }
.room-nav > summary { min-height: 0; gap: 2px; }
.room-nav summary::after { content: '\e313'; font-family: SiteIcons; font-size: 16px; }
.room-nav ul { top: 100%; left: 0; right: auto; min-width: 200px; padding: 10px 0; background: #000; color: #fff; border-radius: 7px; box-shadow: 0 2px 10px -2px #0004; animation: dropdown-in .2s ease-out; }
.room-nav ul::before { content: ''; position: absolute; top: -14px; left: 23px; border: 7px solid transparent; border-bottom-color: #000; }
.room-nav li a { padding: 5px 20px; color: #fff; font-size: 16px; }
.room-nav li a:hover, .room-nav a[aria-current] { background: transparent; color: #9cd33a; }
.social-link { font-size: 32px !important; line-height: 0 !important; padding-block: 0 !important; color: #9cd33a !important; }
.site-header.is-scrolled { padding: 0; box-shadow: 0 0 30px -5px #0002; }
.site-header.is-scrolled .site-nav > a, .site-header.is-scrolled .room-nav > summary { color: rgba(0,0,0,.6); }
.site-header.is-scrolled .site-nav > a:hover, .site-header.is-scrolled .room-nav > summary:hover { color: #000; }
.menu-close, .nav-backdrop { display: none; }
@keyframes dropdown-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.home-hero, .room-hero { height: 100vh; min-height: 600px; max-height: none; overflow: hidden; }
.hero-slide { isolation: isolate; }
.hero-slide, .hero-slide * { -webkit-user-select:none; user-select:none; }
.hero-slide img { -webkit-user-drag:none; user-drag:none; }
.hero-slide::after, .room-hero::after { background: rgba(0,0,0,.4); }
.hero-image { z-index: -1; transform: translate3d(0,var(--parallax-y,0px),0); will-change: transform; }
.hero-content, .room-hero .hero-content { padding: 0 15px; max-width: 665px; margin-inline: auto; }
.hero-title, .room-hero h1 { font-size: 64px; font-weight: 900; line-height: 1.2; margin: 0 0 8px; }
.eyebrow { font-weight: 400; font-size: 12px; line-height: 1.7; letter-spacing: .2em; padding: 7px 10px; margin: 0; }
.room-hero .eyebrow { margin-bottom: 16px; }
.room-hero h1 { margin-bottom: 24px; }
.hero-slide.is-entering { animation: slide-fade-in 1s both; }
.hero-slide.is-leaving { animation: slide-fade-out 1s both; }
@keyframes slide-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-fade-out { from { opacity: 1; } to { opacity: 0; } }
.carousel-controls { inset: 50% 0 auto; transform: none; opacity: 0; transition: opacity .3s; display: block; height: 50px; pointer-events: none; }
.home-hero:hover .carousel-controls, .home-hero:focus-within .carousel-controls { opacity: 1; }
.carousel-controls button { position: absolute; top: -25px; width: 50px; height: 50px; border-radius: 0; border: 0; background: #0003; font-size: 25px; pointer-events: auto; }
.carousel-controls button:hover { background: #000; }
.carousel-controls [data-previous] { left: 10px; }
.carousel-controls [data-next] { right: 10px; }
.carousel-controls [data-pause] { left: calc(50% - 22px); top: calc(50vh - 72px); width: 44px; height: 44px; font-size: 17px; background: #0003; }
.home-hero + .booking-section { position: absolute; top: calc(max(600px, 100vh) - 145px); left: 0; width: 100%; transform: translateY(-100%); margin: 0; padding: 0; background: transparent; }
.home-hero + .booking-section .booking-box { width: calc(100% - 64px); max-width: 1100px; padding: 8px; background: rgb(156 211 58 / 75%); border-radius: 4px; }
.home-hero + .booking-section h2, .home-hero + .booking-section .booking-box > p, .home-hero + .booking-section.booking-ready .booking-fallback { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.booking-box [data-booking] { min-height: 100px; }
.booking-fallback { color: #23320e; }
.booking-fallback:focus-visible { position: static !important; width: auto !important; height: auto !important; clip-path: none !important; margin: 0 !important; }
.booking-section:not(.home-hero + .booking-section) { padding: 5rem 0; }
.booking-section:not(.home-hero + .booking-section) .booking-box { background: transparent; padding: 0 15px; }
.booking-section:not(.home-hero + .booking-section) h2 { font: 400 40px/1.2 'Playfair Display',Georgia,serif; text-align: center; margin-bottom: 3rem; color: #000; }
.booking-section:not(.home-hero + .booking-section) .booking-box > p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#BtnLaunchBooking { background: #000 !important; border-radius: 3px; }
.co-widget-btn-resume-capa { background: #373836 !important; border-radius: 3px; }
.co-widget-icon { color: #9cd33a !important; }
.co-widget-title { display: none !important; }
#ConstellationWidget { background: none !important; }
[data-booking] .co-widget-p-link-container { background: none !important; }
[data-booking] .co-widget-p-link-gift-voucher > a { background: #000 !important; border-radius: 3px; }
.about-grid { grid-template-columns: calc((100% + 30px)/2 - 30px) calc((100% + 30px)*5/12 - 30px); justify-content: space-between; gap: 0; }
.about-grid > div:last-child { padding-top: 65px; }
.about-grid .section-title { margin-bottom: 48px; }
.about-grid p { margin-bottom: 24px; }
.about-grid .text-link { font-size: 16px; letter-spacing: normal; }
.about-visual { margin: 0; }
.video-link { border: 0; padding: 0; }
.video-link::before { display: none; }
.play-icon { width: 100px; height: 100px; background: #fff3; color: #fff; font-size: 40px; }
.about-logo { width: 50%; right: -50px; bottom: -50px; }
.practical { margin-top: 0; padding-top: 65px; }
.practical h2 { position: relative; font: 400 40px/1.2 'Playfair Display',Georgia,serif; margin-bottom: 48px; }
.practical h2::after { content: ''; position: absolute; left: 0; bottom: -10px; width: 100px; height: 1px; background: #000; }
.practical ul { padding-left: 40px; }
.practical li { margin: 0 0 8px; }
.rooms-layout { grid-template-columns: 1fr 1fr; gap: 30px; }
.room-cards { grid-template-rows: repeat(3,auto); grid-auto-flow: column; gap: 0 30px; align-items: start; }
.room-card { overflow: hidden; transition: box-shadow .3s; }
.room-card img { aspect-ratio: 3/2; transition: transform .3s; }
.room-card:hover img { transform: scale(1.05); opacity: 1; }
.room-card:hover { box-shadow: 0 4px 20px #0001; }
.room-card-body { padding: 30px; }
.room-card h3 { font: 500 15px/1.2 'Work Sans',Arial,sans-serif; margin: 0; }
.room-included { align-self: center; }
.room-included li { margin-bottom: 8px; }
.cycling-grid { gap: 30px; }
.cycling-grid > a img { width: 100%; max-height: none; }
.services-grid { grid-template-columns: repeat(12,1fr); gap: 0; }
.service { grid-column: span 3; padding: 24px; }
.service:nth-child(n+5) { grid-column: span 4; }
.service-icon { display: block; font: 72px/1.2 ServiceIcons; color: #9cd33a; margin-bottom: 16px; }
.service-icon--wireless::before { content: '\f101'; }
.service-icon--terrace::before { content: '\f103'; }
.service-icon--parking::before { content: '\f100'; }
.service-icon--chess-pieces::before { content: '\f104'; }
.service-icon--coffee::before { content: '\f105'; }
.service-image { width: auto; height: 86px; margin: 0 auto 16px; object-fit: contain; }
.service:nth-child(4) .service-image { width: 72px; height: 72px; }
.service h3 { font-size: 20px; }
.photo-divider { height: 193px; background: none; position: relative; overflow: hidden; }
.photo-divider img { width: 100%; height: 100vh; max-width: none; object-fit: cover; position: absolute; top: 50%; transform: translateY(calc(-50% + var(--parallax-y,0px))); will-change: transform; }
.gallery { gap: 8px; }
.gallery img { aspect-ratio: auto; transition: opacity .2s; }
.gallery a:hover img { opacity: .5; }
.room-features { max-width: none; margin: 0 0 3rem; }
.capacity { text-align: left; font-size: 16px; color: var(--text); }
.room-features li { margin-bottom: 8px; }
.region-grid { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.region-grid::-webkit-scrollbar { display: none; }
.region-grid { cursor: grab; }
.region-grid.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.region-grid.is-dragging * { cursor: grabbing; }
.region-card { flex: 0 0 calc((100% - 40px)/3); min-width: 0; scroll-snap-align: start; padding: 24px; }
.region-card img { width: min(100%, 180px); height: 95px; object-fit: contain; margin: 0 auto 24px; display: block; }
.region-photo { display: block; position: relative; }
.region-photo::before { content: ''; position: absolute; z-index: -1; border: 5px solid #f8f9fa; }
.region-card h3 { font-size: 20px; margin-bottom: 0; }
.region-card h3 a { color: #000; }
.region-card p { font-size: 16px; }
.post-date { color: #0006; margin: 0 0 16px; }
.region-controls { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 20px; }
.region-controls > button { border: 0; width: 40px; height: 40px; background: #000; color: #fff; border-radius: 50%; }
.region-dots { display: flex; gap: 0; }
.region-dots button { border: 0; padding: 17px; width: 44px; height: 44px; background: transparent; }
.region-dots button::before { content: ''; display: block; width: 10px; height: 10px; background: #ccc; border-radius: 50%; }
.region-dots button[aria-current=true]::before { background: #9cd33a; }
.faq { font-size: 16px; }
.contact-grid { grid-template-columns: 2fr 1fr; gap: 30px; }
#contact > .container > .section-title, .contact-grid > div > p:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.contact-form { padding: 48px; }
.contact-form input:not([type=hidden]), .contact-form textarea { border-color: #ced4da; padding: 6px 12px; }
.contact-form input:not([type=hidden]) { height: 47px; }
.contact-info { padding: 24px; }
.contact-info h3 { font-size: 20px; }
.map-panel { height: 450px; }
.map-panel iframe { width: 100%; height: 100%; border: 0; }
.site-footer { background: transparent; position: relative; color: #ffffff80; padding: 64px 0; }
.site-footer::before { content: ''; position: absolute; inset: 0; background: #000c; }
.site-footer > .container { position: relative; }
.footer-grid { gap: 30px; }
.site-footer h2 { font-size: 20px; margin-bottom: 24px; }
.site-footer a { color: #ffffff4d; }
.site-footer a:hover { color: #fff; }
.site-footer .button { color: #fff; }
.footer-social-image { display: block; width: 90px; margin-bottom: 10px; }
.footer-bottom { border: 0; padding-top: 0; margin-top: 48px; font-size: 16px; }
.footer-bottom .site-icon { color: #9cd33a; }
.review-widget { position: fixed; bottom: 20px; left: 20px; z-index: 90; width: 260px; border-radius: 12px; background: #edc93d; color: #000; box-shadow: 0 4px 12px #0003; overflow: hidden; font-family: 'Segoe UI',Arial,sans-serif; }
.review-trigger { display: flex; align-items: center; gap: 12px; border: 0; background: #edc93d; width: 100%; padding: 12px 16px; text-align: left; }
.review-score { font-size: 18px; font-weight: 600; white-space: nowrap; }
.review-score small { font-size: 14px; }
.review-copy { font-size: 14px; font-weight: 600; flex: 1; }
.review-copy small { font-size: 12px; font-weight: 400; display: block; }
.review-trigger > .site-icon { font-size: 32px; }
.review-details { padding: 16px; background: #ffffffad; }
.review-details p { display: flex; align-items: center; justify-content: space-between; margin: 0; }
.review-details p + p { margin-top: 12px; }
.video-dialog { border: 0; background: transparent; padding: 40px 0 0; width: min(90vw,900px); max-width: 95vw; overflow: visible; }
.video-dialog::backdrop { background: #000c; }
.video-dialog > button { position: absolute; right: 0; top: 0; background: none; border: 0; color: #fff; font-size: 28px; width: 40px; height: 40px; }
.video-dialog iframe { display: block; width: 100%; aspect-ratio: 16/9; border: 0; background: #000; }
@media (max-width: 1199px) {
.container { max-width: 960px; }
.region-card { flex-basis: calc((100% - 20px)/2); }
.site-nav { gap: 0; padding-right: 0; }
.site-nav > a, .room-nav > summary { padding-inline: 8px; }
}
@media (max-width: 991px) {
.container { max-width: 720px; }
.header-inner { flex-wrap: nowrap; }
.menu-toggle { font-size: 28px; }
.site-nav.is-enhanced { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: fixed; top: 0; right: 0; width: 300px; max-width: 90vw; height: 100vh; height: 100dvh; max-height: none; padding: 80px 20px 150px; margin: 0; overflow-y: auto; background: #fff; color: #212529; z-index: 2000; transform: translateX(110%); opacity: 0; pointer-events: none; transition: transform .3s ease-in-out, opacity .3s; box-shadow: -10px 0 20px -10px #0002; }
.site-nav.is-enhanced.is-open { transform: translateX(0); opacity: 1; pointer-events: auto; }
.site-nav > a, .site-nav.is-open > a, .site-nav .room-nav > summary, .site-nav.is-open summary { text-transform: none; letter-spacing: normal; font-size: 20px; padding: 10px 20px; line-height: 1.7; color: #212529 !important; }
.site-nav > a:hover, .site-nav summary:hover { color: #9cd33a !important; }
.site-nav .social-link, .site-nav.is-open > .social-link { color: #9cd33a !important; min-height: 44px; padding-top: 20px !important; }
.site-nav.is-open .menu-close { display: block; position: absolute; top: 28px; right: 20px; border: 0; background: none; font-size: 30px; color: #777; width: 44px; height: 44px; }
.nav-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; border: 0; background: #0009; z-index: 1000; }
.site-header:has(.site-nav.is-open) { background: transparent; color: inherit; }
.site-header.is-scrolled:has(.site-nav.is-open) { background: #fff; }
.site-nav .room-nav > summary { justify-content: space-between; }
.site-nav .room-nav ul { position: static; animation: none; background: #fff; color: #212529; padding: 0; border-radius: 0; box-shadow: none; }
.site-nav .room-nav ul::before { display: none; }
.site-nav .room-nav li a { padding: 10px 40px; color: #212529; }
.region-card { flex-basis: 100%; }
.region-card img { width: min(100%, 155px); height: 82px; }
.about-grid { gap: 30px; grid-template-columns: 1fr 1fr; }
.about-logo { right: -20px; bottom: -30px; }
.service { grid-column: span 4; }
.service:nth-child(n+5) { grid-column: span 4; }
}
@media (min-width: 992px) {
.menu-toggle { display: none !important; }
.site-nav.is-enhanced { display: flex; width: auto; flex-wrap: nowrap; background: transparent; padding-block: 0; }
}
@media (max-width: 767px) {
:root { --space: 3rem; }
.container { max-width: 540px; }
.section-title { font-size: 40px; margin-bottom: 5rem; }
.header-inner { min-height: 72px; }
.home-hero, .room-hero { height: 100vh; min-height: 600px; }
.hero-content, .room-hero .hero-content { max-width: 100%; }
.hero-title { font-size: 64px; }
.room-hero h1 { font-size: 48px; font-weight: 500; }
.home-hero + .booking-section { top: calc(max(600px,100vh) - 30px); }
.home-hero + .booking-section .booking-box { width: calc(100% - 40px); padding: 8px; }
.about-grid, .rooms-layout, .cycling-grid, .contact-grid, .footer-grid { grid-template-columns: 1fr; gap: 48px; }
.about-visual { margin-bottom: 50px; }
.about-logo { right: -5px; bottom: -30px; }
.main-title { margin-bottom: 24px; }
.room-cards { display: flex; flex-direction: column; gap: 0; }
.room-card { width: 100%; }
.room-card-body { padding: 30px; }
.room-included li { margin-bottom: 8px; }
.gallery, .room-gallery { grid-template-columns: repeat(2,1fr); }
.service, .service:nth-child(n+5) { grid-column: span 6; }
.service-icon { font-size: 48px; line-height: 1.2; }
.service h3 { font-size: 20px; }
.contact-form { padding: 48px; }
.region-card { padding: 24px; }
.review-widget.is-over-booking { opacity: 0; pointer-events: none; }
}
@media (max-width: 575px) {
.container { max-width: none; }
.gallery, .room-gallery { grid-template-columns: 1fr; }
.service, .service:nth-child(n+5) { grid-column: span 12; }
}
@media (prefers-reduced-motion: reduce) {
.hero-slide.is-entering, .hero-slide.is-leaving { animation: none; }
.hero-image { transform: none; will-change: auto; }
.photo-divider img { transform: translateY(-50%); will-change: auto; }
}
.contact-form a { text-decoration: underline; text-underline-offset: .18em; }