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

:root{
  --ink:        #1c2b1e;   /* deep pine, main text */
  --palm:       #223829;   /* dark green, panels */
  --moss:       #5c6b47;   /* olive, secondary text */
  --gold:       #b6863c;   /* metallic gold, accents/price */
  --gold-soft:  #e4c078;
  --hibiscus:   #cf4f37;   /* coral red, CTAs */
  --hibiscus-dk:#a83f2b;
  --sand:       #f2ecdd;   /* warm background */
  --paper:      #faf7ef;   /* card surface */
  --line:       rgba(28,43,30,.14);

  --serif: 'Fraunces', serif;
  --sans:  'Work Sans', sans-serif;

  --wrap: 1160px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:500;
  margin:0;
  color:var(--palm);
}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 28px;
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(242,236,221,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:84px;
}
.wordmark{
  font-family:var(--serif);
  font-size:1.7rem;
  letter-spacing:.03em;
  color:var(--palm);
  text-decoration:none;
}
.wordmark em{
  font-style:italic;
  color:var(--hibiscus);
}
.main-nav{ display:flex; gap:28px; }
.main-nav a{
  text-decoration:none;
  font-size:.93rem;
  color:var(--moss);
  border-bottom:1px solid transparent;
  padding-bottom:3px;
  transition:border-color .15s ease, color .15s ease;
}
.main-nav a:hover{ color:var(--hibiscus); border-color:var(--hibiscus); }
.nav-toggle{ display:none; }

/* ---------- hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background:var(--palm);
  color:var(--paper);
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:48px;
  padding-top:64px;
  padding-bottom:64px;
  min-height:560px;
}
.hero-copy{ position:relative; z-index:2; }
.hero-eyebrow{
  font-family:var(--serif);
  font-style:italic;
  color:var(--gold-soft);
  font-size:1.05rem;
  margin-bottom:18px;
}
.hero h1{
  color:var(--paper);
  font-size:clamp(2.4rem, 5vw, 3.6rem);
  line-height:1.05;
  max-width:11ch;
}
.hero p{
  max-width:42ch;
  color:rgba(250,247,239,.82);
  margin-top:22px;
  font-size:1.05rem;
}
.hero-actions{ margin-top:34px; display:flex; gap:16px; flex-wrap:wrap; }

.btn{
  display:inline-block;
  padding:13px 26px;
  border-radius:2px;
  text-decoration:none;
  font-size:.95rem;
  border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn-primary{ background:var(--hibiscus); color:var(--paper); }
.btn-primary:hover{ background:var(--hibiscus-dk); }
.btn-ghost{ border-color:rgba(250,247,239,.5); color:var(--paper); }
.btn-ghost:hover{ border-color:var(--paper); background:rgba(250,247,239,.08); }
.btn-line{ border-color:var(--gold); color:var(--gold); }
.btn-line:hover{ background:var(--gold); color:var(--palm); }

.hero-frame{
  position:relative; z-index:2;
  aspect-ratio:4/5;
  clip-path: path('M0,60 C0,20 40,0 90,0 L 260,0 C 310,0 340,30 340,80 L 340,360 C 340,410 300,430 250,430 L 60,430 C 20,430 0,400 0,360 Z');
  overflow:hidden;
  background:var(--ink);
  box-shadow:0 30px 60px rgba(0,0,0,.35);
}
.hero-frame img{ width:100%; height:100%; object-fit:cover; }

.leaf-field{
  position:absolute; inset:0; z-index:1;
  opacity:.5;
  pointer-events:none;
}

/* ---------- section shell ---------- */
.section{ padding:96px 0; }
.section + .section{ border-top:1px solid var(--line); }
.section-tight{ padding:72px 0; }

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:52px;
}
.section-head .kicker{
  font-family:var(--serif);
  font-style:italic;
  color:var(--hibiscus);
  font-size:1.05rem;
  margin-bottom:8px;
  display:block;
}
.section-head h2{
  font-size:clamp(1.8rem, 3vw, 2.4rem);
}
.section-head p{
  max-width:34ch;
  color:var(--moss);
  margin:0;
  font-size:.98rem;
}

/* ---------- product feature (image + text) ---------- */
.feature{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.feature.reverse .feature-media{ order:2; }
.feature.reverse .feature-copy{ order:1; }

.feature-media{ position:relative; }
.feature-media img{
  width:100%;
  border-radius:2px;
  box-shadow:0 20px 40px rgba(28,43,30,.18);
}
.feature-media.gallery{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:14px;
}
.feature-media.gallery img:first-child{ grid-row:1/3; height:100%; object-fit:cover; }
.feature-media.gallery img{ height:100%; object-fit:cover; }

.feature-copy h3{ font-size:1.8rem; margin-bottom:16px; }
.feature-copy p{ color:var(--moss); margin:0 0 24px; }

.tag-price{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  font-family:var(--serif);
  color:var(--palm);
  border:1px solid var(--gold);
  padding:8px 18px;
  border-radius:100px;
  margin-bottom:26px;
}
.tag-price .amount{ font-size:1.2rem; color:var(--gold); }
.tag-price .unit{ font-size:.78rem; color:var(--moss); }

.material-list{
  list-style:none; padding:0; margin:0 0 28px;
  display:flex; flex-direction:column; gap:8px;
  font-size:.9rem; color:var(--moss);
}
.material-list li{ padding-left:18px; position:relative; }
.material-list li::before{
  content:'';
  position:absolute; left:0; top:.55em;
  width:7px; height:7px;
  background:var(--gold);
  border-radius:50%;
}

/* ---------- panier banner ---------- */
.panier-banner{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
}
.panier-banner .wrap{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:48px;
  min-height:420px;
}
.panier-banner img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.28;
}
.panier-banner h2{ color:var(--paper); font-size:clamp(1.9rem,3.4vw,2.6rem); }
.panier-banner p{ color:rgba(250,247,239,.78); max-width:38ch; margin-top:16px; }
.panier-banner .tag-price{ border-color:var(--gold-soft); color:var(--paper); }
.panier-banner .tag-price .amount{ color:var(--gold-soft); }

/* ---------- contact / footer ---------- */
.contact{
  background:var(--palm);
  color:var(--paper);
}
.contact .wrap{
  padding:80px 28px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:48px;
}
.contact h2{ color:var(--paper); font-size:2rem; max-width:14ch; }
.contact p{ color:rgba(250,247,239,.75); max-width:36ch; margin-top:16px; }
.contact-card{
  background:rgba(250,247,239,.06);
  border:1px solid rgba(250,247,239,.18);
  padding:32px;
}
.contact-card dl{ margin:0; }
.contact-card dt{
  font-family:var(--serif); font-style:italic;
  color:var(--gold-soft); font-size:.85rem;
  margin-top:18px;
}
.contact-card dt:first-child{ margin-top:0; }
.contact-card dd{
  margin:4px 0 0; font-size:1.05rem;
}
.contact-card a{ text-decoration:none; }
.contact-card a:hover{ color:var(--gold-soft); }

footer.site-footer{
  background:var(--palm);
  border-top:1px solid rgba(250,247,239,.14);
  color:rgba(250,247,239,.55);
  font-size:.82rem;
}
footer.site-footer .wrap{
  padding:22px 28px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}

/* ---------- panier page specific ---------- */
.panier-hero{
  position:relative;
  background:var(--palm);
  color:var(--paper);
}
.panier-hero .wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:56px;
  padding:72px 28px 88px;
}
.panier-hero h1{
  color:var(--paper);
  font-size:clamp(2.2rem,4.6vw,3.2rem);
  max-width:13ch;
}
.panier-hero img{
  border-radius:2px;
  box-shadow:0 30px 60px rgba(0,0,0,.35);
}
.back-link{
  display:inline-block;
  margin-bottom:22px;
  font-size:.88rem;
  color:var(--gold-soft);
  text-decoration:none;
  border-bottom:1px solid rgba(228,192,120,.4);
}
.back-link:hover{ border-color:var(--gold-soft); }

.detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
}
.detail-grid h3{ font-size:1.3rem; margin-bottom:14px; }
.detail-grid p{ color:var(--moss); }

/* ---------- responsive ---------- */
@media (max-width:860px){
  .main-nav{ display:none; }
  .hero .wrap, .feature, .panier-banner .wrap, .contact .wrap, .panier-hero .wrap, .detail-grid{
    grid-template-columns:1fr !important;
  }
  .feature.reverse .feature-media, .feature.reverse .feature-copy{ order:0; }
  .hero-frame{ order:-1; max-width:340px; margin:0 auto; }
  .section{ padding:64px 0; }
  .section-head{ flex-direction:column; align-items:flex-start; gap:10px; }
}