/* ============================================================
   SURCOUCHE CONFIANCE : ce que les tokens seuls ne disent pas.
   Cible les classes neutres des blocs (un seul pack charge a
   la fois) ; tout element ADDITIONNEL est prefixe .st-confiance-.
   ============================================================ */

/* Halo bleu tres dilue derriere le hero : la profondeur sans photo */
.bloc-hero {
  background:
    radial-gradient(58rem 30rem at 85% -18%, var(--accent-soft), transparent 68%),
    var(--surface);
}

/* La preuve porte le pack : pastille de verification sur chaque item */
.hero-proof li::before {
  content: '';
  width: 1.1em; height: 1.1em; flex: none;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  /* coche dessinee en CSS, couleur accent, aucune image */
  -webkit-mask: center / 62% no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l4 4 7-8.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask: center / 62% no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l4 4 7-8.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-color: var(--accent);
}

/* Bouton principal : leger relief, hover qui monte d'un cran */
.btn-primary { box-shadow: 0 2px 10px rgb(18 80 200 / 0.28); }
@media (prefers-reduced-motion: no-preference) {
  .btn-primary { transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgb(18 80 200 / 0.34); }
}