/* =========================================================
   MAISON SPA DE CHANTAL — feuille de style partagée
   Palette vert bouteille + or, esprit jardin japonais
   ========================================================= */
:root{
  --green-900:#0f2a20;
  --green-850:#143226;
  --green-800:#17392c;
  --gold:#c2a06b;
  --gold-soft:#d8c39b;
  --cream:#f3eee3;
  --cream-2:#ece6d8;
  --ink:#2b2a26;
  --ink-soft:#6a675d;
  --line:rgba(0,0,0,.10);
  --sidebar-w:230px;
  --pad:60px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Jost',sans-serif;color:var(--ink);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,.serif{font-family:'Cormorant Garamond',serif;font-weight:500;line-height:1.08}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- placeholders (remplacer par les vraies photos) ---------- */
.ph{position:relative;background:linear-gradient(135deg,#1c3d30,#0e2820);overflow:hidden}
.ph::after{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:14px;color:rgba(216,195,155,.55);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.ph-light{background:linear-gradient(135deg,#e7e0d0,#d8cfba)}
.ph-light::after{color:rgba(120,105,75,.6)}

/* ---------- atoms ---------- */
.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:18px}
.btn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:0;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:17px 30px;transition:.25s ease;font-weight:500;text-align:center}
.btn-gold{background:var(--gold);color:#1a2620}
.btn-gold:hover{background:var(--gold-soft)}
.btn-line-light{background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff}
.btn-line-light:hover{background:rgba(255,255,255,.08);border-color:#fff}
.btn-line-dark{background:transparent;border:1px solid rgba(0,0,0,.3);color:var(--ink)}
.btn-line-dark:hover{background:rgba(0,0,0,.05)}
.btn-dark{background:var(--green-800);color:var(--cream)}
.btn-dark:hover{background:var(--green-850)}
.link-more{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:500;display:inline-flex;gap:8px;align-items:center;transition:.2s}
.link-more:hover{gap:13px}
.rule{width:46px;height:1px;background:var(--gold);margin:0 0 22px}

/* ---------- layout ---------- */
.layout{display:flex;min-height:100vh}

/* ---------- sidebar ---------- */
.sidebar{width:var(--sidebar-w);background:var(--green-900);color:var(--cream);position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;padding:34px 0 28px;z-index:50}
.brand{text-align:center;padding:0 24px 30px}
.monogram{font-family:'Cormorant Garamond',serif;color:var(--gold);font-size:46px;font-weight:600;line-height:.8;letter-spacing:-.04em}
.monogram span{font-size:30px;vertical-align:middle;margin:0 -3px}
.wordmark{margin-top:14px;color:var(--gold);font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:400;line-height:1.7}
.nav{display:flex;flex-direction:column;gap:2px;padding:6px 16px;flex:1;overflow-y:auto}
.nav a{display:flex;align-items:center;gap:13px;padding:10px 14px;border-radius:3px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#cfd4c9;transition:.2s;font-weight:400}
.nav a svg{width:16px;height:16px;flex:none;stroke:var(--gold);opacity:.85;fill:none;stroke-width:1.5}
.nav a:hover{color:#fff;background:rgba(255,255,255,.04)}
.nav a.active{color:var(--gold);background:rgba(194,160,107,.10)}
.sidebar-foot{text-align:center;padding:20px 28px 0}
.sidebar-foot .ornament{color:var(--gold);font-size:20px;opacity:.7;margin-bottom:12px}
.sidebar-foot p{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#9aa595;line-height:1.9}

/* ---------- main ---------- */
.main{margin-left:var(--sidebar-w);flex:1;min-width:0}

/* ---------- hero ---------- */
.hero{position:relative;min-height:540px;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero.tall{min-height:600px}
.hero .ph{position:absolute;inset:0}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,28,21,.82) 0%,rgba(10,28,21,.45) 55%,rgba(10,28,21,.12) 100%)}
.hero-content{position:relative;padding:70px var(--pad);max-width:680px;width:100%}
.hero h1{font-size:clamp(40px,5vw,66px);font-weight:500;margin:0 0 24px}
.hero-sub{font-size:16px;color:rgba(255,255,255,.88);font-weight:300;margin-bottom:34px;max-width:460px}

/* search strip (arrivée / départ / voyageurs) */
.search-strip{position:relative;background:var(--green-850);border:1px solid rgba(194,160,107,.3);display:grid;grid-template-columns:1fr 1fr 1fr auto;margin-top:30px;max-width:760px}
.search-strip .sb{padding:14px 22px;border-right:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:7px}
.search-strip label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.search-strip input,.search-strip select{background:transparent;border:0;color:#fff;font-family:'Jost';font-size:13px;outline:none}
.search-strip input::-webkit-calendar-picker-indicator{filter:invert(.8) sepia(.4)}
.search-strip select option{color:#1a2620}
.search-strip .btn{justify-content:center;white-space:nowrap}

/* ---------- features (icônes en ligne) ---------- */
.features{background:var(--cream);padding:54px var(--pad);display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.feature{text-align:center}
.feature .fi{color:var(--gold);margin-bottom:16px;display:flex;justify-content:center}
.feature .fi svg{width:34px;height:34px;stroke:var(--gold);fill:none;stroke-width:1.4}
.feature h4{font-family:'Jost';font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:9px}
.feature p{font-size:13px;color:var(--ink-soft)}

/* amenities (grille d'équipements compacte) */
.amenities{background:var(--cream);padding:48px var(--pad);text-align:center}
.amenities .top{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:30px;font-weight:500}
.amenities .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:24px}
.amenity{display:flex;flex-direction:column;align-items:center;gap:10px}
.amenity svg{width:28px;height:28px;stroke:var(--gold);fill:none;stroke-width:1.3}
.amenity span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);line-height:1.5}

/* stats (chiffres clés) */
.stats{display:flex;gap:38px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:4px}
.stat svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.3;margin-bottom:4px}
.stat .num{font-family:'Cormorant Garamond',serif;font-size:24px;color:#fff;line-height:1}
.stat .lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.8}

/* ---------- split (texte + média) ---------- */
.split{padding:84px var(--pad);display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
.split.media-left{grid-template-columns:1.1fr 1fr}
.split.dark{background:var(--green-850);color:var(--cream)}
.split.light{background:var(--cream)}
.split.cream2{background:var(--cream-2)}
.split h2{font-size:clamp(32px,3.6vw,46px);margin:8px 0 24px}
.split p.lead{font-size:15px;font-weight:300;margin-bottom:30px;max-width:440px}
.split.dark p.lead{color:#cdd3c8}
.split.light p.lead{color:var(--ink-soft)}
.split .ph{aspect-ratio:4/3;border-radius:2px}
.split .media-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.split .media-grid .ph{aspect-ratio:1/1}
.split .media-grid .ph.wide{grid-column:1/-1;aspect-ratio:16/7}

/* mini-features inside split */
.mini-feats{display:flex;gap:30px;margin:26px 0 30px;flex-wrap:wrap}
.mini-feat{text-align:center;max-width:120px}
.mini-feat svg{width:30px;height:30px;stroke:var(--gold);fill:none;stroke-width:1.3;margin-bottom:8px}
.mini-feat span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;line-height:1.5;display:block}

/* ---------- cards ---------- */
.cards-wrap{background:var(--cream-2);padding:64px var(--pad)}
.cards-wrap .sec-title{text-align:center;font-size:clamp(28px,3vw,40px);margin-bottom:34px}
.cards{display:grid;gap:22px}
.cards.c5{grid-template-columns:repeat(5,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;display:flex;flex-direction:column}
.card .ph{aspect-ratio:4/3}
.card-body{padding:22px 20px 24px;display:flex;flex-direction:column;flex:1}
.card h3{font-family:'Jost';font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:12px}
.card.room h3{font-family:'Cormorant Garamond',serif;font-size:22px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--ink);margin-bottom:4px}
.card .meta{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.card p{font-size:12.5px;color:var(--ink-soft);margin-bottom:18px;flex:1}

/* ---------- gallery ---------- */
.gallery{background:var(--green-900);color:var(--cream);padding:60px var(--pad) 70px}
.gallery-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:34px;gap:20px;flex-wrap:wrap}
.gallery-head h2{font-size:clamp(30px,3.2vw,42px);margin-top:6px}
.gallery-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.gallery-grid .ph{aspect-ratio:3/4;border-radius:2px}

/* masonry (page galerie) */
.tabs{display:flex;gap:30px;flex-wrap:wrap;justify-content:center;padding:30px var(--pad);background:var(--cream);border-bottom:1px solid var(--line)}
.tab{background:none;border:0;font-family:'Jost';font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer;padding:6px 2px;border-bottom:1px solid transparent;transition:.2s}
.tab.active,.tab:hover{color:var(--ink);border-color:var(--gold)}
.masonry{padding:40px var(--pad) 70px;background:var(--cream);columns:3;column-gap:14px}
.masonry .ph{width:100%;margin-bottom:14px;border-radius:2px;break-inside:avoid}
.masonry .ph.t1{aspect-ratio:3/4}
.masonry .ph.t2{aspect-ratio:4/5}
.masonry .ph.t3{aspect-ratio:1/1}
.masonry .ph.t4{aspect-ratio:4/3}

/* ---------- values / philosophy ---------- */
.values{display:grid;grid-template-columns:1fr 1fr;gap:30px 40px}
.value{display:flex;gap:16px}
.value svg{width:30px;height:30px;stroke:var(--gold);fill:none;stroke-width:1.3;flex:none;margin-top:3px}
.value h4{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:500;margin-bottom:5px}
.value p{font-size:13px;color:#cdd3c8}
.split.light .value p{color:var(--ink-soft)}

/* ---------- booking band ---------- */
.booking{background:var(--cream);padding:70px var(--pad)}
.booking-inner{display:grid;grid-template-columns:1fr 1.15fr;gap:50px;align-items:center}
.booking h2{font-size:clamp(30px,3.4vw,44px);margin:6px 0 16px}
.booking .lead{font-size:14px;color:var(--ink-soft);max-width:380px}
.widget{background:var(--green-850);padding:26px;display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:18px;align-items:end}
.widget .field{display:flex;flex-direction:column;gap:8px}
.widget label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.widget input,.widget select{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.25);color:#fff;font-family:'Jost';font-size:13px;padding:6px 2px;outline:none}
.widget input::-webkit-calendar-picker-indicator{filter:invert(.8) sepia(.4)}
.widget select option{color:#1a2620}
.widget .btn{justify-content:center;white-space:nowrap}
.badges{margin-top:40px;display:flex;flex-wrap:wrap;gap:30px;align-items:center;border-top:1px solid var(--line);padding-top:26px}
.badge{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-soft)}
.badge svg{width:18px;height:18px;stroke:var(--gold);fill:none;stroke-width:1.4}
.badge.contact{margin-left:auto;font-size:14px;color:var(--ink)}
.badge.contact b{font-weight:500}

/* dark CTA band (page réserver/famille) */
.cta-band{background:var(--green-850);color:var(--cream);padding:48px var(--pad);display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:center}
.cta-band h2{font-size:clamp(26px,3vw,38px)}
.cta-band .widget{background:rgba(255,255,255,.04);border:1px solid rgba(194,160,107,.25)}

/* ---------- testimonial ---------- */
.testimonial{background:var(--cream-2);padding:70px var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.testimonial .quote{font-family:'Cormorant Garamond',serif;font-size:22px;font-style:italic;line-height:1.5;color:var(--ink);margin:18px 0 22px}
.testimonial .stars{color:var(--gold);letter-spacing:4px;margin-bottom:10px}
.testimonial .who{font-size:13px;letter-spacing:.06em}
.testimonial .who b{font-weight:500}
.testimonial .ph{aspect-ratio:4/3;border-radius:2px}

/* ---------- contact ---------- */
.contact-sec{background:var(--cream);padding:72px var(--pad);display:grid;grid-template-columns:1fr 1.1fr .9fr;gap:46px}
.contact-form{display:flex;flex-direction:column;gap:14px}
.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form input,.contact-form textarea{font-family:'Jost';font-size:13px;padding:13px 14px;border:1px solid var(--line);background:#fff;color:var(--ink);outline:none}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--gold)}
.contact-form textarea{min-height:120px;resize:vertical}
.contact-form .check{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--ink-soft)}
.info-card{background:#fff;border:1px solid var(--line);padding:28px}
.info-card .it{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--line)}
.info-card .it:last-child{border-bottom:0}
.info-card svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:1.4;flex:none;margin-top:2px}
.info-card .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:2px}
.info-card .v{font-size:13px;color:var(--ink)}

/* map (mont-saint-michel) */
.map-sec{background:var(--cream);padding:72px var(--pad);display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:center}
.map-sec .ph{aspect-ratio:4/3;border-radius:2px}
.checklist{display:flex;flex-direction:column;gap:20px;margin-top:10px}
.checklist .it{display:flex;gap:14px}
.checklist svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.3;flex:none}
.checklist h4{font-family:'Jost';font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:3px}
.checklist p{font-size:13px;color:var(--ink-soft)}

/* excursions row */
.excursions{background:var(--cream);padding:20px var(--pad) 72px;text-align:center}
.excursions h2{font-size:clamp(28px,3vw,40px);margin-bottom:8px}
.excursions .sub{font-size:14px;color:var(--ink-soft);max-width:560px;margin:0 auto 36px}
.exc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.exc{text-align:left}
.exc .ph{aspect-ratio:3/2;border-radius:2px;margin-bottom:12px}
.exc h4{font-family:'Jost';font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:600}
.exc span{font-size:12px;color:var(--ink-soft)}

/* generic section heading centered */
.sec-head{text-align:center;padding:64px var(--pad) 0}
.sec-head h2{font-size:clamp(28px,3vw,42px);margin-top:6px}
.sec-head .sub{font-size:14px;color:var(--ink-soft);max-width:560px;margin:14px auto 0}

/* trust strip (bande sombre fine) */
.trust{background:var(--green-900);color:#cfd4c9;padding:22px var(--pad);display:flex;flex-wrap:wrap;gap:34px;justify-content:center;align-items:center}
.trust .t{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.04em}
.trust svg{width:17px;height:17px;stroke:var(--gold);fill:none;stroke-width:1.4}

/* ---------- footer ---------- */
footer{background:var(--green-900);color:#cfd4c9;padding:46px var(--pad);display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.04em}
footer .f-links{display:flex;gap:22px;flex-wrap:wrap}
footer .f-links a:hover{color:var(--gold)}
footer .f-social{display:flex;gap:14px}
footer .f-social a{width:34px;height:34px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.2s}
footer .f-social a:hover{border-color:var(--gold);color:var(--gold)}
footer .f-social svg{width:15px;height:15px;fill:currentColor}

/* ---------- mobile menu ---------- */
.menu-btn{display:none;position:fixed;top:16px;left:16px;z-index:60;background:var(--green-900);color:var(--gold);border:1px solid rgba(194,160,107,.4);width:46px;height:46px;border-radius:4px;cursor:pointer;align-items:center;justify-content:center}
.menu-btn svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.6}
.scrim{display:none}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .cards.c5,.gallery-grid,.exc-grid{grid-template-columns:repeat(3,1fr)}
  .amenities .grid{grid-template-columns:repeat(4,1fr)}
  .features{grid-template-columns:repeat(2,1fr);gap:30px}
  .masonry{columns:2}
  .contact-sec{grid-template-columns:1fr 1fr}
  .contact-sec .info-card{grid-column:1/-1}
}
@media(max-width:900px){
  :root{--sidebar-w:0px;--pad:28px}
  .menu-btn{display:flex}
  .sidebar{transform:translateX(-100%);transition:transform .3s ease;width:250px}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(8,20,15,.55);z-index:45}
  .main{margin-left:0}
  .hero-content{padding-top:90px}
  .split,.map-sec,.testimonial,.cta-band,.booking-inner{grid-template-columns:1fr;gap:34px}
  .split.media-left .media,.split.media-left>div:first-child{order:2}
  .values{grid-template-columns:1fr}
  .widget,.search-strip{grid-template-columns:1fr 1fr}
  .widget .btn,.search-strip .btn{grid-column:1/-1}
  .badge.contact{margin-left:0;width:100%}
  .stats{gap:26px}
}
@media(max-width:620px){
  .cards.c5,.cards.c3,.gallery-grid,.exc-grid{grid-template-columns:repeat(2,1fr)}
  .amenities .grid,.features{grid-template-columns:1fr 1fr}
  .masonry{columns:1}
  .widget,.search-strip{grid-template-columns:1fr}
  .contact-sec{grid-template-columns:1fr}
  .contact-form .row{grid-template-columns:1fr}
}

/* accessibilité */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}