/* ------- Styles de démo (mise en page) ------- */
    :root{
      color-scheme: light;
    }
    * { box-sizing: border-box; }
    body{
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      line-height: 1.5;
      background: #f5f7fb;
      color: #0A192F;
    }
    .hero{
      display: grid;
      place-items: center;
      padding: 24px;
      text-align: center;
    }
    .spacer{
      height: 100vh; /* pour tester la sortie/replay */
      display: grid;
      place-items: center;
      color: #607086;
    }
    section#benefits{
      max-width: 1100px;
      margin: 0 auto;
      padding: 48px 24px 64px;
    }
    section#benefits h2{
      font-size: 28px;
      margin: 0 0 20px;
      letter-spacing: .2px;
    }
    .card{
      background: #fff;
      border-radius: 16px;
      padding: 24px;
      box-shadow:
        0 1px 2px rgba(16,24,40,.04),
        0 8px 24px rgba(2,14,35,.06);
      border: 1px solid rgba(2,14,35,.06);
      min-height: 150px;
      display: grid;
      gap: 8px;
      align-content: start;
    }
    .card-head{
      width: 56px; height: 56px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #e9f6f3, #dfeff0);
      display: grid; place-items: center;
      margin-bottom: 6px;
    }
    /* icône de démo */
    .card-head svg{
      width: 28px; height: 28px;
      stroke: #004D40;
      fill: none;
      stroke-width: 2;
    }
    .card-title{ font-size: 18px; margin: 0; }
    .card-body{ margin: 0; color: #516070; }

    /* ------- Variables d’anim (code précédent inchangé) ------- */
    :root {
      --reveal-duration: 300ms;
      --reveal-ease: cubic-bezier(.22,1,.36,1); /* easeOutCubic */
      --reveal-stagger: 150ms;
      --reveal-scale-from: .96; /* moins de “pop”, + propre */
      --reveal-translate-from: 0px; /* garder 0 pour Option 1 (scale+fade pur) */
    }

    /* ------- Grille des cartes (code précédent inchangé) ------- */
    #benefits .cards {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
    }
    @media (max-width: 720px){
      #benefits .cards { grid-template-columns: 1fr; }
    }


    /* ------- État initial (avant entrée dans le viewport) ------- */
    .cards[data-stagger] .card {
      opacity: 0;
      transform: translateY(var(--reveal-translate-from)) scale(var(--reveal-scale-from));
      transition:
        opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease);
      /* cascade : calcule le delay à partir de --i injecté en JS */
      transition-delay: calc(var(--i, 0) * var(--reveal-stagger));
      will-change: opacity, transform;
    }

    /* ------- État affiché (entrée viewport) ------- */
    .cards.in-view .card {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* ------- Accessibilité (code précédent inchangé) ------- */
    @media (prefers-reduced-motion: reduce) {
    .cards[data-stagger] .card {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
      }
    }