/* ═══════════════════════════════════════════════════════
   Saveurs du Terroir – Grignan
   Feuille de styles principale
   ═══════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Jost', system-ui, sans-serif;
  background-color: #F9F3E6;
  color: #3A2E1F;
  -webkit-font-smoothing: antialiased;
}

/* ── Textures & atmosphère ── */
.grain-overlay::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.045'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: .5;
}

/* ── Typography ── */
h1, h2, h3, .font-serif { font-family: 'Cormorant Garamond', Georgia, serif; }

/* ── Nav ── */
#navbar {
  transition: background .35s ease, box-shadow .35s ease;
}
#navbar.scrolled {
  background: rgba(249,243,230,.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 24px rgba(58,46,31,.1);
}

/* ── Hero ── */
.hero-bg {
  background: linear-gradient(160deg, #F6EDD9 0%, #E8D5B0 35%, #C4622D18 70%, #F6EDD9 100%);
  position: relative;
  overflow: hidden;
}
.hero-bg::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, #C4622D22 0%, transparent 70%);
  pointer-events: none;
}
.hero-bg::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -80px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, #6B7C4520 0%, transparent 70%);
  pointer-events: none;
}

/* ── Divider ── */
.divider-leaf {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #C9A84C;
}
.divider-leaf::before,
.divider-leaf::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #C9A84C88, transparent);
}

/* ── Cards ── */
.product-card {
  transition: transform .28s ease, box-shadow .28s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(58,46,31,.13);
}

.badge-card {
  transition: transform .25s ease;
}
.badge-card:hover { transform: translateY(-3px); }

/* ── Product images ── */
.product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.product-card:hover .product-img {
  transform: scale(1.05);
}

/* ── CTA Buttons ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #C4622D;
  color: #F9F3E6;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: .9375rem;
  letter-spacing: .04em;
  padding: .85rem 1.75rem;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn-primary:hover {
  background: #A84E20;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(196,98,45,.35);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  color: #6B7C45;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: .9375rem;
  letter-spacing: .04em;
  padding: .85rem 1.75rem;
  border-radius: 2px;
  border: 1.5px solid #6B7C45;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.btn-secondary:hover {
  background: #6B7C45;
  color: #F9F3E6;
  transform: translateY(-1px);
}

.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #C9A84C;
  color: #2A1F0F;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: .9375rem;
  letter-spacing: .04em;
  padding: .85rem 1.75rem;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn-gold:hover {
  background: #B8962F;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(201,168,76,.4);
}

/* ── Stars ── */
.star { color: #C9A84C; }

/* ── FAQ Accordion ── */
.faq-item { border-bottom: 1px solid #E8D5B0; }
.faq-btn { width: 100%; text-align: left; background: none; border: none; cursor: pointer; }
.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
}
.faq-body.open { max-height: 300px; padding-bottom: 1rem; }
.faq-icon { transition: transform .3s ease; }
.faq-icon.open { transform: rotate(45deg); }

/* ── Animations entrée ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Google Maps ── */
.map-container {
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(201,168,76,.25);
}
.map-container iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Reviews ── */
.review-card { transition: transform .25s ease; }
.review-card:hover { transform: translateY(-3px); }

/* ── Google Reviews badge ── */
.google-reviews-badge {
  transition: transform .25s ease, box-shadow .25s ease;
}
.google-reviews-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(58,46,31,.12);
}

/* ── Sticky phone bar (mobile) ── */
.sticky-phone {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  display: none;
}
@media (max-width: 768px) {
  .sticky-phone { display: flex; }
}

/* ── Scroll indicator ── */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
.scroll-bounce { animation: bounce 1.8s ease-in-out infinite; }

/* ── Decorative olive branch ── */
.olive-deco {
  color: #6B7C4560;
  font-size: 1.4rem;
}

/* ── Hero image ── */
.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
}