/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --primary: #1e6b42;
  --primary-light: #287f54;
  --surface: #f9f9f8;
  --surface-low: #f3f4f2;
  --surface-lowest: #ffffff;
  --on-surface: #1a1c1a;
  --on-surface-var: #4a504a;
  --on-surface-mut: #8a928a;
  --tertiary: #b8973a;
  --outline: rgba(26,28,26,0.09);
  --max-w: 1280px;
  --pad: 40px;
}

/* ============================================================
   BASE
   ============================================================ */
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Inter', sans-serif;
  color: var(--on-surface);
  background: var(--surface-lowest);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 15px; border-radius: 10px; padding: 0 22px; height: 44px;
  transition: all .18s ease; cursor: pointer; white-space: nowrap; border: none;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover {
  background: var(--primary-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(30,107,66,.28);
}
.btn-ghost { background: transparent; color: var(--on-surface); border: 1.5px solid var(--outline); }
.btn-ghost:hover { border-color: rgba(26,28,26,.22); background: rgba(26,28,26,.04); }
.btn-white { background: #fff; color: var(--primary); font-weight: 700; }
.btn-white:hover { background: #f0fdf4; transform: translateY(-1px); }
.btn-white-green { background: #fff; color: var(--primary); border: 2px solid #fff; }
.btn-white-green:hover { background: #f0fdf4; transform: translateY(-1px); }
.btn-lg { height: 52px; font-size: 16px; padding: 0 28px; border-radius: 12px; }
.btn-xl { height: 58px; font-size: 17px; padding: 0 36px; border-radius: 14px; }
.btn-fw { width: 100%; }

/* ============================================================
   MOBILE BAR (affichée uniquement ≤ 920px)
   ============================================================ */
.mobile-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: #fff;
  border-top: 1px solid var(--outline);
  padding: 12px 16px;
  gap: 10px;
  box-shadow: 0 -4px 20px rgba(0,0,0,.1);
}
.mobile-bar .btn { flex: 1; }

/* ============================================================
   SECTION UTILITIES
   ============================================================ */
.section-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 600;
  color: var(--primary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px;
}
.section-title {
  font-family: 'Manrope', sans-serif; font-weight: 900;
  font-size: 48px; letter-spacing: -1.8px; color: var(--on-surface);
  line-height: 1.08; margin-bottom: 16px;
}
.section-sub {
  font-size: 17px; color: var(--on-surface-var); line-height: 1.65; max-width: 560px;
}
.section-center { text-align: center; }
.section-center .section-sub { margin: 0 auto; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 920px) {
  :root { --pad: 20px; }
  .section-title { font-size: 30px; letter-spacing: -1.2px; }
  .mobile-bar { display: flex; }
  body { padding-bottom: 80px; }
}