/* =====================================================================
   LOVEBOX — landing.css
   Hero asymétrique + sceau de cire animé + section "comment ça marche"
   ===================================================================== */

/* --- Hero --- */
.hero {
  padding-block: var(--space-2xl) var(--space-xl);
  overflow: hidden;
}

.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-xl);
  align-items: center;
}

.hero-content { max-width: 34rem; }

.hero-content .eyebrow { display: block; margin-bottom: var(--space-sm); }

.hero-content h1 {
  font-size: var(--fs-hero);
  margin-bottom: var(--space-md);
  opacity: 0;
  transform: translateY(16px);
  animation: rise var(--duration-slow) var(--ease-soft) 0.1s forwards;
}

.hero-content .lead {
  margin-bottom: var(--space-lg);
  opacity: 0;
  transform: translateY(16px);
  animation: rise var(--duration-slow) var(--ease-soft) 0.25s forwards;
}

.hero-content .hero-cta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  opacity: 0;
  transform: translateY(16px);
  animation: rise var(--duration-slow) var(--ease-soft) 0.4s forwards;
}

.hero-cta-note { font-size: var(--fs-small); color: var(--color-ink-soft); }

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

/* --- Illustration enveloppe (SVG pur, pas d'image) --- */
.hero-envelope {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-envelope svg {
  width: 100%;
  max-width: 22rem;
  filter: drop-shadow(0 20px 40px rgba(36, 27, 38, 0.12));
}

.hero-envelope .flap {
  transform-origin: 50% 0%;
  animation: unseal 3.5s var(--ease-soft) 1.2s infinite alternate;
}

@keyframes unseal {
  0%, 70% { transform: rotateX(0deg); }
  100% { transform: rotateX(-8deg); }
}

@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-envelope { order: -1; max-width: 16rem; margin-inline: auto; }
}

/* --- Section "Comment ça marche" (véritable séquence -> numérotation légitime) --- */
.how-it-works { background: var(--color-paper-soft); border-top: 1px solid var(--color-blush); border-bottom: 1px solid var(--color-blush); }

.how-it-works .container { text-align: center; }
.how-it-works h2 { margin-bottom: var(--space-xl); }

.steps-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  text-align: left;
}

.step-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
}

.step-card .step-number {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.5rem;
  color: var(--color-blush);
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.step-card h3 { margin-bottom: 0.5rem; }
.step-card p { color: var(--color-ink-soft); font-size: var(--fs-small); }

@media (max-width: 760px) {
  .steps-row { grid-template-columns: 1fr; }
}

/* --- Section témoignage / promesse --- */
.promise {
  text-align: center;
}
.promise blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 42rem;
  margin-inline: auto;
  color: var(--color-ink);
  line-height: 1.4;
}
.promise cite {
  display: block;
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}

/* --- CTA final --- */
.final-cta { text-align: center; }
.final-cta .seal { width: 4rem; height: 4rem; margin-inline: auto var(--space-md); }
.final-cta .seal::after { width: 1.4rem; height: 1.4rem; }
.final-cta h2 { margin-bottom: var(--space-md); }