/* assets/css/paiement.css — zone de paiement animée (s'appuie sur les .pay-* de global-da.css, DA ComEvents)
   Animations : entrée, carte vivante (reflet + inclinaison), chargement, succès, échec, vérification.
   Tout est en CSS ; le script ne fait que l'inclinaison, le compteur et l'écran de chargement.
   Respecte « réduire les animations » du système. */

/* ---------- Entrée ---------- */
.pay-glass{animation:payRise .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes payRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- Formulaires, messages ---------- */
.pay-form{margin-top:14px}
.pay-form select,.pay-form input[type=file]{width:100%}
.pay-alert{padding:12px 16px;border-radius:10px;margin:0 0 16px;font-size:.92rem;border:1px solid rgba(243,238,230,.2);animation:payPop .45s ease-out both}
.pay-alert-ko{border-color:var(--red-bright,#E5322B);background:rgba(229,50,43,.12)}
.pay-alert-wait{border-color:var(--champagne,#C8A96A);background:rgba(200,169,106,.12)}
@keyframes payPop{0%{opacity:0;transform:scale(.96)}100%{opacity:1;transform:none}}
.pay-proof{margin-top:22px;border:1px solid rgba(243,238,230,.18);padding:4px 16px 16px;background:rgba(10,10,10,.25)}
.pay-proof summary{cursor:pointer;font-weight:600;padding:12px 0;list-style:none}
.pay-proof summary::-webkit-details-marker{display:none}
.pay-proof summary::after{content:"+";float:right;color:var(--champagne,#C8A96A);transition:transform .25s}
.pay-proof[open] summary::after{transform:rotate(45deg)}
.pay-ref-list{margin:0 0 .4rem}

/* ---------- Carte vivante ---------- */
.pay-card[data-live]{transform:perspective(900px) rotate(-2deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out,box-shadow .3s,border-color .4s;will-change:transform}
.pay-card[data-live]:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}
.pay-card::after{background-size:300% 100%;background-position:130% 0;animation:payShine 7s ease-in-out 1.2s infinite}
@keyframes payShine{0%,55%{background-position:130% 0}100%{background-position:-60% 0}}
.pay-card-mid{transition:opacity .5s}
.pay-card-amount{display:block;font:700 clamp(1.5rem,5vw,2rem) var(--display);color:var(--champagne);letter-spacing:.01em;line-height:1.1}
.pay-card-amount small{display:block;font:500 .66rem var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:.35rem}

/* ---------- Écran de chargement (clic sur Payer) ---------- */
.pay-overlay{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;text-align:center;padding:1.5rem;background:rgba(10,10,10,.84);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:payFade .25s ease-out}
.pay-overlay[hidden]{display:none}
.pay-overlay p{margin:0;font:600 1.05rem var(--display)}
.pay-overlay small{color:var(--mute)}
@keyframes payFade{from{opacity:0}to{opacity:1}}
.pay-spinner{width:56px;height:56px;border-radius:50%;border:3px solid rgba(243,238,230,.18);border-top-color:var(--champagne);animation:paySpin .9s linear infinite}
@keyframes paySpin{to{transform:rotate(360deg)}}
.btn-primary.is-loading{pointer-events:none;opacity:.85}

/* ---------- Scène de suivi : attente, succès, échec, vérification ---------- */
.pay-stage{position:relative;max-width:380px;margin:0 auto}
.pay-stage .pay-card{margin:0}
.pay-seal{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:3}
.pay-seal svg{width:92px;height:92px;overflow:visible}
.pay-seal circle,.pay-seal path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:3}
.pay-seal .ring{stroke-dasharray:145;stroke-dashoffset:145}
.pay-seal .tick,.pay-seal .hand{stroke-dasharray:44;stroke-dashoffset:44}
.pay-seal .cross{stroke-dasharray:50;stroke-dashoffset:50}
@keyframes payDraw{to{stroke-dashoffset:0}}

.pay-stage[data-state=waiting] .pay-card{filter:saturate(.75)}
.pay-stage[data-state=waiting] .pay-card-mid{opacity:.25}
.pay-stage[data-state=success] .pay-card-mid,.pay-stage[data-state=error] .pay-card-mid,.pay-stage[data-state=review] .pay-card-mid{opacity:0}

.pay-stage[data-state=success] .pay-card{border-color:rgba(62,184,138,.75);animation:payGlow 2.6s ease-out .9s infinite}
@keyframes payGlow{0%{box-shadow:0 30px 60px -28px rgba(0,0,0,.9),0 0 0 0 rgba(62,184,138,.45)}70%,100%{box-shadow:0 30px 60px -28px rgba(0,0,0,.9),0 0 0 26px rgba(62,184,138,0)}}
.pay-stage[data-state=success] .ring{stroke:var(--success,#3EB88A);animation:payDraw .8s ease-out .25s forwards}
.pay-stage[data-state=success] .tick{stroke:var(--success,#3EB88A);animation:payDraw .5s ease-out .95s forwards}

.pay-stage[data-state=error] .pay-card{border-color:rgba(229,50,43,.75);animation:payShake .55s ease-in-out .35s}
@keyframes payShake{0%,100%{translate:0}20%{translate:-9px}40%{translate:8px}60%{translate:-5px}80%{translate:3px}}
.pay-stage[data-state=error] .ring{stroke:var(--red-bright,#E5322B);animation:payDraw .7s ease-out .2s forwards}
.pay-stage[data-state=error] .cross{stroke:var(--red-bright,#E5322B);animation:payDraw .45s ease-out .85s forwards}

.pay-stage[data-state=review] .pay-card{border-color:rgba(200,169,106,.75)}
.pay-stage[data-state=review] .ring{stroke:var(--champagne,#C8A96A);animation:payDraw .8s ease-out .25s forwards,payPulse 2.2s ease-in-out 1.2s infinite}
.pay-stage[data-state=review] .hand{stroke:var(--champagne,#C8A96A);animation:payDraw .6s ease-out .9s forwards}
@keyframes payPulse{0%,100%{opacity:1}50%{opacity:.45}}

/* étincelles du succès */
.pay-sparks{position:absolute;inset:0;pointer-events:none;z-index:4}
.pay-sparks i{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:var(--champagne);opacity:0;animation:paySpark 1.5s ease-out 1s forwards}
.pay-sparks i:nth-child(3n){background:var(--success,#3EB88A)}
@keyframes paySpark{0%{opacity:1;transform:translate(-50%,-50%) rotate(var(--a)) translateX(0) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--d)) scale(.2)}}
.pay-sparks i:nth-child(1){--a:0deg;--d:150px}.pay-sparks i:nth-child(2){--a:30deg;--d:120px}.pay-sparks i:nth-child(3){--a:62deg;--d:155px}
.pay-sparks i:nth-child(4){--a:95deg;--d:125px}.pay-sparks i:nth-child(5){--a:125deg;--d:150px}.pay-sparks i:nth-child(6){--a:155deg;--d:118px}
.pay-sparks i:nth-child(7){--a:185deg;--d:152px}.pay-sparks i:nth-child(8){--a:215deg;--d:124px}.pay-sparks i:nth-child(9){--a:245deg;--d:150px}
.pay-sparks i:nth-child(10){--a:275deg;--d:120px}.pay-sparks i:nth-child(11){--a:305deg;--d:154px}.pay-sparks i:nth-child(12){--a:335deg;--d:122px}

.pay-status-title{font:700 1.5rem var(--display);margin:0 0 .5rem}
.pay-status-text{color:var(--mute);line-height:1.6;margin:0 0 1.2rem}
.pay-recap-total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:1rem 0;padding:.9rem 1.1rem;border:1px solid var(--line);background:rgba(10,10,10,.4)}
.pay-recap-total b{font:700 1.2rem var(--display);color:var(--champagne)}

/* ---------- Réduire les animations : états finaux immédiats ---------- */
@media (prefers-reduced-motion:reduce){
  .pay-glass,.pay-alert,.pay-overlay,.pay-card::after,.pay-stage .pay-card,.pay-sparks i{animation:none!important}
  .pay-spinner{animation-duration:3s}
  .pay-seal .ring,.pay-seal .tick,.pay-seal .cross,.pay-seal .hand{animation:none!important;stroke-dashoffset:0}
  .pay-sparks{display:none}
  .pay-card[data-live],.pay-card[data-live]:hover{transform:rotate(-2deg)!important}
}