@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Work+Sans:wght@300;400;500;600&display=swap');

:root{
  --limestone:#EFE4CB;
  --limestone-deep:#DFCBA0;
  --tuile:#B9612F;
  --tuile-dark:#96491F;
  --armagnac:#6E4420;
  --pine:#33402C;
  --pine-deep:#242E1F;
  --text:#2E2A22;
  --text-soft:#5C5240;
  --line:#CBB98D;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Work Sans', sans-serif;
  font-weight:300;
  color:var(--text);
  background:var(--limestone);
  line-height:1.65;
  overflow-x:hidden;
}
h1,h2,h3{ font-family:'Fraunces', serif; font-weight:500; }
a{ color:inherit; text-decoration:none; }
img{ display:block; width:100%; height:100%; object-fit:cover; }

.eyebrow{
  font-family:'Work Sans', sans-serif;
  font-size:.72rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tuile-dark);
}

/* ---------- TILE EDGE (signature motif) ---------- */
.tile-edge{
  height:22px;
  background-image:radial-gradient(circle at 11px 0, transparent 11px, var(--tuile) 11.5px);
  background-size:22px 22px; background-repeat:repeat-x; background-position:top;
}
.tile-edge.up{ transform:scaleY(-1); }
.tile-edge.on-pine{ background-image:radial-gradient(circle at 11px 0, transparent 11px, var(--pine) 11.5px); }

/* ---------- NAV ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.6rem 5vw; transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
  color:var(--limestone);
}
nav.solid{ background:var(--pine-deep); padding:1.1rem 5vw; box-shadow:0 2px 20px rgba(0,0,0,.15); }
nav.on-light{ color:var(--text); }
nav .brand{ font-family:'Fraunces', serif; font-size:1.35rem; letter-spacing:.02em; }
nav ul{ list-style:none; display:flex; gap:2.2rem; }
nav ul li a{ font-size:.78rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; opacity:.85; transition:opacity .2s; }
nav ul li a:hover{ opacity:1; }
@media (max-width:900px){ nav ul{ display:none; } }

/* ---------- PHOTO PLACEHOLDER ---------- */
.photo-placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(135deg, rgba(185,97,47,.10) 0 2px, transparent 2px 24px),
    linear-gradient(160deg, #3A4732, #232D1E);
  border:1px solid rgba(185,97,47,.3);
}
.photo-placeholder span{
  font-family:'Work Sans', sans-serif; font-size:.72rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tuile);
  text-align:center; padding:1rem; opacity:.85;
}
.photo-placeholder.on-light{ background:repeating-linear-gradient(135deg, rgba(185,97,47,.10) 0 2px, transparent 2px 24px), var(--limestone-deep); border-color:var(--line); }
.photo-placeholder.on-light span{ color:var(--armagnac); }

/* ---------- HERO (full, home page) ---------- */
.hero{ position:relative; height:100vh; min-height:640px; background:var(--pine-deep); }
.hero .photo-placeholder, .hero img{ position:absolute; inset:0; }
.hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(36,46,31,.15) 0%, rgba(36,46,31,.72) 100%); }
.hero-content{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--limestone); padding:0 5vw; }
.hero-content h1{ font-size:clamp(2.4rem, 6vw, 4.6rem); line-height:1.08; margin-top:1.1rem; }
.hero-content h1 em{ font-style:italic; color:var(--tuile); font-weight:400; }
.hero-content p{ margin-top:1.3rem; font-size:1.05rem; max-width:38ch; color:rgba(239,228,203,.85); }
.scroll-cue{ position:absolute; bottom:2.6rem; left:50%; transform:translateX(-50%); z-index:5; font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--limestone); display:flex; flex-direction:column; align-items:center; gap:.5rem; opacity:.7; }
.scroll-cue::after{ content:''; width:1px; height:30px; background:var(--limestone); animation:pulse 2.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:.15;} 50%{opacity:.7;} }
@media (prefers-reduced-motion:reduce){ .scroll-cue::after{animation:none;} }

/* ---------- PAGE HERO (subpages, shorter) ---------- */
.page-hero{ position:relative; height:56vh; min-height:380px; background:var(--pine-deep); }
.page-hero .photo-placeholder, .page-hero img{ position:absolute; inset:0; }
.page-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(36,46,31,.1) 0%, rgba(36,46,31,.75) 100%); }
.page-hero-content{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; text-align:center; color:var(--limestone); padding:0 5vw 3rem; }
.page-hero-content h1{ font-size:clamp(2rem, 4.6vw, 3.2rem); }

/* ---------- BREADCRUMB ---------- */
.breadcrumb{
  max-width:1180px; margin:0 auto; padding:1.6rem 5vw 0;
  font-size:.78rem; letter-spacing:.03em; color:var(--text-soft);
}
.breadcrumb a{ color:var(--tuile-dark); }
.breadcrumb a:hover{ text-decoration:underline; }

/* ---------- STAT BAR ---------- */
.statbar{ display:grid; grid-template-columns:repeat(4,1fr); max-width:1100px; margin:0 auto; padding:3.6rem 5vw 4.6rem; }
.stat{ text-align:center; padding:0 1rem; border-left:1px solid var(--line); }
.stat:first-child{ border-left:none; }
.stat svg{ width:30px; height:30px; stroke:var(--tuile-dark); margin-bottom:.8rem; }
.stat .value{ font-family:'Fraunces', serif; font-size:1.4rem; }
.stat .label{ font-size:.72rem; letter-spacing:.06em; color:var(--text-soft); margin-top:.2rem; }
@media (max-width:900px){ .statbar{ grid-template-columns:1fr 1fr; row-gap:2rem; } .stat:nth-child(3){ border-left:none; } }

/* ---------- CHAPTERS ---------- */
.chapter{ max-width:1180px; margin:0 auto; padding:5.5rem 5vw; }
.chapter-head{ display:flex; align-items:center; gap:1.3rem; margin-bottom:2.4rem; }
.chapter-head svg{ width:52px; height:52px; stroke:var(--tuile-dark); flex-shrink:0; }
.chapter-head h2{ font-size:clamp(1.9rem, 3.6vw, 2.7rem); }
.chapter-head .eyebrow{ display:block; margin-bottom:.3rem; }

.gallery{ display:grid; grid-template-columns:1.4fr 1fr; grid-template-rows:repeat(2,210px); gap:.9rem; margin-bottom:2.8rem; }
.gallery .g-main{ grid-row:1 / span 2; }
.gallery figure{ overflow:hidden; position:relative; }

.chapter-body{ display:grid; grid-template-columns:1fr 1fr; gap:3.2rem; align-items:start; }
.chapter-body p{ color:var(--text-soft); margin-bottom:1.1rem; }
.chapter.alt .chapter-body{ direction:rtl; }
.chapter.alt .chapter-body > *{ direction:ltr; }

.specs{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.spec{ display:flex; gap:.9rem; align-items:flex-start; padding:1rem; border:1px solid var(--line); background:rgba(255,251,240,.5); }
.spec svg{ width:22px; height:22px; flex-shrink:0; stroke:var(--tuile-dark); }
.spec .label{ font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-soft); }
.spec .value{ font-size:.95rem; margin-top:.15rem; }

.cta-link{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:.5rem;
  font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--armagnac); border-bottom:1px solid var(--tuile);
  padding-bottom:.2rem; transition:color .2s ease, border-color .2s ease;
}
.cta-link:hover{ color:var(--tuile-dark); border-color:var(--tuile-dark); }
.cta-link svg{ width:14px; height:14px; stroke:currentColor; }

/* ---------- ROOM GRID (house overview pages) ---------- */
.room-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem;
  max-width:1180px; margin:0 auto; padding:1rem 5vw 6rem;
}
.room-card{ position:relative; aspect-ratio:4/5; overflow:hidden; display:block; }
.room-card figure{ position:absolute; inset:0; }
.room-card .room-card-tag{
  position:absolute; inset:auto 0 0 0; padding:1rem .9rem;
  background:linear-gradient(0deg, rgba(36,46,31,.9), transparent);
  color:var(--limestone); z-index:3;
}
.room-card .room-card-tag .num{ font-size:.66rem; letter-spacing:.15em; color:var(--tuile); text-transform:uppercase; }
.room-card .room-card-tag .name{ font-family:'Fraunces', serif; font-size:1.02rem; margin-top:.15rem; }
.room-card::after{ content:''; position:absolute; inset:0; background:rgba(36,46,31,0); transition:background .25s ease; z-index:2; }
.room-card:hover::after{ background:rgba(36,46,31,.12); }
@media (max-width:900px){ .room-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- ROOM PAGE ---------- */
.room-main{ max-width:1180px; margin:0 auto; padding:3.6rem 5vw 2rem; }
.room-photo{ aspect-ratio:16/9; overflow:hidden; margin-bottom:1.2rem; }
.room-photo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-bottom:2.6rem; }
.room-photo-grid figure{ aspect-ratio:4/3; overflow:hidden; }
.room-text{ max-width:70ch; }
.room-text p{ color:var(--text-soft); }
.room-nav{
  max-width:1180px; margin:0 auto; padding:2.6rem 5vw 5.5rem;
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--line);
}
.room-nav a{ font-size:.8rem; font-weight:500; letter-spacing:.04em; color:var(--armagnac); display:flex; align-items:center; gap:.5rem; }
.room-nav a:hover{ color:var(--tuile-dark); }
.room-nav .back-link{ color:var(--text-soft); }
@media (max-width:600px){ .room-nav{ flex-direction:column; gap:1rem; text-align:center; } }

/* ---------- PARC / PISCINE (estate) ---------- */
.estate{ background:var(--pine-deep); color:var(--limestone); padding:5.5rem 5vw; }
.estate-inner{ max-width:1180px; margin:0 auto; }
.estate-head{ text-align:center; max-width:56ch; margin:0 auto 3rem; }
.estate-head h2{ color:var(--limestone); font-size:clamp(1.9rem,3.6vw,2.7rem); margin-top:.5rem; }
.estate-head p{ color:rgba(239,228,203,.75); margin-top:1rem; }
.estate-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:280px 200px; gap:.9rem; }
.estate-grid .e-main{ grid-row:1 / span 2; }
.estate-grid figure{ position:relative; overflow:hidden; }
.estate-grid figcaption{ position:absolute; bottom:0; left:0; right:0; padding:1rem 1.2rem; background:linear-gradient(0deg, rgba(36,46,31,.85), transparent); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--limestone); z-index:2; }
@media (max-width:900px){ .estate-grid{ grid-template-columns:1fr 1fr; grid-template-rows:220px 160px 160px; } .estate-grid .e-main{ grid-column:1 / -1; grid-row:auto; } }

/* Extra full-width gallery grid used on parc.html */
.full-gallery{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; max-width:1180px; margin:0 auto; padding:1rem 5vw 6rem; }
.full-gallery figure{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.full-gallery figcaption{ position:absolute; bottom:0; left:0; right:0; padding:.9rem 1rem; background:linear-gradient(0deg, rgba(36,46,31,.85), transparent); color:var(--limestone); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; z-index:2; }
@media (max-width:900px){ .full-gallery{ grid-template-columns:1fr 1fr; } }

/* ---------- LOISIRS ---------- */
.loisirs{ max-width:1180px; margin:0 auto; padding:6rem 5vw; }
.loisirs-head{ text-align:center; max-width:52ch; margin:0 auto 3rem; }
.loisirs-head h2{ font-size:clamp(1.9rem,3.6vw,2.7rem); margin-top:.5rem; }
.loisirs-head p{ color:var(--text-soft); margin-top:1rem; }
.loisirs-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-bottom:2.8rem; }
.loisir-card{ padding:1.6rem 1.2rem; border:1px solid var(--line); background:rgba(255,251,240,.5); text-align:center; }
.loisir-card svg{ width:34px; height:34px; stroke:var(--tuile-dark); margin-bottom:.8rem; }
.loisir-card .name{ font-family:'Fraunces', serif; font-size:1.05rem; }
.loisir-card .desc{ font-size:.78rem; color:var(--text-soft); margin-top:.3rem; }
.loisirs-photos{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.loisirs-photos figure{ aspect-ratio:16/10; overflow:hidden; }
@media (max-width:900px){ .loisirs-grid{ grid-template-columns:1fr 1fr; } .loisirs-photos{ grid-template-columns:1fr; } }

/* ---------- LOCALISATION ---------- */
.localisation{ padding:5.5rem 5vw; max-width:1180px; margin:0 auto; border-top:1px solid var(--line); }
.localisation-inner{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.localisation h2{ font-size:clamp(1.9rem,3.6vw,2.7rem); }
.localisation p{ color:var(--text-soft); margin-top:1rem; max-width:48ch; }
.poi-list{ margin-top:1.6rem; display:flex; flex-direction:column; gap:.6rem; }
.poi-list li{ list-style:none; display:flex; justify-content:space-between; font-size:.85rem; border-bottom:1px dashed var(--line); padding-bottom:.6rem; color:var(--text-soft); }
.map-placeholder{ aspect-ratio:4/3; background:repeating-linear-gradient(0deg, rgba(185,97,47,.12) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, rgba(185,97,47,.12) 0 1px, transparent 1px 32px), var(--limestone-deep); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
.map-placeholder span{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--armagnac); text-align:center; padding:1rem; }
@media (max-width:900px){ .localisation-inner{ grid-template-columns:1fr; } }

/* ---------- CONTACT ---------- */
.contact{ max-width:900px; margin:0 auto; padding:6rem 5vw 7.5rem; }
.contact-head{ text-align:center; margin-bottom:2.8rem; }
.contact-head h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); margin-top:.5rem; }
.contact-head p{ color:var(--text-soft); margin-top:1rem; max-width:46ch; margin-inline:auto; }
form{ background:rgba(255,251,240,.6); border:1px solid var(--line); padding:2.4rem; display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
form .full{ grid-column:1 / -1; }
label{ display:block; font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-soft); margin-bottom:.5rem; }
input, textarea{ width:100%; font-family:'Work Sans', sans-serif; font-size:.95rem; padding:.8rem .9rem; border:1px solid var(--line); background:#fff; color:var(--text); }
input:focus, textarea:focus{ outline:2px solid var(--tuile); outline-offset:1px; }
textarea{ resize:vertical; min-height:110px; }
.radio-group{ display:flex; gap:1.5rem; flex-wrap:wrap; padding-top:.2rem; }
.radio-group label{ display:flex; align-items:center; gap:.5rem; text-transform:none; font-family:'Work Sans'; font-weight:400; font-size:.9rem; color:var(--text); }
.radio-group input{ width:auto; accent-color:var(--tuile-dark); }
button[type="submit"]{ grid-column:1 / -1; justify-self:start; margin-top:.4rem; background:var(--armagnac); color:var(--limestone); border:none; padding:1rem 2.4rem; font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:background .25s ease; }
button[type="submit"]:hover{ background:var(--tuile-dark); }
button[type="submit"]:focus-visible{ outline:2px solid var(--tuile); outline-offset:2px; }
.form-note{ margin-top:1.1rem; font-size:.78rem; color:var(--text-soft); }
@media (max-width:900px){ form{ grid-template-columns:1fr; padding:1.8rem; } }

/* ---------- FOOTER ---------- */
footer{ background:var(--pine-deep); color:rgba(239,228,203,.6); padding:2.2rem 5vw; display:flex; justify-content:space-between; align-items:center; font-size:.75rem; letter-spacing:.03em; }
@media (max-width:900px){ footer{ flex-direction:column; gap:.6rem; text-align:center; } }

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

@media (max-width:900px){
  .chapter-body{ grid-template-columns:1fr; }
  .chapter.alt .chapter-body{ direction:ltr; }
  .gallery{ grid-template-columns:1fr; grid-template-rows:210px 150px 150px; }
  .gallery .g-main{ grid-row:auto; }
  .room-photo-grid{ grid-template-columns:1fr; }
}