:root{
  --green:#123f3a;
  --green-2:#1e5a52;
  --teal:#2f7f78;
  --sand:#f4ecde;
  --cream:#fffaf1;
  --orange:#dc6b2f;
  --coral:#c94f3a;
  --ink:#102a28;
  --muted:#667571;
  --white:#fff;
  --shadow:0 22px 60px rgba(16,42,40,.15);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"DM Sans",sans-serif;color:var(--ink);background:var(--cream);line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}
.skip-link{position:absolute;left:-999px}.skip-link:focus{left:1rem;top:1rem;z-index:999;background:#fff;padding:.75rem 1rem;border-radius:10px}
.site-header{position:fixed;z-index:100;top:18px;left:50%;transform:translateX(-50%);width:min(1180px,calc(100% - 28px));display:flex;align-items:center;justify-content:space-between;padding:10px 14px 10px 12px;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.65);border-radius:999px;box-shadow:0 14px 45px rgba(0,0,0,.13)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:"Playfair Display",serif;font-size:1.55rem;font-weight:700;color:var(--green)}
.brand img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.main-nav{display:flex;align-items:center;gap:24px}
.main-nav a{text-decoration:none;font-weight:600;font-size:.93rem}
.main-nav a:hover{color:var(--teal)}
.nav-cta{background:var(--green);color:#fff!important;padding:11px 19px;border-radius:999px}
.menu-toggle{display:none;border:0;background:none;font-size:1.6rem;color:var(--green)}
.hero{min-height:100svh;position:relative;display:flex;align-items:flex-end;padding:150px max(5vw,24px) 90px;background:url('assets/hero.jpg') center/cover no-repeat;color:#fff}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,32,30,.79) 0%,rgba(8,32,30,.48) 45%,rgba(8,32,30,.06) 78%),linear-gradient(0deg,rgba(8,32,30,.45),transparent 45%)}
.hero-content{position:relative;z-index:1;max-width:760px}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-weight:700;font-size:.78rem;margin:0 0 18px}
.eyebrow.dark{color:var(--teal)}
.hero h1,.section h2,.feature-content h2,.contact-section h2,.hours-card h2,.map-card h2{font-family:"Playfair Display",serif;line-height:1.02;margin:0}
.hero h1{font-size:clamp(3.8rem,8vw,7.8rem);letter-spacing:-.045em}
.hero h1 em{font-weight:600;color:#d3e4dc}
.hero-lead{font-size:clamp(1.05rem,1.7vw,1.35rem);max-width:720px;margin:26px 0 30px;color:rgba(255,255,255,.92)}
.hero-actions,.contact-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:13px 22px;border-radius:999px;text-decoration:none;font-weight:700;transition:.2s ease;border:1px solid transparent}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--green);color:#fff}
.btn-ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.48);color:#fff;backdrop-filter:blur(8px)}
.btn-whatsapp{background:#25d366;color:#07371a}
.btn-light{background:#fff;color:var(--green)}
.btn-outline{border-color:var(--green);color:var(--green);background:transparent}
.full{width:100%;margin-top:18px}
.scroll-cue{position:absolute;z-index:2;right:5vw;bottom:34px;width:48px;height:48px;border:1px solid rgba(255,255,255,.5);border-radius:50%;display:grid;place-items:center;text-decoration:none;font-size:1.4rem}
.section{padding:110px max(5vw,24px)}
.section-heading{max-width:760px;margin-bottom:48px}
.section-heading.compact{margin-bottom:36px}
.section-heading h2,.feature-content h2,.hours-card h2,.map-card h2{font-size:clamp(2.4rem,5vw,4.7rem);letter-spacing:-.035em}
.section-heading>p:last-child{font-size:1.13rem;color:var(--muted)}
.cards{display:grid;gap:24px}.cards.three{grid-template-columns:repeat(3,1fr)}
.activity-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card-image{height:260px;background-size:cover;background-position:center}
.card-body{padding:28px;display:flex;flex-direction:column;flex:1}
.card-kicker{font-size:.75rem;text-transform:uppercase;letter-spacing:.16em;color:var(--teal);font-weight:700}
.card-body h3{font-family:"Playfair Display",serif;font-size:2rem;margin:8px 0 12px}
.card-body p{color:var(--muted);margin:0 0 22px}
.card-footer{margin-top:auto;display:flex;justify-content:space-between;gap:15px;align-items:center}
.card-footer a{color:var(--teal);font-weight:700;text-underline-offset:4px}
.notice{margin-top:26px;padding:18px 22px;background:#e4f0eb;border-radius:18px;color:var(--green)}
.feature-section{display:grid;grid-template-columns:1.15fr .85fr;min-height:720px;background:var(--sand)}
.feature-image img{width:100%;height:100%;object-fit:cover}
.feature-content{padding:90px clamp(35px,6vw,95px);display:flex;flex-direction:column;justify-content:center}
.feature-lead{font-size:1.18rem;color:var(--muted)}
.check-list{list-style:none;padding:0;margin:24px 0}.check-list li{position:relative;padding:10px 0 10px 30px;border-bottom:1px solid rgba(16,42,40,.12)}.check-list li:before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:800}
.text-link{font-weight:700;color:var(--green);text-underline-offset:5px}
.menu-section{background:#fff}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.menu-column{padding:28px;border:1px solid #e5ddd0;border-radius:24px;background:var(--cream)}
.menu-column h3{font-family:"Playfair Display",serif;font-size:1.75rem;margin:0 0 16px;color:var(--green)}
.menu-column .subhead{margin-top:28px}
.menu-line{display:flex;gap:16px;justify-content:space-between;padding:10px 0;border-bottom:1px dotted #bbb}
.menu-line strong{white-space:nowrap;color:var(--coral)}
.pricing-section{background:var(--sand)}
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.price-card{background:#fff;border-radius:24px;padding:26px;box-shadow:0 10px 30px rgba(16,42,40,.08);border:1px solid rgba(16,42,40,.08)}
.price-card.featured{transform:translateY(-10px);border:2px solid var(--green)}
.badge{display:inline-block;background:var(--green);color:#fff;border-radius:999px;padding:7px 12px;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.badge.teal{background:var(--teal)}.badge.orange{background:#cf7a1a}.badge.coral{background:var(--coral)}
.price-card h3{font-family:"Playfair Display",serif;font-size:1.8rem;margin:18px 0}
.price-card h4{margin:15px 0 8px}
.price-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #eee}
.price-row strong{text-align:right}
.price-card hr{border:0;border-top:1px solid #e7e7e7;margin:18px 0}
.small{font-size:.88rem;color:var(--muted)}
.pricing-note{text-align:center;color:var(--muted);margin-top:28px}
.gallery-section{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:330px 330px;gap:10px;background:#fff;padding:10px}
.gallery-section figure{margin:0;overflow:hidden}.gallery-section img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.gallery-section figure:hover img{transform:scale(1.03)}
.gallery-main{grid-row:1/3}
.practical{display:grid;grid-template-columns:1fr 1fr;gap:24px;background:var(--cream)}
.hours-card,.map-card{border-radius:var(--radius);padding:38px;background:#fff;box-shadow:var(--shadow)}
.map-card{background:linear-gradient(145deg,#e7efe9,#d9e7df);display:flex;flex-direction:column;justify-content:space-between}
.hours-grid{display:grid;grid-template-columns:1fr auto;gap:8px 20px;margin:26px 0}.hours-grid span,.hours-grid strong{padding:7px 0;border-bottom:1px solid #eee}
.contact-section{padding:100px max(5vw,24px);background:linear-gradient(135deg,var(--green),#0a2b28);color:#fff;text-align:center}
.contact-inner{max-width:900px;margin:auto}
.contact-section h2{font-size:clamp(2.7rem,6vw,5.2rem);margin-bottom:18px}
.contact-section p{font-size:1.1rem;color:rgba(255,255,255,.82)}
.contact-actions{justify-content:center;margin-top:28px}
.socials{margin-top:30px;display:flex;justify-content:center;gap:12px}.socials a{font-weight:700}
footer{padding:34px 5vw;background:#071d1b;color:#dbe8e4;text-align:center}
footer p{margin:5px}.signature{font-family:"Playfair Display",serif;font-style:italic;font-size:1.35rem}
@media(max-width:1050px){
  .main-nav{position:absolute;top:76px;right:0;left:0;display:none;flex-direction:column;align-items:stretch;background:#fff;padding:18px;border-radius:24px;box-shadow:var(--shadow)}
  .main-nav.open{display:flex}.menu-toggle{display:block}
  .cards.three,.pricing-grid{grid-template-columns:repeat(2,1fr)}
  .feature-section{grid-template-columns:1fr}.feature-image{height:520px}
  .menu-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .site-header{top:8px}.brand span{font-size:1.25rem}.brand img{width:44px;height:44px}
  .hero{padding:130px 22px 60px;align-items:flex-end;background-position:58% center}
  .hero-overlay{background:linear-gradient(0deg,rgba(8,32,30,.84) 0%,rgba(8,32,30,.38) 65%,rgba(8,32,30,.08))}
  .hero h1{font-size:3.7rem}.hero-lead{font-size:1rem}
  .hero-actions .btn{width:100%}.scroll-cue{display:none}
  .section{padding:76px 20px}.cards.three,.pricing-grid,.menu-grid,.practical{grid-template-columns:1fr}
  .card-image{height:230px}.feature-image{height:360px}.feature-content{padding:65px 22px}
  .gallery-section{grid-template-columns:1fr 1fr;grid-template-rows:290px 220px 220px}.gallery-main{grid-column:1/3;grid-row:auto}
  .price-card.featured{transform:none}
  .contact-actions .btn{width:100%}
}


/* ===== Améliorations mobile v3 ===== */
@media(max-width:700px){
  body{overflow-x:hidden}
  .site-header{
    width:calc(100% - 16px);
    padding:8px 10px;
    border-radius:22px;
    top:8px;
  }
  .brand{gap:9px}
  .brand img{width:40px;height:40px}
  .brand span{font-size:1.12rem}
  .menu-toggle{font-size:1.45rem;padding:6px 8px}

  .main-nav{
    top:62px;
    left:0;
    right:0;
    padding:14px;
    border-radius:18px;
    gap:8px;
  }
  .main-nav a{
    padding:12px 14px;
    border-radius:12px;
    background:#f7f4ee;
  }
  .main-nav .nav-cta{
    background:var(--green);
    text-align:center;
  }

  .hero{
    min-height:92svh;
    padding:112px 18px 30px;
    align-items:flex-end;
    background-position:61% center;
  }
  .hero-overlay{
    background:
      linear-gradient(180deg,rgba(6,27,25,.08) 0%,rgba(6,27,25,.15) 35%,rgba(6,27,25,.84) 72%,rgba(6,27,25,.96) 100%);
  }
  .hero-content{max-width:none;width:100%}
  .eyebrow{
    font-size:.68rem;
    letter-spacing:.12em;
    margin-bottom:12px;
  }
  .hero h1{
    font-size:clamp(2.85rem,14vw,4.15rem);
    line-height:.94;
    letter-spacing:-.05em;
  }
  .hero h1 br{display:none}
  .hero h1 em{
    display:block;
    margin-top:4px;
  }
  .hero-lead{
    font-size:.98rem;
    line-height:1.48;
    margin:18px 0 20px;
    max-width:33rem;
  }
  .hero-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .hero-actions .btn{
    width:100%;
    min-height:48px;
    padding:12px 14px;
    font-size:.9rem;
  }
  .hero-actions .btn:first-child{
    grid-column:1/3;
  }

  .section{
    padding:68px 16px;
  }
  .section-heading{margin-bottom:30px}
  .section-heading h2,
  .feature-content h2,
  .hours-card h2,
  .map-card h2{
    font-size:2.35rem;
    line-height:1.03;
  }
  .section-heading>p:last-child{
    font-size:1rem;
    line-height:1.55;
  }

  .cards.three{
    grid-template-columns:1fr;
    gap:18px;
  }
  .activity-card{
    border-radius:22px;
  }
  .card-image{height:210px}
  .card-body{padding:22px}
  .card-body h3{font-size:1.75rem}
  .card-footer{
    flex-direction:column;
    align-items:flex-start;
  }
  .notice{
    margin-top:18px;
    font-size:.9rem;
    padding:16px;
  }

  .feature-image{height:300px}
  .feature-content{
    padding:52px 18px 58px;
  }
  .feature-lead{font-size:1rem}
  .check-list li{font-size:.95rem}

  .menu-section{padding-top:62px}
  .menu-grid{gap:14px}
  .menu-column{
    padding:20px;
    border-radius:20px;
  }
  .menu-column h3{font-size:1.55rem}
  .menu-line{
    font-size:.9rem;
    align-items:flex-start;
  }
  .menu-line span{max-width:72%}
  .menu-line strong{font-size:.88rem}

  .pricing-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
  .price-card{
    padding:22px;
    border-radius:20px;
  }
  .price-card h3{font-size:1.6rem}
  .price-row{font-size:.92rem}
  .price-row span{max-width:64%}
  .price-row strong{font-size:.9rem}
  .full{margin-top:14px}

  .gallery-section{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:8px 8px 14px;
    scroll-snap-type:x mandatory;
  }
  .gallery-section figure,
  .gallery-main{
    min-width:84vw;
    height:280px;
    flex:0 0 84vw;
    grid-column:auto;
    grid-row:auto;
    scroll-snap-align:center;
    border-radius:18px;
  }

  .practical{
    grid-template-columns:1fr;
    gap:16px;
  }
  .hours-card,.map-card{
    padding:24px;
    border-radius:22px;
  }
  .hours-grid{
    gap:6px 12px;
    font-size:.92rem;
  }
  .map-card{gap:22px}

  .contact-section{
    padding:72px 16px;
  }
  .contact-section h2{
    font-size:2.7rem;
    line-height:1.02;
  }
  .contact-section p{
    font-size:1rem;
  }
  .contact-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .contact-actions .btn{width:100%}
  .socials{
    flex-wrap:wrap;
    gap:8px 12px;
  }

  footer{
    padding:28px 18px;
    font-size:.84rem;
  }
  .signature{font-size:1.2rem}
}

@media(max-width:380px){
  .hero h1{font-size:2.7rem}
  .hero-actions{grid-template-columns:1fr}
  .hero-actions .btn:first-child{grid-column:auto}
  .brand span{font-size:1rem}
}


/* ===== Correctif mobile v4 ===== */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 760px) {
  * {
    min-width: 0;
  }

  body {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
  }

  .site-header {
    position: fixed;
    top: 8px;
    left: 8px;
    right: 8px;
    transform: none;
    width: auto;
    max-width: none;
    padding: 8px 10px;
    border-radius: 18px;
    z-index: 1000;
  }

  .brand {
    gap: 8px;
    max-width: calc(100% - 58px);
  }

  .brand img {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }

  .brand span {
    font-size: 1.08rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .menu-toggle {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 12px;
    background: #eef3ef;
    font-size: 1.35rem;
    line-height: 1;
  }

  .main-nav {
    display: none;
    position: fixed;
    top: 66px;
    left: 8px;
    right: 8px;
    width: auto;
    max-height: calc(100vh - 78px);
    overflow-y: auto;
    padding: 10px;
    gap: 6px;
    border-radius: 18px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 18px 45px rgba(0,0,0,.2);
    z-index: 999;
  }

  .main-nav.open {
    display: flex;
  }

  .main-nav a {
    display: block;
    width: 100%;
    padding: 13px 14px;
    border-radius: 12px;
    background: #f4f6f2;
    font-size: 1rem;
    line-height: 1.2;
  }

  .main-nav .nav-cta {
    background: var(--green);
    color: #fff !important;
    text-align: center;
    margin-top: 4px;
  }

  .hero {
    min-height: 86svh;
    width: 100%;
    padding: 104px 18px 28px;
    background-position: 60% center;
    align-items: flex-end;
  }

  .hero-content {
    width: 100%;
    max-width: 100%;
  }

  .hero h1 {
    font-size: clamp(2.75rem, 12vw, 4rem);
    line-height: .96;
    margin: 0;
    max-width: 100%;
  }

  .hero h1 br {
    display: none;
  }

  .hero h1 em {
    display: block;
    margin-top: 4px;
  }

  .hero-lead {
    font-size: 1rem;
    line-height: 1.5;
    margin: 18px 0 20px;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .hero-actions .btn {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    font-size: .95rem;
  }

  .section,
  .contact-section {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .section-heading,
  .section-heading.compact {
    width: 100%;
    margin-bottom: 28px;
  }

  .section-heading h2,
  .feature-content h2,
  .hours-card h2,
  .map-card h2 {
    font-size: 2.25rem;
    line-height: 1.04;
  }

  .cards.three,
  .pricing-grid,
  .menu-grid,
  .practical {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 16px;
  }

  .activity-card,
  .price-card,
  .menu-column,
  .hours-card,
  .map-card {
    width: 100%;
    max-width: 100%;
  }

  .card-image {
    height: 210px;
  }

  .card-body {
    padding: 20px;
  }

  .card-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .feature-section {
    display: block;
    width: 100%;
  }

  .feature-image {
    width: 100%;
    height: 300px;
  }

  .feature-content {
    width: 100%;
    padding: 50px 18px 56px;
  }

  .menu-column {
    padding: 20px;
  }

  .menu-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    font-size: .92rem;
  }

  .menu-line span {
    max-width: none;
  }

  .price-card.featured {
    transform: none;
  }

  .price-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    font-size: .92rem;
  }

  .price-row span {
    max-width: none;
  }

  .gallery-section {
    display: flex;
    width: 100%;
    gap: 10px;
    overflow-x: auto;
    padding: 10px 10px 16px;
    scroll-snap-type: x mandatory;
  }

  .gallery-section figure,
  .gallery-main {
    flex: 0 0 86vw;
    width: 86vw;
    min-width: 86vw;
    height: 285px;
    border-radius: 18px;
    overflow: hidden;
    scroll-snap-align: center;
  }

  .hours-grid {
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    font-size: .93rem;
  }

  .map-card {
    gap: 24px;
  }

  .contact-section {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .contact-section h2 {
    font-size: 2.55rem;
  }

  .contact-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .contact-actions .btn {
    width: 100%;
  }

  footer {
    padding: 28px 16px;
  }
}

@media (max-width: 390px) {
  .hero h1 {
    font-size: 2.55rem;
  }

  .brand span {
    font-size: 1rem;
  }
}