/* =============================================================
   Salott-IT — V3  Finition du tunnel d'achat (panier / checkout / confirmation)
   Couche ADDITIVE : n'enlève rien, ne modifie aucun HTML.
   Chargée uniquement sur les 3 pages du tunnel.
   ============================================================= */

/* 1) Récapitulatif sticky sur le PANIER en desktop
      (le checkout a déjà sa version sticky ; ici on aligne le panier).
      Spécificité (.panier-grid .recap-card) > règle inline (.recap-card). */
@media (min-width: 1025px) {
  .panier-grid .recap-card { position: sticky; top: 90px; }
}

/* 2) CONFIRMATION — renfort du "moment récompense" :
      deux anneaux verts qui se diffusent derrière l'icône de succès.
      Aucun nœud ajouté (pseudo-éléments), purement décoratif. */
.confirm-success .success-icon { position: relative; z-index: 1; }
.confirm-success .success-icon::before,
.confirm-success .success-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #10b981;
  opacity: 0;
  z-index: -1;
  animation: scReward 1.8s ease-out 0.25s forwards;
  pointer-events: none;
}
.confirm-success .success-icon::after { animation-delay: 0.6s; }
@keyframes scReward {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* 3) CHECKOUT — petit "pop" satisfaisant sur l'étape franchie (done) */
.checkout-steps .step.done .step-circle {
  animation: scStepPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes scStepPop {
  0%   { transform: scale(0.6); }
  100% { transform: scale(1); }
}

/* Accessibilité : on coupe ces animations si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  .confirm-success .success-icon::before,
  .confirm-success .success-icon::after,
  .checkout-steps .step.done .step-circle { animation: none !important; }
}