/* ============================================================
   france·compta.micro — Couche d'animations modernes (partagée)
   Respecte prefers-reduced-motion (désactivé si l'utilisateur
   a demandé moins d'animations).
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* ---- 1. Bouton « radar » : onde qui se propage au survol ---- */
  .btn-primary { position: relative; }
  .btn-primary::after {
    content: ""; position: absolute; inset: -2px;
    border-radius: inherit;
    border: 2px solid var(--jaune-500, #f59e0b);
    opacity: 0; pointer-events: none;
  }
  .btn-primary:hover::after { animation: fc-radar 1.1s ease-out infinite; }
  @keyframes fc-radar {
    0%   { opacity: .55; transform: scale(1); }
    100% { opacity: 0;   transform: scale(1.35); }
  }

  /* ---- Respiration douce des grands CTA (glow qui pulse) ---- */
  .btn-lg.btn-primary { animation: fc-breathe 2.8s ease-in-out infinite; }
  @keyframes fc-breathe {
    0%, 100% { box-shadow: 0 12px 28px -10px rgba(234,179,8,.45); }
    50%      { box-shadow: 0 18px 42px -8px  rgba(234,179,8,.78); }
  }

  /* ---- 2. Heartbeat sur les badges « Gratuit / Recommandée » ---- */
  .offer-preview-tag, .reco, .optbadge {
    transform-origin: center;
    animation: fc-heartbeat 2.6s ease-in-out infinite;
  }
  @keyframes fc-heartbeat {
    0%, 58%, 100% { transform: scale(1); }
    30%           { transform: scale(1.07); }
    44%           { transform: scale(.97); }
  }

  /* ---- 3. Léger mouvement des cartes au survol (global) ---- */
  .reason-card, .step-card, .offer-preview-card, .testi-card,
  .tier, .step, .gapcard, .bcard, .toc-link {
    transition: transform .38s cubic-bezier(.2,.7,.2,1),
                box-shadow .38s ease, border-color .25s ease;
    will-change: transform;
  }
  .reason-card:hover, .step-card:hover, .offer-preview-card:hover,
  .testi-card:hover, .tier:hover, .step:hover, .gapcard:hover,
  .bcard:hover, .toc-link:hover {
    transform: translateY(-6px);
  }

  /* ---- 4. Reveal au défilement (activé par anim.js) ---- */
  .fc-reveal { opacity: 0; transform: translateY(26px); }
  .fc-reveal.fc-in {
    opacity: 1; transform: none;
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
  }

  /* ---- 5. Soulignés animés du menu ---- */
  nav ul li a, .navlinks a:not(.btn) { position: relative; }
  nav ul li a::after, .navlinks a:not(.btn)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
    height: 2px; border-radius: 2px; background: var(--jaune-600, #eab308);
    transform: scaleX(0); transform-origin: left;
    transition: transform .28s cubic-bezier(.2,.7,.2,1);
  }
  nav ul li a:hover::after, .navlinks a:not(.btn):hover::after { transform: scaleX(1); }

  /* ---- 6. Icônes flottantes ---- */
  .reason-icon, .step-num, .stepn, .bicon, .gapicon {
    animation: fc-float 4.6s ease-in-out infinite;
  }
  .step-num, .stepn { animation-duration: 5.3s; }
  .bicon { animation-duration: 4s; }
  @keyframes fc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

  /* ---- 7. Shimmer sur le mot accentué du hero ---- */
  .hero h1 .highlight {
    background: linear-gradient(100deg,
      var(--jaune-600) 0%, var(--jaune-400) 40%, #fff7d6 50%,
      var(--jaune-400) 60%, var(--jaune-600) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: fc-shimmer 6s linear infinite;
  }
  .h1 .accent { background-size: 220% 100%; animation: fc-shimmer 6.5s linear infinite; }
  @keyframes fc-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -60% 0; } }

  /* ---- 8. Aurore animée sur les sections sombres ---- */
  .countdown-section::before, .final-cta::before {
    animation: fc-aurora 12s ease-in-out infinite;
  }
  @keyframes fc-aurora {
    0%, 100% { opacity: .85; transform: translateX(0); }
    50%      { opacity: 1;   transform: translateX(3%); }
  }

  /* ---- 9. Barre de progression de défilement (créée par anim.js) ---- */
  #fc-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, var(--jaune-500, #f59e0b), var(--jaune-600, #eab308));
    box-shadow: 0 0 8px rgba(234,179,8,.5);
    z-index: 9999; transition: width .08s linear;
  }
}