:root{
  --foret: #39492B;
  --mousse: #989959;
  --lumiere: #F5E3C9;
  --riviere: #B0D4DD;
  --sunset: #EC9362;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--lumiere);
  color:var(--foret);
  font-family:'Archivo', sans-serif;
  overflow-x:hidden;
}

h1,h2,h3, .display{
  font-family:'Faculty Glyphic', serif;
  font-weight:400;
  letter-spacing:-0.01em;
  line-height:1.08;
}

em{
  font-style:normal;
  font-family:'Yellowtail', cursive;
  font-size:1.15em;
  color:var(--sunset);
}

.eyebrow{
  font-family:'Archivo', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:0.72rem;
  font-weight:600;
  color:var(--mousse);
}

a{color:inherit;}
img{max-width:100%; display:block;}

section{
  position:relative;
  padding:7rem 6vw;
}
@media (max-width:700px){
  section{padding:5rem 6vw;}
}

/* ---------- Nav ---------- */
nav.site-nav{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.1rem 6vw;
  background:rgba(245,227,201,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(57,73,43,0.1);
}
nav.site-nav .brand{
  display:flex;
  align-items:center;
  gap:0.6rem;
  font-family:'Faculty Glyphic', serif;
  font-size:1.05rem;
  text-decoration:none;
}
nav.site-nav .brand img{
  width:34px;
  height:auto;
}
nav.site-nav .links{
  display:flex;
  gap:1.8rem;
  list-style:none;
}
nav.site-nav .links a{
  text-decoration:none;
  font-size:0.85rem;
  font-weight:600;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--foret);
  opacity:0.7;
  transition:opacity 0.2s ease;
  padding-bottom:0.2rem;
  border-bottom:2px solid transparent;
}
nav.site-nav .links a:hover{opacity:1;}
nav.site-nav .links a.current{
  opacity:1;
  border-bottom-color:var(--sunset);
}
@media (max-width:640px){
  nav.site-nav{padding:1rem 5vw;}
  nav.site-nav .links{gap:1rem;}
  nav.site-nav .links a{font-size:0.72rem;}
  nav.site-nav .brand span{display:none;}
}

/* ---------- River motif (signature element) ---------- */
#river-wrap{
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:2px;
  height:100%;
  z-index:0;
  pointer-events:none;
}
#river-svg{
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  height:100%;
  overflow:visible;
}
#river-path{
  fill:none;
  stroke:var(--riviere);
  stroke-width:3;
  stroke-linecap:round;
  opacity:0.55;
}

/* ---------- Hero (home) ---------- */
.hero{
  min-height:88vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  overflow:hidden;
  padding-top:2rem;
}
.hills{
  position:absolute;
  bottom:0; left:0; right:0;
  width:100%;
  z-index:0;
}
.hero-content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.6rem;
}
.hero-icon{
  width:92px;
  height:auto;
  margin-bottom:0.4rem;
}
.hero h1{
  font-size:clamp(2.6rem, 7vw, 5.2rem);
}
.hero .sub{
  max-width:38ch;
  font-size:1.05rem;
  color:var(--foret);
  opacity:0.82;
  line-height:1.55;
}
.scroll-cue{
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  font-size:0.68rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--foret);
  opacity:0.5;
  z-index:2;
}

/* ---------- Page hero (subpages) ---------- */
.page-hero{
  padding:5rem 6vw 3.5rem;
  text-align:center;
  position:relative;
  z-index:2;
}
.page-hero h1{
  font-size:clamp(2.4rem, 6vw, 4rem);
  margin:0.7rem 0 1rem;
}
.page-hero p{
  max-width:44ch;
  margin:0 auto;
  opacity:0.82;
  line-height:1.6;
}
.status-pill{
  display:inline-block;
  margin-top:1.3rem;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-weight:600;
  padding:0.45rem 1rem;
  border-radius:100px;
  border:1px solid rgba(57,73,43,0.25);
}
.status-pill.active{
  background:var(--foret);
  color:var(--lumiere);
  border-color:var(--foret);
}
.status-pill.prep{
  background:transparent;
  color:var(--sunset);
  border-color:var(--sunset);
}

/* ---------- Home: three activity cards ---------- */
.activities{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.8rem;
  position:relative;
  z-index:2;
}
@media (max-width:820px){
  .activities{grid-template-columns:1fr; max-width:440px;}
}
.activity-card{
  background:#fff;
  border:1px solid rgba(57,73,43,0.12);
  border-radius:8px;
  padding:2.4rem 2rem;
  text-decoration:none;
  color:var(--foret);
  display:flex;
  flex-direction:column;
  gap:0.9rem;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
  position:relative;
}
.activity-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 32px rgba(57,73,43,0.14);
}
.activity-card .icon{font-size:2.1rem;}
.activity-card h3{font-size:1.4rem;}
.activity-card p{
  font-size:0.9rem;
  opacity:0.75;
  line-height:1.55;
  flex-grow:1;
}
.activity-card .status-pill{
  align-self:flex-start;
  margin-top:0.4rem;
}

/* ---------- Atelier: categories ---------- */
.categories{
  display:flex;
  justify-content:center;
  gap:2.5rem;
  margin:2.5rem 0 3.5rem;
  flex-wrap:wrap;
}
.category{
  text-align:center;
  max-width:220px;
}
.category .tag{font-size:1.6rem; margin-bottom:0.4rem;}
.category h4{
  font-family:'Faculty Glyphic', serif;
  font-size:1.15rem;
  font-weight:400;
  margin-bottom:0.4rem;
}
.category p{font-size:0.88rem; opacity:0.75; line-height:1.5;}

/* ---------- Gallery ---------- */
.gallery{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.6rem;
  position:relative;
  z-index:2;
}
@media (max-width:820px){ .gallery{grid-template-columns:repeat(2, 1fr);} }
@media (max-width:520px){ .gallery{grid-template-columns:1fr;} }
.piece{
  background:#fff;
  border:1px solid rgba(57,73,43,0.12);
  border-radius:4px;
  overflow:hidden;
  transition:transform 0.35s ease, box-shadow 0.35s ease;
}
.piece:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 28px rgba(57,73,43,0.14);
}
.piece .ph{
  aspect-ratio:4/5;
  background:
    linear-gradient(135deg, rgba(152,153,89,0.25), rgba(236,147,98,0.18)),
    repeating-linear-gradient(45deg, rgba(57,73,43,0.05) 0 2px, transparent 2px 14px);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--foret);
  opacity:0.55;
  font-size:0.78rem;
  letter-spacing:0.06em;
  text-align:center;
  padding:1rem;
}
.piece .photo{
  aspect-ratio:4/5;
  width:100%;
  object-fit:cover;
  display:block;
}
.piece .info{padding:1.1rem 1.2rem 1.3rem;}
.piece .info .name{
  font-family:'Faculty Glyphic', serif;
  font-weight:400;
  font-size:1.05rem;
  margin-bottom:0.3rem;
}
.piece .info .stitch{
  font-size:0.76rem;
  color:var(--mousse);
  font-weight:600;
}

.order-cta{
  max-width:520px;
  margin:3.5rem auto 0;
  text-align:center;
  position:relative;
  z-index:2;
}
.order-cta p{font-size:1rem; opacity:0.85; margin-bottom:1.2rem;}
.order-btn{
  display:inline-block;
  text-decoration:none;
  font-weight:600;
  font-size:0.92rem;
  letter-spacing:0.03em;
  padding:0.95rem 2.2rem;
  border-radius:100px;
  background:var(--sunset);
  color:var(--foret);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.order-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(236,147,98,0.35);
}

/* ---------- Savoir-faire ---------- */
.savoir{
  background:var(--foret);
  color:var(--lumiere);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
}
@media (max-width:820px){ .savoir{grid-template-columns:1fr; gap:2.5rem;} }
.savoir h2{font-size:clamp(2rem, 4vw, 2.8rem); color:var(--lumiere); margin-bottom:1.3rem;}
.savoir p{line-height:1.7; opacity:0.88; margin-bottom:1rem; font-size:1rem;}
.savoir .eyebrow{color:var(--sunset);}
.swatch{
  aspect-ratio:1/1;
  border-radius:6px;
  background:
    radial-gradient(circle at 30% 30%, rgba(245,227,201,0.15), transparent 60%),
    linear-gradient(160deg, var(--mousse), var(--foret) 70%);
  position:relative;
  overflow:hidden;
}
.swatch::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: repeating-linear-gradient(115deg, rgba(245,227,201,0.06) 0 3px, transparent 3px 22px);
}
.swatch::after{
  content:"Cousu main au point sellier";
  position:absolute;
  bottom:1.4rem; left:1.4rem; right:1.4rem;
  font-family:'Yellowtail', cursive;
  font-size:1.4rem;
  color:var(--lumiere);
}

/* ---------- Gîte / Écurie feature pages ---------- */
.feature-split{
  max-width:1000px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:3.5rem;
  align-items:start;
  position:relative;
  z-index:2;
}
@media (max-width:820px){ .feature-split{grid-template-columns:1fr;} }
.feature-split h2{font-size:clamp(1.9rem, 4vw, 2.6rem); margin-bottom:1.1rem;}
.feature-split p{line-height:1.7; opacity:0.85; margin-bottom:1.1rem;}
.feature-list{list-style:none; display:flex; flex-direction:column; gap:1rem;}
.feature-list li{
  display:flex;
  gap:0.9rem;
  align-items:flex-start;
  font-size:0.94rem;
  line-height:1.5;
  opacity:0.9;
}
.feature-list .dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--sunset);
  margin-top:0.5rem;
  flex-shrink:0;
}
.notify-box{
  background:#fff;
  border:1px solid rgba(57,73,43,0.12);
  border-radius:8px;
  padding:2rem 1.8rem;
  text-align:center;
}
.notify-box p{font-size:0.92rem; opacity:0.8; margin-bottom:1.2rem;}
.notify-box .eyebrow{display:block; margin-bottom:0.6rem;}

/* ---------- Contact / footer ---------- */
.contact{
  background:var(--foret);
  color:var(--lumiere);
  text-align:center;
  padding-bottom:4rem;
}
.contact .logo-white{width:150px; margin:0 auto 2rem;}
.contact h2{color:var(--lumiere); font-size:clamp(1.9rem, 4vw, 2.6rem); margin-bottom:1rem;}
.contact p{opacity:0.8; max-width:38ch; margin:0 auto 2rem; line-height:1.6;}
.contact-links{
  display:flex;
  justify-content:center;
  gap:1.2rem;
  flex-wrap:wrap;
  margin-bottom:3rem;
}
.contact-links a{
  text-decoration:none;
  font-weight:600;
  font-size:0.9rem;
  letter-spacing:0.03em;
  padding:0.85rem 1.7rem;
  border-radius:100px;
  border:1px solid rgba(245,227,201,0.4);
  transition:background 0.25s ease, color 0.25s ease;
}
.contact-links a.primary{
  background:var(--sunset);
  border-color:var(--sunset);
  color:var(--foret);
}
.contact-links a:hover{background:rgba(245,227,201,0.12);}
footer{font-size:0.76rem; opacity:0.55; letter-spacing:0.03em;}

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  .piece, .activity-card{transition:none;}
}