/*
Theme Name: ZOE BIOMAD
Author: Remi pour Zoe Biomad
Description: Vitrine epicerie fine, miels exotiques rares et huiles essentielles de Madagascar. Tout se modifie dans Apparence > Personnaliser.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: zoebiomad
*/

:root {
  --cream: #fdf9f0;
  --cream-dark: #f6eeda;
  --honey: #c98a2b;
  --honey-deep: #a56b17;
  --brown: #3a2e1f;
  --brown-soft: #6d5c44;
  --white: #fffdf8;
}

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

body {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: var(--cream);
  color: var(--brown);
  line-height: 1.7;
}

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: normal;
  letter-spacing: 0.5px;
}

a { color: var(--honey-deep); }
img { max-width: 100%; height: auto; display: block; }

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

/* ---------- Header ---------- */
.site-header {
  background: var(--white);
  border-bottom: 3px double var(--honey);
  padding: 28px 0 22px;
}
.site-header .wrap { display: flex; align-items: center; gap: 18px; }
.brand-logo { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 10px rgba(60,40,10,.18); }
.brand-name h1 { font-size: 30px; color: var(--brown); }
.brand-tag { color: var(--honey-deep); font-size: 14.5px; letter-spacing: 2px; text-transform: uppercase; }

/* ---------- Hero ---------- */
.hero { position: relative; background: linear-gradient(rgba(58,46,31,.30), rgba(58,46,31,.45)), var(--cream-dark) center/cover no-repeat; color: #fff; padding: 92px 0; text-align: center; }
.hero h2 { font-size: 40px; margin-bottom: 14px; text-shadow: 0 2px 8px rgba(0,0,0,.35); }
.hero p { max-width: 640px; margin: 0 auto; font-size: 19px; text-shadow: 0 1px 6px rgba(0,0,0,.35); }

/* ---------- Sections ---------- */
section.block { padding: 58px 0; }
section.block:nth-of-type(even) { background: var(--white); border-top: 1px solid #eadfc4; border-bottom: 1px solid #eadfc4; }
.section-title { text-align: center; font-size: 30px; margin-bottom: 8px; color: var(--brown); }
.section-sub { text-align: center; color: var(--honey-deep); letter-spacing: 2.5px; text-transform: uppercase; font-size: 13px; margin-bottom: 34px; }

.presentation p { max-width: 760px; margin: 0 auto 18px; font-size: 17.5px; color: var(--brown-soft); text-align: center; }
.presentation .signoff { display: block; text-align: center; font-family: Georgia, serif; font-style: italic; color: var(--honey-deep); margin-top: 26px; font-size: 18px; }

/* ---------- Event ---------- */
.event-card { max-width: 720px; margin: 0 auto; background: var(--cream); border: 2px solid var(--honey); border-radius: 14px; padding: 36px 40px; box-shadow: 0 8px 28px rgba(150,100,20,.14); }
.event-card .event-title { font-size: 25px; text-align: center; color: var(--brown); margin-bottom: 6px; }
.event-when { text-align: center; font-weight: 700; color: #fff; background: var(--honey); display: inline-block; padding: 6px 22px; border-radius: 999px; margin: 14px auto 8px; }
.event-when-wrap { text-align: center; }
.event-place { text-align: center; color: var(--brown-soft); font-size: 16.5px; }
.event-desc { max-width: 600px; margin: 20px auto 8px; text-align: center; color: var(--brown-soft); }

.products { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; padding: 0; }
.products li { background: #fff; border: 1.5px solid var(--honey); color: var(--brown); padding: 9px 20px; border-radius: 999px; font-size: 15.5px; box-shadow: 0 2px 8px rgba(150,100,20,.12); }
.products li::before { content: "🍯 "; }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; max-width: 860px; margin: 0 auto; }
.gallery img { width: 100%; height: 260px; object-fit: cover; border-radius: 10px; box-shadow: 0 4px 16px rgba(60,40,10,.18); transition: transform .25s ease; }
.gallery img:hover { transform: scale(1.03); }

/* ---------- Contact / Footer ---------- */
.site-footer { background: var(--brown); color: #f1e7d2; padding: 46px 0 34px; margin-top: 30px; }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 26px; text-align: center; max-width: 860px; margin: 0 auto; padding: 0 24px; }
.footer-grid .f-item h3 { color: #fff; font-size: 17px; margin-bottom: 8px; letter-spacing: 1.5px; text-transform: uppercase; font-family: inherit; }
.footer-grid a { color: var(--honey); text-decoration: none; font-size: 16.5px; }
.footer-note { text-align: center; margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.18); font-size: 13.5px; color: #cbb98f; }

@media (max-width: 600px) {
  .hero h2 { font-size: 30px; }
  .event-card { padding: 28px 20px; }
  .brand-name h1 { font-size: 24px; }
}