/* ============================================================
   HERO : page d'accueil
============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 78% 20%, rgba(126, 217, 87, 0.16), transparent 55%),
    linear-gradient(160deg, var(--green-dark) 0%, var(--green-deepest) 70%);
  padding: 168px var(--section-x) 0;
}

.hero__inner {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: var(--section-y);
}

.hero__content {
  position: relative;
  z-index: 2;
}

.hero__title {
  font-size: clamp(2.75rem, 5vw, var(--text-3xl));
  color: var(--text-on-green-strong);
  margin: 0;
}

.hero__title-land { color: var(--green-bright); }

.hero__title-leaf {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  color: var(--green-bright);
  vertical-align: 0.55em;
  margin-left: 0.05em;
}

.hero__tagline {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-on-green-strong);
  margin-top: var(--space-2);
}

.hero__rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-5) 0;
}

.hero__rule-line {
  width: 64px;
  height: 1px;
  background: var(--border-on-green);
}

.hero__rule-leaf {
  width: 12px;
  height: 12px;
  color: var(--green-bright);
}

.hero__desc {
  font-size: var(--text-md);
  color: var(--text-on-green-mid);
  max-width: 30em;
  line-height: 1.6;
  margin-left: auto;
  margin-right: auto;
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

.hero__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background var(--duration-base) var(--ease-in-out),
              border-color var(--duration-base) var(--ease-in-out),
              color var(--duration-base) var(--ease-in-out),
              box-shadow var(--duration-base) var(--ease-in-out),
              transform var(--duration-fast) var(--ease-in-out);
}

.hero__btn--fill {
  background: var(--green-bright);
  color: var(--green-deepest);
}
.hero__btn--fill:hover {
  background: var(--green-pale);
  box-shadow: var(--shadow-glow);
}

.hero__btn--outline {
  border: 1px solid var(--border-on-green);
  color: var(--text-on-green-strong);
}
.hero__btn--outline:hover {
  border-color: var(--green-bright);
  color: var(--green-bright);
  box-shadow: var(--shadow-glow-soft);
}

.hero__btn:active { transform: scale(0.97); }
.hero__btn svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------
   Tablette (≤ 900px)
------------------------------------------------------------ */
@media (max-width: 900px) {
  .hero { padding-top: 140px; }
}

/* ------------------------------------------------------------
   Petit mobile (≤ 480px) : les boutons passent en pleine largeur,
   empilés, pour un vrai confort au doigt plutôt qu'un couple de
   pilules centrées et tassées l'une contre l'autre
------------------------------------------------------------ */
@media (max-width: 480px) {
  .hero { padding-top: 120px; }
  .hero__tagline { margin-top: var(--space-3); }
  .hero__rule { margin: var(--space-6) 0; }
  .hero__desc { max-width: none; margin-top: var(--space-2); line-height: 1.65; }
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--space-10);
    gap: var(--space-3);
  }
  .hero__btn { justify-content: center; min-height: 48px; }
}