.feuille-paiement .feuille-boite{width:min(480px,100%);transition:width .3s var(--douce),opacity .25s ease,transform .3s var(--douce)}
.feuille-paiement.en-cadre .feuille-boite{width:min(560px,100%);padding:52px 12px 12px}
.fpay-tete{margin-bottom:18px}
.fpay-tete h2{font-size:24px;margin:2px 0 4px}
.fpay-prix{margin:0;color:var(--pale)}
.fpay-prix b{color:var(--encre);font-size:20px}
.pastilles{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0}
.pastille{position:relative}
.pastille input{position:absolute;opacity:0;width:1px;height:1px}
.pastille span{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:999px;
border:1px solid var(--bord);cursor:pointer;font-weight:600;font-size:14px;transition:border-color .15s ease}
.pastille span:hover{border-color:var(--bord-survol)}
.pastille input:checked+span{background:var(--encre);color:var(--nuit);border-color:transparent}
.pastille input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.feuille-paiement p.champ,.feuille-paiement label.champ{display:block;margin:16px 0 8px;font-weight:600;font-size:14px}
.tel{display:flex;align-items:stretch;border-radius:10px;border:1px solid var(--bord);background:var(--nuit);overflow:hidden}
.tel:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,165,36,.2)}
.tel span{display:grid;place-items:center;padding:0 12px;font-weight:600;color:var(--pale);border-right:1px solid var(--bord)}
.tel input{border:0;background:transparent;border-radius:0;box-shadow:none!important}
.fpay-total{display:flex;justify-content:space-between;align-items:baseline;margin:20px 0 14px;padding-top:16px;
border-top:1px solid var(--bord)}
.fpay-total strong{font-size:26px;font-weight:700}
.securite{display:flex;gap:8px;align-items:center;justify-content:center;color:var(--pale);font-size:13px;margin:12px 0 0}
.securite svg{flex:none}
.cadre-paiement{position:relative;height:min(640px,calc(100vh - 140px));border-radius:10px;overflow:hidden;background:#fff}
.cadre-paiement iframe{width:100%;height:100%;border:0;display:block}
.cadre-paiement .chargement{position:absolute;inset:0;display:grid;place-items:center;background:var(--surface);color:var(--pale)}
.fpay-cadre-tete{position:absolute;left:20px;top:16px;display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;
color:var(--pale)}
.attente-paiement{text-align:center;padding:20px 0 8px}
.attente-paiement p{color:var(--doc)}
.roue{width:40px;height:40px;border:3px solid var(--haute);border-top-color:var(--accent);border-radius:50%;
margin:8px auto 14px;animation:tour 1s linear infinite}
.resultat{text-align:center}
.resultat h2{font-size:24px;margin:14px 0 8px}
.resultat p{color:var(--doc);margin:8px auto;max-width:460px}
.resultat .boutiques,.resultat .boutons{justify-content:center}
.resultat .boutons{margin-top:16px}
.signe{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(74,222,128,.12);
color:var(--vert)}
.signe.rate{background:rgba(248,113,113,.12);color:var(--rouge)}
.code{font:700 26px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.14em;background:var(--nuit);
border:1px dashed var(--accent);border-radius:10px;padding:16px;margin:14px auto;user-select:all;word-break:break-all;max-width:400px}
.resultat-paiement{margin:24px 0 8px;padding:32px 24px;border-radius:16px;background:var(--surface);border:1px solid var(--bord)}
@media (max-width:760px){
.feuille-paiement.en-cadre .feuille-boite{padding:52px 0 0;border-radius:16px 16px 0 0}
.cadre-paiement{height:calc(94vh - 60px);border-radius:0}
}