*{box-sizing:border-box} :root{--navy:#06386e;--blue:#0647d9;--pale:#e7f7ff;--muted:#8882a5;--line:#e9edf4}html{scroll-behavior:smooth}body{margin:0;color:var(--navy);font-family:"DM Sans",Arial,sans-serif;background:#fff;font-size:16px}a{color:inherit;text-decoration:none}.topbar{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:24px 5.2%;color:#fff}.brand{display:flex;align-items:center;gap:10px;font-size:19px;line-height:1.02;letter-spacing:.25em;font-weight:400}.brand b{font-weight:400}.brand svg{width:64px;fill:none;stroke:currentColor;stroke-width:2}.nav{display:flex;gap:28px;align-items:center;font-size:14px}.nav a{transition:opacity .2s}.nav a:hover{opacity:.75}.nav-cta{padding:12px 18px;border:1px solid #ffffffa8;border-radius:30px}.menu-toggle{display:none;background:none;border:0;color:inherit;font-size:28px}.hero{position:relative;min-height:920px;padding:145px 5.2% 34px;overflow:hidden;background:linear-gradient(135deg,#6bcaff 0%,#d8f2ff 48%,#fff 74%)}.hero:before{content:"";position:absolute;inset:0 0 48% 0;background:linear-gradient(120deg,#64caff,#c4edff);z-index:0}.hero-copy{position:relative;z-index:2;max-width:720px;padding:10px 0 18px}.eyebrow{font-size:11px;letter-spacing:.2em;font-weight:700;color:#174f7b;margin:0 0 20px}h1,h2{font-family:"Playfair Display",Georgia,serif;font-weight:500;letter-spacing:-.035em}h1{font-size:clamp(42px,5.4vw,74px);line-height:1.04;margin:0 0 18px}.tagline{font-size:clamp(20px,2.1vw,27px);line-height:1.45;margin:0;color:#214b74}.hero-photo{position:absolute;right:0;top:245px;width:100%;height:550px;object-fit:cover;object-position:center 58%;z-index:1;mask-image:linear-gradient(to bottom,transparent 0%,black 12%,black 88%,transparent 100%)}.quick-facts{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);margin:430px auto 14px;max-width:900px;background:#ffffffed;border:1px solid #eef3fa;border-radius:20px;padding:19px 10px;box-shadow:0 8px 30px #0b47741a}.quick-facts div{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:14px;border-right:1px solid var(--line)}.quick-facts div:last-child{border:0}.fact-icon{font-size:30px;line-height:1;color:var(--blue)}.primary-button{display:flex;align-items:center;justify-content:center;gap:15px;background:#06396f;color:white;border-radius:40px;min-height:65px;padding:16px 26px;font-weight:600;font-size:18px;max-width:440px;margin:0 auto;box-shadow:0 8px 20px #07376b21;transition:transform .2s,background .2s}.primary-button:hover{transform:translateY(-2px);background:#07519a}.primary-button span{font-size:24px}.booking-links{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:760px;margin:20px auto 0}.booking-card{display:flex;align-items:center;justify-content:center;gap:12px;min-height:76px;padding:12px;border:1px solid #e7eaf2;border-radius:14px;box-shadow:0 2px 8px #0b47740b;background:#fff;color:#0647d9;font-size:14px;line-height:1.35}.brand-mark{font-size:25px;font-weight:700}.airbnb .brand-mark{color:#ff385c}.booking .brand-mark{background:#0755ce;color:#fff;border-radius:6px;padding:2px 6px}.whatsapp .brand-mark{color:#16b96a}.section-pad{padding:62px max(5.2%,calc((100% - 1120px)/2))}.intro h2,.section-heading h2,.perks h2{font-size:clamp(29px,3vw,40px);line-height:1.14;margin:0 0 15px}.intro p{max-width:680px;color:var(--muted);font-size:18px;line-height:1.6;margin:0 0 26px}.intro-photo{width:100%;max-height:420px;object-fit:cover;border-radius:18px;display:block}.gallery{padding-top:55px;padding-bottom:36px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.section-heading h2{margin:0;color:var(--blue)}.section-heading>a{color:var(--blue);font-size:14px;white-space:nowrap}.section-heading>a span{font-size:25px;margin-left:6px;vertical-align:-2px}.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:190px 150px;gap:12px}.gallery-grid img{width:100%;height:100%;object-fit:cover;border-radius:12px;min-width:0}.gallery-grid .gallery-main{grid-column:1/-1;grid-row:1}.perks{padding-top:20px;padding-bottom:55px}.perks h2{color:var(--blue);margin-bottom:22px}.perks-grid{display:grid;grid-template-columns:repeat(2,1fr)}.perks-grid article{padding:20px 16px;text-align:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.perks-grid article:nth-child(2n){border-right:0}.perks-grid article:nth-child(n+3){border-bottom:0}.line-icon{display:block;color:var(--blue);font-size:37px;line-height:1.2;margin-bottom:10px}.perks h3{font-size:16px;font-weight:500;margin:0 0 8px}.perks p{font-size:13px;color:var(--muted);line-height:1.5;margin:0 auto;max-width:260px}.location{padding-top:0;padding-bottom:42px}.location .section-heading{margin-bottom:14px}.map-preview{display:block;position:relative;height:190px;overflow:hidden;border-radius:13px;background:#e5f7ff}.map-preview img{width:100%;height:100%;object-fit:cover}.map-pin{position:absolute;left:43%;top:36%;color:#e64942;font-size:35px;text-shadow:0 2px 3px #fff}.map-label{position:absolute;left:47%;top:43%;color:#143c70;background:#ffffffd9;padding:4px 8px;border-radius:5px;font-size:15px}.distance{font-size:14px;margin:12px 0 0}.closing{min-height:330px;display:grid;place-items:center;text-align:center;padding:48px 20px;background:linear-gradient(#d8efff99,#e4f5ff9c),url("assets/sunset-view.jpg") center 65%/cover}.closing h2{font-size:clamp(30px,4vw,44px);margin:0 0 14px}.closing p{line-height:1.55;margin:0 0 25px}.closing .primary-button{min-height:60px;font-size:17px}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 5.2%;font-size:12px;color:#6e7e9c}.footer-brand{color:var(--navy);font-size:13px}.footer-brand span{letter-spacing:.18em}.footer-brand b{font-weight:400}.desktop-only{display:block}@media(min-width:900px){.hero{min-height:980px}.hero-photo{top:180px;right:0;width:65%;height:660px;mask-image:linear-gradient(to right,transparent 0%,black 20%,black 100%)}.hero-copy{padding-top:65px;max-width:48%;}.quick-facts{margin:350px 0 18px;max-width:720px}.booking-links{margin-left:0;margin-right:0}.intro{display:grid;grid-template-columns:1fr 1fr;gap:30px 50px;align-items:center}.intro h2,.intro p{grid-column:1}.intro-photo{grid-column:2;grid-row:1/3;height:100%;max-height:420px}.gallery-grid{grid-template-rows:300px 200px}.map-preview{height:250px}}@media(max-width:680px){.topbar{padding:25px 7%}.brand{font-size:15px;gap:6px}.brand svg{width:48px}.menu-toggle{display:block;position:relative;z-index:8}.nav{display:none;position:absolute;top:76px;left:5%;right:5%;padding:18px;background:#fff;color:var(--navy);border-radius:16px;box-shadow:0 10px 35px #00315d24;flex-direction:column;align-items:stretch;gap:18px}.nav.open{display:flex}.nav-cta{text-align:center;border-color:#d8e4f2}.hero{min-height:0;padding:130px 8% 30px}.hero:before{inset:0 0 60%}.hero-copy{padding:0 0 16px}.eyebrow{font-size:9px;margin-bottom:14px}.hero h1{font-size:clamp(40px,10vw,54px)}.tagline{font-size:20px}.hero-photo{top:330px;height:475px;object-position:48% center}.quick-facts{margin:385px auto 14px;padding:15px 3px;border-radius:14px;grid-template-columns:repeat(4,1fr)}.quick-facts div{font-size:11px;gap:7px}.fact-icon{font-size:26px}.primary-button{min-height:58px;font-size:16px;gap:10px}.booking-links{gap:7px;margin-top:16px}.booking-card{font-size:11px;gap:6px;min-height:72px;padding:8px 4px;border-radius:11px}.brand-mark{font-size:19px}.section-pad{padding:38px 8%}.intro h2,.section-heading h2,.perks h2{font-size:29px}.intro p{font-size:16px}.intro-photo{max-height:300px}.gallery{padding-top:35px;padding-bottom:30px}.section-heading{gap:8px}.section-heading>a{font-size:11px}.gallery-grid{grid-template-rows:190px 105px;gap:7px}.gallery-grid img{border-radius:8px}.perks{padding-top:15px;padding-bottom:35px}.perks-grid article{padding:18px 8px}.perks h3{font-size:13px}.perks p{font-size:11px}.line-icon{font-size:31px}.location{padding-top:0}.map-preview{height:145px}.map-label{font-size:12px}.distance{font-size:12px}.closing{min-height:280px;padding:40px 8%;background-position:center}.closing p{font-size:14px}.closing .primary-button{font-size:15px;max-width:320px}footer{padding:20px 8%;flex-wrap:wrap;font-size:11px}.desktop-only{display:none}}

/* Official Ocean Therapy logo */
.brand-logo {
  display: block;
  width: clamp(150px, 24vw, 245px);
  height: auto;
  max-height: 56px;
  object-fit: contain;
}
.footer-logo {
  width: 170px;
  max-height: 42px;
}


/* Mobile hero refinements requested: transparent white logo and editorial tagline */
.brand-logo {
  width: clamp(170px, 27vw, 260px);
  height: auto;
  max-height: 64px;
  object-fit: contain;
}
.footer-logo {
  width: 170px;
  max-height: 42px;
}
.hero-copy .eyebrow {
  color: rgba(255,255,255,.86);
  text-shadow: 0 1px 8px rgba(0,45,90,.18);
}
.hero-copy .tagline {
  color: #fff;
  max-width: 760px;
  margin: 0;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-shadow: 0 2px 18px rgba(0,42,82,.18);
}
.tagline-main,
.tagline-sub {
  display: block;
}
.tagline-main {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(34px, 5.8vw, 66px);
  font-weight: 400;
  line-height: 1.12;
}
.tagline-sub {
  margin-top: 7px;
  font-size: clamp(20px, 2.7vw, 31px);
  font-weight: 300;
  letter-spacing: .015em;
  line-height: 1.35;
}
@media (max-width: 680px) {
  .brand-logo {
    width: 150px;
    max-height: 45px;
  }
  .hero-copy {
    padding-top: 20px;
  }
  .hero-copy .eyebrow {
    margin-bottom: 24px;
  }
  .hero-copy .tagline {
    max-width: 100%;
  }
  .tagline-main {
    font-size: clamp(31px, 8.4vw, 43px);
    line-height: 1.08;
  }
  .tagline-sub {
    margin-top: 9px;
    font-size: clamp(19px, 5.1vw, 24px);
    line-height: 1.35;
  }
  .hero-photo {
    top: 330px;
  }
}


/* Localisation: interactive Google Maps in place of the sunset photo */
.location-map iframe,
.location-embed {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  border: 0;
  border-radius: inherit;
}
.location-map {
  overflow: hidden;
}

/* Requested final refinements: remove the white wash from the bottom photo and shorten availability buttons */
.closing {
  background: url("assets/sunset-view.jpg") center 65% / cover no-repeat !important;
}
.primary-button,
.closing .primary-button {
  min-height: 44px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
@media (max-width: 680px) {
  .primary-button, .closing .primary-button { min-height: 44px !important; padding-top: 8px !important; padding-bottom: 8px !important; }
}


/* Final mobile polish: wider map context and stronger sunset-section contrast */
.location-embed { min-height: 0 !important; }
.map-preview { height: 230px; }
.closing {
  background-image: linear-gradient(to bottom, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 34%, rgba(0,35,70,.48) 100%), url("assets/sunset-view.jpg") !important;
  background-position: center 65%;
}
.closing > div { position: relative; z-index: 1; transform: translateY(-20px); }
.closing h2 { color: #06386e; text-shadow: 0 1px 10px rgba(255,255,255,.28); margin-bottom: 18px; }
.closing p { color: #fff; font-weight: 600; text-shadow: 0 1px 4px rgba(0,25,55,.85), 0 2px 12px rgba(0,25,55,.45); }
@media (max-width: 680px) {
  .map-preview { height: 190px; }
  .closing { min-height: 300px; background-position: center 65%; }
  .closing > div { transform: translateY(-22px); }
  .closing h2 { font-size: clamp(28px, 7.5vw, 35px); }
  .closing p { font-size: 14px; }
}

/* Galerie défilante : flèches et balayage tactile */
.gallery-carousel{position:relative;padding:0 42px 30px}.gallery-viewport{overflow:hidden;border-radius:14px;touch-action:pan-y}.gallery-track{display:flex;gap:12px;transition:transform .35s ease;will-change:transform}.gallery-track img{flex:0 0 calc((100% - 24px)/3);width:calc((100% - 24px)/3);height:300px;object-fit:cover;border-radius:12px;display:block;background:#eef5f8}.gallery-arrow{position:absolute;z-index:2;top:42%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:50%;background:#fff;color:var(--navy);box-shadow:0 2px 12px #06284b24;font-size:30px;line-height:1;cursor:pointer}.gallery-prev{left:0}.gallery-next{right:0}.gallery-counter{position:absolute;bottom:0;left:0;right:0;text-align:center;color:var(--muted);font-size:12px}.gallery-arrow:disabled{opacity:.35;cursor:default}@media(min-width:900px){.gallery-track img{height:340px}}@media(max-width:680px){.gallery-carousel{padding:0 28px 26px}.gallery-track{gap:8px}.gallery-track img{flex:0 0 100%;width:100%;height:245px}.gallery-arrow{width:32px;height:32px;font-size:26px;background:#ffffffed}.gallery-prev{left:-1px}.gallery-next{right:-1px}.gallery-viewport{border-radius:10px}}
