/* ============================================================
   SURCOUCHE BENTO : le hero devient une composition en tuiles.
   ============================================================ */

/* Le contenu du hero est pose dans une grande tuile blanche */
.hero-inner {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: clamp(var(--sp-6), 5vw, var(--sp-8));
}

/* La preuve devient une rangee de mini tuiles chiffrees */
.hero-proof { gap: var(--sp-3); }
.hero-proof li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-4);
}
.hero-proof li::before { content: none; }
.hero-proof li strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--fs-xl);
  color: var(--accent);
  line-height: var(--lh-tight);
}

/* Hover des tuiles : elevation legere */
@media (prefers-reduced-motion: no-preference) {
  .hero-proof li { transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
  .hero-proof li:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
}