:root {
  --vert: #3D6B35;
  --vert-clair: #6f8f5f;
  --rose: #f0c8c8;
  --rose-fonce: #e2a3a3;
  --creme: #faf7f0;
  --texte: #2c2c2c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--texte);
  background: var(--creme);
  line-height: 1.6;
}

a { color: var(--vert); }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

header.site {
  background: #ffffff;
  border-bottom: 1px solid #e7ded0;
  position: sticky;
  top: 0;
  z-index: 10;
}

header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--vert);
}

.brand img {
  height: 48px;
  width: auto;
  border-radius: 10px;
}

.brand span {
  font-size: 22px;
  letter-spacing: 0.5px;
}

nav.main a {
  margin-left: 22px;
  text-decoration: none;
  color: var(--texte);
  font-size: 15px;
}

nav.main a:hover { color: var(--vert); }

.hero {
  position: relative;
}

.hero img {
  width: 100%;
  height: 46vh;
  min-height: 320px;
  object-fit: cover;
  display: block;
  filter: brightness(0.75);
}

.hero-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 0 20px;
}

.hero-text h1 {
  font-size: 42px;
  margin: 0 0 12px;
}

.hero-text p {
  font-size: 18px;
  max-width: 560px;
  margin: 0 0 24px;
}

.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 30px;
  text-decoration: none;
  font-size: 15px;
  margin: 6px;
}

.btn-primary {
  background: var(--vert);
  color: #fff;
}

.btn-secondary {
  background: #fff;
  color: var(--vert);
  border: 1px solid var(--vert);
}

section {
  padding: 56px 0;
}

section h1, section h2 {
  color: var(--vert);
  font-size: 28px;
  text-align: center;
  margin-bottom: 8px;
  font-weight: normal;
}

section .intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 36px;
  color: #555;
}

.trois-piliers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.pilier {
  text-align: center;
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #eee0cf;
}

.pilier h3 { color: var(--vert); margin-top: 0; }

.grid-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.card-cta {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #eee0cf;
  text-decoration: none;
  color: var(--texte);
}

.card-cta img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.card-cta .body { padding: 20px; }

.card-cta h3 { color: var(--vert); margin: 0 0 8px; }

.produits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.produit {
  background: #fff;
  border: 1px solid #eee0cf;
  border-radius: 12px;
  padding: 20px;
}

.pastille {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-block;
  margin-bottom: 10px;
}

.produit h3 { margin: 0 0 6px; font-size: 19px; color: var(--vert); }
.produit p.desc { color: #555; font-size: 15px; min-height: 44px; }
.produit .prix { font-weight: bold; color: var(--vert); margin: 10px 0; }

.achat-btn {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 20px;
  background: var(--vert);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  margin-right: 8px;
}

.achat-btn.paypal {
  background: #ffd140;
  color: #1a1a1a;
}

.notice {
  background: #fdf2e3;
  border: 1px solid #e8cfa0;
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 32px;
  font-size: 15px;
}

.gite-card {
  background: #fff;
  border: 1px solid #eee0cf;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 40px;
}

.gite-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.gite-photos img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.gite-card .body { padding: 22px 24px; }
.gite-card h3 { color: var(--vert); margin-top: 0; }

.reservation-box {
  background: #fff;
  border: 2px dashed var(--vert-clair);
  border-radius: 14px;
  padding: 40px;
  text-align: center;
  color: #555;
}

footer.site {
  background: #2c3b2c;
  color: #dfe6da;
  padding: 40px 0;
  margin-top: 40px;
  font-size: 14px;
}

footer.site a { color: #cfe0c8; }

footer.site .foot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

footer.site h4 {
  color: #fff;
  margin-top: 0;
  font-size: 15px;
}

.mentions {
  text-align: center;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid #445544;
  font-size: 12px;
  color: #a9b6a2;
}

@media (max-width: 760px) {
  .trois-piliers, .grid-cta, .produits, .gite-photos, footer.site .foot-grid {
    grid-template-columns: 1fr;
  }
  .hero-text h1 { font-size: 30px; }
  nav.main { display: none; }
}

.burger {
  display: none;
  background: none;
  border: 1px solid var(--vert);
  border-radius: 8px;
  width: 40px;
  height: 36px;
  cursor: pointer;
  color: var(--vert);
  font-size: 18px;
}

.signature-bar {
  text-align: center;
  padding: 18px 0;
  font-size: 15px;
  color: var(--vert);
  background: #fff;
  border-top: 1px solid #eee0cf;
  border-bottom: 1px solid #eee0cf;
}

.deux-chemins {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.chemin {
  display: block;
  text-decoration: none;
  color: #fff;
  border-radius: 16px;
  padding: 40px 24px;
  text-align: center;
  min-height: 160px;
}

.chemin h3 { color: #fff; font-size: 24px; margin: 0 0 8px; }
.chemin p { margin: 0; opacity: 0.95; font-size: 14px; }

.chemin.tisanes { background: #6f8f5f; }
.chemin.gites { background: #5a7d9a; }

.zone-titre {
  color: var(--vert);
  font-size: 17px;
  margin: 30px 0 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid #eee0cf;
}

.zone-titre:first-of-type { margin-top: 0; }

.disclaimer-sante {
  font-size: 12px;
  color: #777;
  text-align: center;
  max-width: 640px;
  margin: 28px auto 0;
}

@media (max-width: 760px) {
  nav.main { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid #e7ded0; flex-direction: column; padding: 10px 24px; }
  nav.main.open { display: flex; }
  nav.main a { margin: 8px 0; }
  .burger { display: block; }
  header.site .wrap { position: relative; }
  .deux-chemins { grid-template-columns: 1fr; }
}

.video-wrap {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding-top: 56.25%;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}

.video-wrap iframe,
.video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.plante-au-pot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}

.plante-au-pot img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

.fiche-plante {
  background: #fff;
  border: 1px solid #eee0cf;
  border-radius: 14px;
  padding: 28px 30px;
  max-width: 640px;
  margin: 0 auto;
}

.fiche-plante h4 { color: var(--vert); margin-top: 0; }
.fiche-plante ul { padding-left: 20px; margin: 14px 0; }
.fiche-plante li { margin-bottom: 6px; }

.pots-magiques {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}

.pots-magiques img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
  margin-bottom: 14px;
}

.prix-pots {
  display: flex;
  gap: 24px;
  margin: 18px 0;
  flex-wrap: wrap;
}

.prix-pots div {
  background: #fff;
  border: 1px solid #eee0cf;
  border-radius: 10px;
  padding: 12px 20px;
  text-align: center;
}

.prix-pots strong { display: block; color: var(--vert); font-size: 18px; }

@media (max-width: 760px) {
  .plante-au-pot, .pots-magiques { grid-template-columns: 1fr; }
}

.galerie-titre {
  color: var(--vert);
  font-size: 20px;
  margin: 40px 0 16px;
}

.galerie-titre:first-of-type { margin-top: 0; }

.galerie-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.galerie-grid figure {
  margin: 0;
  background: #fff;
  border: 1px solid #eee0cf;
  border-radius: 12px;
  overflow: hidden;
}

.galerie-grid img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

.galerie-grid figcaption {
  padding: 10px 14px;
  font-size: 13px;
  color: #666;
}

@media (max-width: 760px) {
  .galerie-grid { grid-template-columns: 1fr; }
  .galerie-grid img { height: 300px; }
}