/* ============================================================
   MAS BOIS FONTAINE — design system
   Élégance méditerranéenne : lin, encre verte, terracotta
   ============================================================ */
:root{
  --lin:      #F7F3EC;
  --lin-2:    #EFE8DC;
  --blanc:    #FFFDF9;
  --encre:    #232A20;
  --encre-2:  #39422F;
  --olive:    #5A6540;
  --terra:    #BC6844;
  --terra-2:  #A55836;
  --sable:    #E1D7C4;
  --gris:     #6E6F63;
  --display:  'Marcellus', serif;
  --accent:   'Cormorant Garamond', serif;
  --body:     'Mulish', sans-serif;
  --max:      1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body); color:var(--encre); background:var(--lin);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.12}
h1{font-size:clamp(2.6rem,6vw,4.6rem);letter-spacing:.01em}
h2{font-size:clamp(1.9rem,3.4vw,2.7rem)}
h3{font-size:1.25rem}
p{max-width:62ch}

/* --- texture de fond discrète --- */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:radial-gradient(rgba(35,42,32,.035) 1px, transparent 1px);
  background-size:26px 26px;
}
main,section,header,footer{position:relative;z-index:1}

/* ============================== header */
.site-header{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:2rem;
  padding:.9rem clamp(1.2rem,4vw,3rem);
  background:rgba(247,243,236,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--sable);
}
.brand{display:flex;flex-direction:column;line-height:1.1;margin-right:auto}
.brand-main{font-family:var(--display);font-size:1.28rem;letter-spacing:.06em}
.brand-sub{font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;color:var(--olive)}
.nav{display:flex;gap:1.7rem}
.nav a{
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:.35rem 0;border-bottom:2px solid transparent;transition:.25s;
}
.nav a:hover,.nav a.on{border-color:var(--terra);color:var(--terra-2)}
.nav-resa{display:none}
.burger{display:none;background:none;border:0;cursor:pointer;padding:.4rem}
.burger span{display:block;width:24px;height:2px;background:var(--encre);margin:5px 0;transition:.3s}

/* ============================== boutons */
.btn{
  display:inline-block;padding:.85rem 1.9rem;font-size:.8rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;border:1px solid transparent;
  transition:.25s;cursor:pointer;text-align:center;
}
.btn-terra{background:var(--terra);color:var(--blanc)}
.btn-terra:hover{background:var(--terra-2)}
.btn-encre{background:transparent;color:var(--encre);border-color:var(--encre)}
.btn-encre:hover{background:var(--encre);color:var(--lin)}
.btn-ghost{background:transparent;color:var(--blanc);border-color:rgba(255,255,255,.7)}
.btn-ghost:hover{background:rgba(255,255,255,.15)}
.btn-lin{background:var(--lin);color:var(--encre)}
.btn-lin:hover{background:var(--sable)}
.btn-nav{padding:.7rem 1.4rem}
.lien{
  font-family:var(--accent);font-style:italic;font-size:1.15rem;color:var(--terra-2);
  border-bottom:1px solid currentColor;transition:.2s;
}
.lien:hover{color:var(--encre)}

/* ============================== hero */
.hero{position:relative;height:100svh;min-height:620px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero-im{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:heroZoom 14s ease-out forwards}
@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,25,17,.35) 0%,rgba(20,25,17,.25) 45%,rgba(20,25,17,.62) 100%)}
.hero-inner{position:relative;color:var(--blanc);padding:0 1.5rem;display:flex;flex-direction:column;align-items:center}
.hero-kicker{
  font-size:.75rem;letter-spacing:.42em;text-transform:uppercase;margin-bottom:1.4rem;
  opacity:0;animation:rise .9s .2s ease-out forwards;
}
.hero h1{opacity:0;animation:rise 1s .45s ease-out forwards;text-shadow:0 2px 30px rgba(0,0,0,.3)}
.hero-sub{
  font-family:var(--accent);font-style:italic;font-size:clamp(1.1rem,2.2vw,1.45rem);
  margin-top:1.4rem;opacity:0;animation:rise 1s .7s ease-out forwards;max-width:none;
}
.hero-cta{display:flex;gap:1rem;margin-top:2.2rem;flex-wrap:wrap;justify-content:center;opacity:0;animation:rise 1s .95s ease-out forwards}
.hero-scroll{
  position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.85);
  font-size:.68rem;letter-spacing:.4em;text-transform:uppercase;padding-bottom:26px;
}
.hero-scroll::after{content:'';position:absolute;bottom:0;left:50%;width:1px;height:20px;background:rgba(255,255,255,.7);animation:drop 1.8s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ============================== sections */
.sec{padding:clamp(4rem,8vw,7rem) clamp(1.2rem,5vw,4rem);max-width:calc(var(--max) + 8rem);margin:0 auto}
.sec-lin{background:var(--lin-2);max-width:none}
.sec-lin>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.eyebrow{
  font-family:var(--accent);font-style:italic;font-size:1.2rem;color:var(--terra-2);
  margin-bottom:.9rem;
}
.eyebrow::after{content:'';display:inline-block;width:52px;height:1px;background:var(--terra);margin-left:.8rem;vertical-align:middle}
.sec-head{text-align:center;margin-bottom:3.2rem}
.sec-head .eyebrow::after{display:none}
.sec-head .eyebrow::before{content:'— ';color:var(--terra)}
.sec-lead{margin:1rem auto 0;color:var(--gris)}
.center{text-align:center;margin-top:3rem}

/* split */
.sec-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.split-txt h2{margin-bottom:1.4rem}
.split-txt p{margin-bottom:1.1rem;color:var(--encre-2)}
.split-im{position:relative;padding-bottom:3.5rem;padding-right:3rem}
.split-im img{width:100%;aspect-ratio:4/3.4;object-fit:cover;box-shadow:0 30px 60px -25px rgba(35,42,32,.4)}
.split-im-2{
  position:absolute;right:0;bottom:0;width:52% !important;aspect-ratio:1/1 !important;
  border:6px solid var(--lin);
}
.sec-lin .split-im-2{border-color:var(--lin-2)}

/* ============================== cards */
.grid-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}
.card{background:var(--blanc);border:1px solid var(--sable);transition:.35s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -22px rgba(35,42,32,.35)}
.card-im{position:relative;overflow:hidden;aspect-ratio:4/3}
.card-im img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.card:hover .card-im img{transform:scale(1.06)}
.badge{
  position:absolute;top:1rem;left:1rem;z-index:2;background:var(--terra);color:var(--blanc);
  font-size:.62rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;padding:.4rem .8rem;
}
.card-body{padding:1.4rem 1.5rem 1.6rem}
.card-body h3{margin-bottom:.3rem}
.card-body p{font-size:.92rem;color:var(--gris)}
.card-meta{
  margin-top:.8rem;font-size:.72rem !important;letter-spacing:.18em;text-transform:uppercase;
  color:var(--olive) !important;font-weight:700;
}

/* mini row (madone teaser) */
.mini-row{display:grid;grid-template-columns:repeat(6,1fr);gap:1.2rem}
.mini{position:relative;overflow:hidden;aspect-ratio:3/4}
.mini img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.mini:hover img{transform:scale(1.07)}
.mini span{
  position:absolute;inset:auto 0 0 0;padding:2.2rem .9rem .9rem;color:var(--blanc);
  font-family:var(--display);font-size:.98rem;text-align:center;
  background:linear-gradient(180deg,transparent,rgba(20,25,17,.75));
}

/* ============================== bande sombre MH */
.mh-band{
  background:var(--encre);color:var(--lin);padding:clamp(4rem,8vw,6.5rem) 1.5rem;text-align:center;
  background-image:
    radial-gradient(ellipse at 18% 10%, rgba(188,104,68,.16), transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(90,101,64,.28), transparent 50%);
}
.mh-band-photo{background-size:cover;background-position:center}
.mh-inner{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.mh-band .eyebrow{color:#D89A76}
.mh-band h2{font-size:clamp(2.2rem,4.5vw,3.4rem)}
.mh-lead{font-family:var(--accent);font-style:italic;font-size:clamp(1.15rem,2vw,1.4rem);color:#EDE5D4;max-width:none}
.mh-band p{color:#C9C4B4}
.mh-band .btn{margin-top:.8rem}
.center-cta{justify-content:center}

/* ============================== page head */
.page-head{padding:clamp(4rem,8vw,6rem) 1.5rem 1rem;text-align:center;max-width:900px;margin:0 auto}
.page-head h1{margin-bottom:1.2rem}
.page-head p{margin:0 auto;color:var(--gris)}
.page-head a{color:var(--terra-2);border-bottom:1px solid currentColor}
.page-head-dark{max-width:none;background:var(--encre);color:var(--lin);padding-bottom:clamp(4rem,8vw,6rem);
  background-image:radial-gradient(ellipse at 80% 0%, rgba(188,104,68,.18), transparent 55%)}
.page-head-dark .eyebrow{color:#D89A76}
.page-head-dark p{color:#C9C4B4}

/* ============================== fiche logement */
.fiche-hero{position:relative;height:62svh;min-height:440px;display:flex;align-items:flex-end;overflow:hidden}
.fiche-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fiche-hero-txt{position:relative;color:var(--blanc);padding:0 clamp(1.5rem,5vw,4rem) 3.2rem;max-width:var(--max);margin:0 auto;width:100%}
.fiche-hero-txt .hero-kicker{animation:none;opacity:1;margin-bottom:.8rem}
.fiche-hero-txt h1{font-size:clamp(2.4rem,5vw,3.8rem)}
.fiche-hero-txt .hero-sub{animation:none;opacity:1;margin-top:.7rem}

.stats{
  display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--max);margin:-2.4rem auto 0;
  position:relative;z-index:5;background:var(--blanc);border:1px solid var(--sable);
  box-shadow:0 24px 48px -28px rgba(35,42,32,.35);
}
.stats div{padding:1.5rem 1.6rem;border-left:1px solid var(--sable);font-family:var(--display);font-size:1.02rem}
.stats div:first-child{border-left:0}
.stats span{display:block;font-family:var(--body);font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--terra-2);margin-bottom:.4rem}

.fiche-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:start}
.fiche-txt h2{margin-bottom:1.4rem}
.fiche-txt p{margin-bottom:1.1rem;color:var(--encre-2)}
.fiche-txt .hero-cta{justify-content:flex-start;margin-top:1.8rem}
.fiche-side{background:var(--blanc);border:1px solid var(--sable);padding:2rem;position:sticky;top:96px}
.fiche-side h3{margin-bottom:1rem}
.fiche-side h3:not(:first-child){margin-top:1.8rem}
.equip{list-style:none}
.equip li{padding:.42rem 0 .42rem 1.6rem;position:relative;font-size:.95rem;border-bottom:1px dashed var(--sable)}
.equip li:last-child{border-bottom:0}
.equip li::before{content:'';position:absolute;left:0;top:1.05em;width:9px;height:1px;background:var(--terra)}

/* ============================== galerie */
.gallery{columns:3;column-gap:1.1rem;max-width:var(--max);margin:0 auto}
.gallery img{width:100%;margin-bottom:1.1rem;cursor:zoom-in;transition:.3s;break-inside:avoid}
.gallery img:hover{opacity:.88}

/* ============================== la madone */
.mad-list{display:flex;flex-direction:column;gap:clamp(4rem,7vw,6rem)}
.mad{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.mad-rev .mad-im{order:2}
.mad-im img{width:100%;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in;box-shadow:0 30px 60px -25px rgba(35,42,32,.4)}
.mad-txt h2{margin-bottom:1rem}
.mad-txt>p{color:var(--encre-2)}
.mad-txt .card-meta{margin-top:1rem}
.mad-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin:1.4rem 0 1.8rem}
.mad-thumbs img{aspect-ratio:1/1;object-fit:cover;width:100%;cursor:zoom-in;transition:.25s}
.mad-thumbs img:hover{opacity:.85}

/* ============================== quatre (cartes texte) */
.quatre{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.q{background:var(--blanc);border:1px solid var(--sable);padding:1.9rem 1.7rem;transition:.3s}
.q:hover{transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(35,42,32,.3)}
.q h3{margin-bottom:.7rem}
.q h3 em{font-family:var(--accent);font-size:.9em;color:var(--terra-2)}
.q p{font-size:.93rem;color:var(--gris)}

/* ============================== resa / map / contact */
.resa-tabs{display:flex;justify-content:center;gap:.8rem;margin:2.2rem auto 0;padding:0 1.2rem}
.tab{
  font-family:var(--body);font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:.85rem 1.9rem;border:1px solid var(--encre);background:transparent;color:var(--encre);
  cursor:pointer;transition:.25s;
}
.tab:hover{background:var(--sable)}
.tab.on{background:var(--encre);color:var(--lin);border-color:var(--encre)}
.resa-note{
  text-align:center;font-family:var(--accent);font-style:italic;font-size:1.15rem;color:var(--terra-2);
  margin:1.4rem auto .6rem;max-width:none;
}

.resa-wrap{max-width:1000px;margin:2rem auto 5rem;padding:0 1.2rem}
.resa-wrap iframe{width:100%;height:1900px;border:1px solid var(--sable);background:var(--blanc)}
.map-wrap{height:420px;box-shadow:0 30px 60px -25px rgba(35,42,32,.35)}
.map-wrap iframe{width:100%;height:100%;border:0;filter:sepia(.18) saturate(.85)}
.map-tall{height:520px}
.coord{list-style:none;margin-bottom:1.8rem}
.coord li{padding:.8rem 0;border-bottom:1px dashed var(--sable)}
.coord span{display:block;font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--terra-2)}
.coord a{border-bottom:1px solid var(--sable)}
.acces{margin-top:1.6rem;font-size:.92rem;color:var(--gris)}
.sec-loc{align-items:center}

/* ============================== footer */
.site-footer{background:var(--encre);color:#C9C4B4;padding:4rem clamp(1.5rem,5vw,4rem) 2rem;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem;max-width:var(--max);margin:0 auto 3rem}
.foot-brand{font-family:var(--display);font-size:1.5rem;color:var(--lin);margin-bottom:.8rem}
.foot-tag{font-size:.88rem;margin-bottom:1rem}
.foot-h{font-size:.68rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:#D89A76;margin-bottom:1rem}
.foot-grid a{display:block;padding:.28rem 0;font-size:.92rem;transition:.2s}
.foot-grid a:hover{color:var(--lin)}
.foot-legal{text-align:center;font-size:.75rem;border-top:1px solid rgba(255,255,255,.12);padding-top:1.6rem;max-width:var(--max);margin:0 auto;color:#8B887A}

/* ============================== lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(20,25,17,.94);display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox img{max-width:88vw;max-height:88vh;object-fit:contain;box-shadow:0 20px 80px rgba(0,0,0,.5)}
.lb-close,.lb-prev,.lb-next{
  position:absolute;background:none;border:0;color:var(--lin);font-size:2.6rem;cursor:pointer;
  padding:.5rem 1.1rem;transition:.2s;line-height:1;
}
.lb-close{top:1rem;right:1.4rem}
.lb-prev{left:.6rem;top:50%;transform:translateY(-50%);font-size:3.4rem}
.lb-next{right:.6rem;top:50%;transform:translateY(-50%);font-size:3.4rem}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{color:var(--terra)}

/* ============================== responsive */
@media (max-width:1020px){
  .grid-cards{grid-template-columns:repeat(2,1fr)}
  .quatre{grid-template-columns:repeat(2,1fr)}
  .mini-row{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats div:nth-child(3){border-left:0}
  .stats div{border-top:1px solid var(--sable)}
  .stats div:nth-child(-n+2){border-top:0}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .nav{
    position:fixed;inset:64px 0 auto 0;background:var(--lin);flex-direction:column;gap:0;
    border-bottom:1px solid var(--sable);padding:.5rem 0;display:none;z-index:49;
  }
  .nav.open{display:flex}
  .nav a{padding:.9rem 2rem;border-bottom:1px solid var(--sable)}
  .nav .nav-resa{display:block;color:var(--terra-2);font-weight:700}
  .burger{display:block}
  .btn-nav{display:none}
  .sec-split,.fiche-grid,.mad,.mad-rev{grid-template-columns:1fr}
  .mad-rev .mad-im{order:0}
  .fiche-side{position:static}
  .gallery{columns:2}
  .split-im{padding-right:0}
}
@media (max-width:560px){
  .grid-cards,.quatre{grid-template-columns:1fr}
  .mini-row{grid-template-columns:repeat(2,1fr)}
  .gallery{columns:1}
  .stats{grid-template-columns:1fr}
  .stats div{border-left:0}
  .stats div:nth-child(-n+2){border-top:0}
  .stats div:not(:first-child){border-top:1px solid var(--sable)}
  .br-lg{display:none}
  .foot-grid{grid-template-columns:1fr}
}