/* ========================================================================
   ECRAN D'ATTENTE DE CONFIRMATION — vue LIEN DE PAIEMENT (/pay)
   Prefixe : bp-wait / bp-ring / bp-live / bp-hint
   ------------------------------------------------------------------------
   PROPRE A CETTE VUE. La page de frais scolaires (/billing/pay) possede sa
   PROPRE copie dans app/views/billing/css/billing-pay.css : les deux vues
   sont independantes et peuvent diverger. Ne rien mutualiser entre elles.
   Une correction de fond doit donc etre reportee a la main dans l'autre vue.
   MODELE COMMUN : dashboard/docs/DESIGN.md — intention, markup, etats,
   regles dures et recette. A lire AVANT de modifier ce fichier.
   ======================================================================== */

/* ════════════════════════════════════════════════════════════════════════
   ATTENTE DE CONFIRMATION
   Le payeur doit composer son code secret sur SON telephone. La scene a
   raconter est « la demande est partie et vous attend », pas « le systeme
   charge » : l'arc se REMPLIT (aucune echeance, le paiement reste valide
   apres zero) et un halo diffuse en fond comme un signal emis.
   Pilotage : billingPay.js, startStatusCountdown / setLiveStep / setHint.
   ════════════════════════════════════════════════════════════════════════ */

/* Styles de base des textes de l'ecran, portes par le composant lui-meme :
   il doit rendre correctement sur une page qui ne charge pas billing-pay.css
   (c'est ce qui le rend portable d'une vue de paiement a l'autre). */
.bp-wait .bp-success-title { margin: 0 0 0.35rem; font-size: 1.2rem; font-weight: 700; color: var(--bp-ink, #0b1f3f); }
.bp-wait .bp-success-sub   { margin: 0 0 1.1rem;  font-size: 0.9rem; color: #64748b; }

.bp-wait {
    /* Le composant s'ETIRE lui-meme. Sur une page hote ou son conteneur est un
       element flex en align-items:center, sa largeur se reduirait a son contenu
       et toutes les largeurs en pourcentage a l'interieur (suivi, message) se
       resoudraient contre zero — le texte se casse alors mot par mot. */
    width: 100%; align-self: stretch;
    /* Marges laterales annulees (.bp-success en pose 0.5rem) pour que le suivi
       et la carte de resultat, qui est son element FRERE, partagent exactement
       le meme bord gauche et la meme largeur. Les textes de l'ecran restent
       centres par .bp-success, ils ne dependent pas de ce retrait. */
    padding-left: 0; padding-right: 0;
    /* Courbe unique de toute la scene : sortie exponentielle, demarrage franc
       puis arrivee tres amortie. C'est elle qui donne le rendu « pose ». */
    --bp-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --bp-ink: #0b1f3f;
    --bp-slate: #7a8aa3;
    --bp-mint: #12b76a;
}

/* ── Entree en cascade ────────────────────────────────────────────────────
   Les elements arrivent l'un apres l'autre (70 ms d'ecart) au lieu de surgir
   en bloc. La classe .is-entering est posee par le JS a l'affichage.
   REGLE DE SURETE : l'etat de base est VISIBLE, et c'est l'animation qui part
   de l'etat bas (fill backwards, applique pendant le retard). Poser opacity:0
   en etat de base rendrait l'ecran BLANC partout ou l'animation ne tourne pas
   (moteur qui les gele, onglet en arriere-plan, navigateur ancien) — sur un
   ecran de paiement, une animation qui ne demarre pas ne doit jamais pouvoir
   effacer le contenu. */
.bp-wait.is-entering [class*="bp-in-"] {
    animation: bp-rise 0.62s var(--bp-ease) backwards;
}
.bp-wait.is-entering .bp-in-1 { animation-delay: 0ms; }
.bp-wait.is-entering .bp-in-2 { animation-delay: 70ms; }
.bp-wait.is-entering .bp-in-3 { animation-delay: 140ms; }
.bp-wait.is-entering .bp-in-4 { animation-delay: 210ms; }
.bp-wait.is-entering .bp-in-5 { animation-delay: 280ms; }
.bp-wait.is-entering .bp-in-6 { animation-delay: 350ms; }
@keyframes bp-rise {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

/* ── Scene : halo + anneau ───────────────────────────────────────────────
   Deux ondes concentriques decalees d'une demi-periode : la diffusion ne
   s'interrompt jamais, sans jamais attirer l'oeil plus que le chiffre. */
.bp-wait-stage {
    position: relative; width: 112px; height: 112px;
    margin: 0.15rem auto 1.15rem;
    display: flex; align-items: center; justify-content: center;
}
/* Halo volontairement tenu bas : il doit se deviner, pas former un disque
   opaque derriere l'anneau (l'ensemble paraissait alors lourd et grossier). */
.bp-wait-halo {
    position: absolute; width: 84px; height: 84px; border-radius: 50%;
    background: radial-gradient(circle, rgba(22, 72, 159, 0.10) 0%, rgba(22, 72, 159, 0) 68%);
    animation: bp-halo 3.6s ease-out infinite;
    pointer-events: none;
}
.bp-wait-halo--2 { animation-delay: 1.8s; }
@keyframes bp-halo {
    0%   { transform: scale(0.92); opacity: 0; }
    24%  { opacity: 1; }
    100% { transform: scale(1.46); opacity: 0; }
}

/* Diametre PLEIN, trait fin : c'est l'epaisseur du trait (6 px a l'origine) qui
   rendait l'anneau grossier, pas sa taille. Reduire le diametre n'etait pas la
   reponse — on garde la presence, on affine le dessin. */
.bp-ring {
    position: relative; width: 84px; height: 84px;
    /* Chiffre et unite centres par le flux, JAMAIS par des positions en px :
       la page hote peut definir une autre taille de police de base, et des
       hauteurs en rem calees sur des `top` en px se chevauchent alors. */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.bp-ring svg {
    position: absolute; inset: 0;
    width: 84px; height: 84px; transform: rotate(-90deg);   /* depart a midi */
}
.bp-ring circle { fill: none; }
.bp-ring-bg { stroke: #eaeff7; stroke-width: 4.6; }
.bp-ring-bar {
    stroke: url(#bpArcGrad); stroke-width: 4.6; stroke-linecap: round;
    transition: stroke-dashoffset 1s linear, opacity 0.4s ease;
}

/* Compteur roulant : l'ancienne valeur sort par le haut pendant que la
   nouvelle entre par le bas. Le masque (overflow) est ce qui rend le
   mouvement propre — sans lui les deux valeurs se chevauchent a l'ecran. */
.bp-num {
    height: 1.7rem; overflow: hidden;          /* masque : les deux valeurs ne se chevauchent pas */
    display: flex; align-items: center; justify-content: center;
}
.bp-num-slot {
    display: block; line-height: 1.7rem;
    font-size: 1.42rem; font-weight: 700; letter-spacing: -0.02em;
    color: var(--bp-ink, #0b1f3f);
    font-variant-numeric: tabular-nums;        /* largeur de chiffre constante */
}
/* fill-mode NONE volontaire : hors animation le chiffre reprend son style de
   repos (visible). Le JS retire la classe apres la duree — cf. setNum. */
.bp-num-slot.is-rolling { animation: bp-roll 0.42s var(--bp-ease); }
@keyframes bp-roll {
    0%   { transform: translateY(62%);  opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
}
.bp-num-unit {
    margin-top: 1px;
    font-size: 0.49rem; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: #9dabbe;
}

/* Delai attendu ecoule : ni erreur ni echec. L'arc se DESATURE (un arc complet
   reste en bleu de marque se lirait comme « termine ») et respire lentement pour
   dire que l'attente continue ; le compteur recule au second plan et l'oeil est
   libre d'aller au bouton de verification. */
.bp-ring.is-overtime .bp-ring-bar {
    stroke: #c3cede;
    animation: bp-breathe 2.8s ease-in-out infinite;
}
.bp-ring.is-overtime .bp-num-slot { font-size: 1.7rem; color: var(--bp-slate, #7a8aa3); }
@keyframes bp-breathe {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* ── Suivi vertical des etapes ───────────────────────────────────────────
   Etapes reliees par un TRAIT continu : le chemin se lit d'un coup d'oeil,
   ce qu'une liste de puces alignees ne donne pas. Pastille de 38 px cerclee
   portant l'icone de l'etat, titre a droite.
   Le trait est un ::before de l'element, tire du bas de la pastille jusqu'au
   bas de la ligne ; il est retire sur la derniere etape, sinon il pendrait
   dans le vide. La coche se DESSINE au passage a l'etat fait (trace du chemin
   SVG) : un simple changement de couleur passerait inapercu. */
/* Pleine largeur et NON centre : le suivi doit demarrer exactement au bord
   gauche de la carte de resultat qui le suit, et occuper la meme largeur
   qu'elle. En inline-flex centre, sa largeur suivait son contenu et les deux
   blocs ne pouvaient pas s'aligner. */
.bp-steps-live {
    list-style: none; margin: 0 auto 1.4rem; padding: 0;
    display: flex; flex-direction: column; width: 100%;
    text-align: left;
}
/* Le suivi ET la carte de resultat occupent la LARGEUR UTILE DE LA CARTE, la
   meme que l'en-tete, les etapes de paiement et le pied (`.bp-card` 640 px
   moins 2x1.5rem de `.bp-step`, soit 592 px). Une borne plus etroite les
   faisait flotter dans une colonne alignee sur rien : l'oeil lisait un
   decrochage avec l'en-tete et le pied, qui courent d'un bord a l'autre.
   Pas de max-width ici : la largeur doit SUIVRE la carte, pas la doubler
   avec une valeur en dur qui divergerait au premier changement de gabarit. */
.bp-steps-live, .bp-wait-result:not([hidden]) {
    width: 100%; margin-left: auto; margin-right: auto;
}
/* Geometrie du suivi en variables : le trait est positionne PAR CALCUL a partir
   de la taille de pastille et de la hauteur de rangee. Avec des valeurs en dur,
   changer l'une des deux faisait repasser le trait AU TRAVERS des pastilles —
   il barrait alors la coche, qui prenait l'allure d'un Y. */
.bp-steps-live { --bp-node: 38px; --bp-row: 78px; }
.bp-live-step {
    position: relative;
    display: grid; grid-template-columns: var(--bp-node) 1fr; align-items: center;
    column-gap: 16px; min-height: var(--bp-row);   /* respiration entre les jalons */
    font-size: 0.92rem; font-weight: 500; color: #aab5c4;
    transition: color 0.45s var(--bp-ease);
}
.bp-live-step:last-child { min-height: var(--bp-node); }
.bp-live-step::before {                      /* trait vers l'etape suivante */
    content: '';
    position: absolute; left: calc(var(--bp-node) / 2 - 1px);
    /* part du BAS de la pastille (centree dans sa rangee) et rejoint exactement
       le HAUT de la pastille suivante */
    top: calc(50% + var(--bp-node) / 2);
    bottom: calc(-1 * (var(--bp-row) - var(--bp-node)) / 2);
    width: 2px; background: #e6ebf3;
    transition: background 0.5s var(--bp-ease);
}
.bp-live-step:last-child::before { display: none; }

/* Pastille = anneau exterieur (SVG, pour pouvoir etre pointille et tourner)
   + icone interieure qui est elle-meme un cercle portant le signe de l'issue.
   Aucune bordure CSS ici : elle doublerait l'anneau SVG. */
.bp-live-dot {
    position: relative;
    width: var(--bp-node); height: var(--bp-node); border-radius: 50%; flex-shrink: 0;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.45s var(--bp-ease), box-shadow 0.45s var(--bp-ease);
}
.bp-live-ring {
    position: absolute; inset: 0; width: 100%; height: 100%;
    overflow: visible; pointer-events: none;
}
.bp-live-ring circle {
    fill: none; stroke: #d5dded; stroke-width: 2.4;
    /* Pointille tant que l'etape n'est pas acquise : le trait ouvert dit que le
       jalon n'est pas encore ferme. Il devient continu a l'issue. */
    stroke-dasharray: 3 5; stroke-linecap: round;
    transition: stroke 0.45s var(--bp-ease), stroke-dasharray 0.45s var(--bp-ease);
}
/* L'icone est CENTREE par le flex du parent ; l'anneau, lui, est en position
   absolue et ne participe donc pas au flux (sinon il decalerait l'icone). */
.bp-live-glyph {
    width: 19px; height: 19px; fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
    color: #c3cddd;
}
.bp-g-check, .bp-g-cross { display: none; }

/* Fait : anneau continu et vert, cercle rempli, coche apparente. */
.bp-live-step.is-done .bp-live-dot { background: #eafaf1; }
.bp-live-step.is-done .bp-live-ring circle { stroke: var(--bp-mint, #12b76a); stroke-dasharray: none; }
.bp-live-step.is-done .bp-live-glyph { color: var(--bp-mint, #12b76a); }
.bp-live-step.is-done .bp-g-check { display: block; }

/* Echec : meme principe, en rouge, avec la croix. */
.bp-live-step.is-error .bp-live-dot { background: #fef3f2; }
.bp-live-step.is-error .bp-live-ring circle { stroke: #f04438; stroke-dasharray: none; }
.bp-live-step.is-error .bp-live-glyph { color: #f04438; }
.bp-live-step.is-error .bp-g-cross { display: block; }

/* Libelle et trait des etapes franchies. Le dessin de la pastille (anneau
   continu vert + coche) est defini plus haut avec les autres etats. */
.bp-live-step.is-done { color: #3f4d61; font-weight: 600; }
.bp-live-step.is-done::before { background: var(--bp-mint, #12b76a); }

/* En cours : l'anneau pointille TOURNE (le jalon travaille), en couleur de
   marque, et le cercle interieur se remplit d'un point plein. */
.bp-live-step.is-current { color: var(--bp-ink, #0b1f3f); font-weight: 600; }
.bp-live-step.is-current .bp-live-dot {
    background: #eef3fc;
    animation: bp-dot-pulse 2.2s ease-out infinite;
}
.bp-live-step.is-current .bp-live-ring {
    animation: bp-spin 3.4s linear infinite;
    transform-origin: 50% 50%;
}
.bp-live-step.is-current .bp-live-ring circle { stroke: var(--app-them, #16489f); }
/* Cercle interieur laisse CREUX : rien n'est encore joue a cette etape. C'est
   l'anneau pointille qui tourne qui dit qu'elle travaille, pas un remplissage
   — lequel se lirait comme un etat acquis. */
.bp-live-step.is-current .bp-live-glyph { color: var(--app-them, #16489f); stroke-width: 2.2; }
@keyframes bp-dot-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(22, 72, 159, 0.28); }
    65%  { box-shadow: 0 0 0 12px rgba(22, 72, 159, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 72, 159, 0); }
}

/* Echec : l'etape qui a bloque porte la croix, le trait qui y mene reste neutre
   (les etapes precedentes ont bien eu lieu, elles gardent leur vert). */
.bp-live-step.is-error { color: #b42318; font-weight: 600; }

/* ── Message minute ──────────────────────────────────────────────────────
   Deux couches empilees qui se croisent : l'ancienne monte et s'efface,
   la nouvelle arrive par le bas. Un fondu simple sur un seul noeud donnerait
   un clignotement, et la hauteur sauterait au changement de longueur.
   Les deux couches partagent la MEME case de grille : le bloc prend la hauteur
   de la plus haute. Posees en absolu, un message sur deux lignes debordait
   sur le bouton de verification place juste dessous. */
.bp-status-hint {
    display: grid; margin: 0 auto 1.2rem;
    width: 100%; max-width: 30rem; min-height: 2.6em;
}
.bp-hint-layer {
    grid-area: 1 / 1;
    font-size: 0.83rem; line-height: 1.45; color: var(--bp-slate, #7a8aa3);
    opacity: 0; transform: translateY(9px);
    transition: opacity 0.34s var(--bp-ease), transform 0.34s var(--bp-ease);
}
.bp-hint-layer.is-shown { opacity: 1; transform: none; }
.bp-hint-layer.is-leaving { opacity: 0; transform: translateY(-9px); }

/* Delai depasse : la verification devient l'action evidente, par une lueur
   lente plutot qu'un clignotement (l'ecran ne doit pas passer en alerte). */
.bp-wait-recheck { transition: background 0.45s var(--bp-ease), color 0.45s var(--bp-ease), border-color 0.45s var(--bp-ease); }
.bp-wait-recheck.is-highlight {
    background: var(--app-them, #16489f); color: #fff; border-color: var(--app-them, #16489f);
    animation: bp-glow 3s ease-in-out infinite;
}
@keyframes bp-glow {
    0%, 100% { box-shadow: 0 2px 10px rgba(22, 72, 159, 0.18); }
    50%      { box-shadow: 0 4px 22px rgba(22, 72, 159, 0.42); }
}

/* ── Issue du paiement ───────────────────────────────────────────────────
   Le suivi des etapes RESTE affiche et le resultat s'insere EN DESSOUS : le
   chemin parcouru garde sa valeur de preuve (a quelle etape ca s'est joue),
   ce qu'un ecran qui remplace tout fait perdre. Seuls le compteur et les
   actions d'attente, devenus sans objet, disparaissent. */
.bp-wait.is-final .bp-wait-stage,
.bp-wait.is-final .bp-success-title,
.bp-wait.is-final .bp-success-sub,
.bp-wait.is-final .bp-status-hint,
.bp-wait.is-final .bp-wait-recheck { display: none; }
.bp-wait.is-final .bp-steps-live { margin-bottom: 0.4rem; }

.bp-wait-result:not([hidden]) {
    border-radius: 14px; padding: 1.3rem 1.1rem; margin-top: 0.2rem;
    border: 1px solid #e6ebf3; background: #fbfcfe;
    animation: bp-rise 0.55s var(--bp-ease) backwards;
}
.bp-wait-result.is-ok  { border-color: #d6efe2; background: #f7fdfa; }
.bp-wait-result.is-ko  { border-color: #f6dcd9; background: #fefaf9; }
/* Icone ramenee a l'echelle du texte : a 72 px elle ecrasait le titre et
   donnait un rendu de boite de dialogue systeme. */
.bp-wait-result .bp-success-icon {
    width: 52px; height: 52px; margin-bottom: 0.8rem;
    animation: bp-pop 0.62s var(--bp-ease) 0.08s backwards;
}
.bp-wait-result .bp-success-icon svg { width: 24px; height: 24px; }
.bp-wait-result .bp-success-title { font-size: 1.08rem; margin-bottom: 0.3rem; }
.bp-wait-result .bp-success-sub   { font-size: 0.86rem; margin-bottom: 1rem; }
@keyframes bp-pop {
    0%   { transform: scale(0.55); opacity: 0; }
    62%  { transform: scale(1.07); opacity: 1; }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .bp-wait.is-entering [class*="bp-in-"],
    .bp-wait-halo,
    .bp-num-slot.is-rolling,
    .bp-ring.is-overtime .bp-ring-bar,
    .bp-live-step.is-current .bp-live-dot,
    .bp-wait-recheck.is-highlight,
    .bp-wait-result:not([hidden]),
    .bp-wait-result .bp-success-icon { animation: none; }
    .bp-ring-bar, .bp-hint-layer, .bp-live-dot, .bp-live-step { transition: none; }
    .bp-hint-layer.is-shown { opacity: 1; transform: none; }
}


/* ════════════════════════════════════════════════════════════════════════
   INTEGRATION DANS LA PAGE /pay
   L'ecran d'attente vit DEJA dans la carte de paiement : lui redonner une
   bordure, une ombre et un fond en faisait une carte dans une carte. Les
   espacements de .ck-status (padding 64/48, gap 16) s'ajoutaient en plus aux
   marges du composant, d'ou un ecran tres etale.
   ════════════════════════════════════════════════════════════════════════ */
.ck-status--wait {
    border: 0; background: transparent; box-shadow: none;
    padding: 20px 16px; gap: 0;
}
.ck-status--wait #payment-loader { gap: 0; padding: 4px 0 0; }

/* Compteur reduit : sur cette vue le recapitulatif de commande occupe deja
   l'ecran, l'attente doit rester discrete. */
.ck-status--wait .bp-wait-stage { width: 78px; height: 78px; margin: 0 auto 0.7rem; }
/* Lien de paiement simple : pas de minuteur, le suivi d'etapes suffit. Masque et non
   retire : le script du compteur s'appuie sur l'anneau pour faire evoluer le message
   et mettre le bouton de verification en avant. */
.ck-status--no-timer .bp-wait-stage { display: none; }

/* Lien de paiement simple, carte bancaire : simple ecran de redirection vers la page de
   paiement securisee (aucune attente a suivre ici). width + align-self : .ck-status est
   un flex centre, sans eux le bloc se reduit a son contenu (DESIGN.md regle 9). Le
   [hidden] explicite est necessaire car display: flex l'emporterait sur l'attribut. */
.ck-card-redirect {
    width: 100%; align-self: stretch; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 8px 0 4px;
}
.ck-card-redirect[hidden] { display: none; }
.ck-card-redirect-ico {
    width: 58px; height: 58px; border-radius: 50%; margin-bottom: 0.8rem;
    display: flex; align-items: center; justify-content: center;
    background: #eaf0fb; color: var(--app-them, #16489f);
}
.ck-card-redirect-ico svg { width: 28px; height: 28px; }
/* Prefixe .ck-status--wait : la page remet les marges des h3 et p a zero avec une
   regle plus specifique qu'une classe seule. */
.ck-status--wait .ck-card-redirect-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.3rem; color: var(--bp-ink, #0b1f3f); }
.ck-status--wait .ck-card-redirect-sub { font-size: 0.86rem; color: #64748b; margin: 0 0 1.4rem; }
.ck-card-redirect-prompt { font-size: 0.8rem; color: #64748b; }
.ck-card-redirect-btn { text-decoration: none; }
.ck-card-redirect-btn:hover { color: #fff; text-decoration: none; }
.ck-status--wait .bp-wait-halo  { width: 58px; height: 58px; }
.ck-status--wait .bp-ring,
.ck-status--wait .bp-ring svg   { width: 58px; height: 58px; }
.ck-status--wait .bp-ring-bg,
.ck-status--wait .bp-ring-bar   { stroke-width: 6.5; }
.ck-status--wait .bp-num        { height: 1.1rem; }
.ck-status--wait .bp-num-slot   { font-size: 0.95rem; line-height: 1.1rem; }
.ck-status--wait .bp-num-unit   { font-size: 0.4rem; letter-spacing: 0.1em; }

/* Rythme vertical resserre. */
.ck-status--wait .bp-success-title { font-size: 1.05rem; margin-bottom: 0.25rem; }
.ck-status--wait .bp-success-sub   { margin-bottom: 0.9rem; }
.ck-status--wait .bp-steps-live    { --bp-row: 62px; margin-bottom: 0.9rem; }
.ck-status--wait .bp-status-hint   { margin-bottom: 0.5rem; min-height: 2.2em; }

/* La verification manuelle est une ACTION : un lien souligne ne se lit pas
   comme telle sur un ecran ou c'est le seul geste possible. */
.ck-status--wait .ck-recheck { gap: 6px; }
.ck-status--wait .ck-recheck-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.62rem 1.35rem;
    border: 1px solid #cbd5e1; border-radius: 12px; background: #fff;
    color: var(--app-them, #16489f); font-size: 0.86rem; font-weight: 600;
    text-decoration: none; cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.ck-status--wait .ck-recheck-btn:hover {
    border-color: var(--app-them, #16489f);
    box-shadow: 0 2px 10px rgba(22, 72, 159, 0.12);
}
/* Delai depasse : c'est le geste evident, il passe en primaire. */
.ck-status--wait .ck-recheck-btn.is-highlight {
    background: var(--app-them, #16489f); border-color: var(--app-them, #16489f); color: #fff;
}

/* Carte de resultat. L'icone n'a AUCUNE regle de taille sur cette page :
   .result-icon n'est dimensionne que dans pay-modern.css / payment.css, qui ne
   sont pas charges ici — le SVG prenait donc toute la largeur disponible. */
.ck-status--wait .bp-wait-result { gap: 0; }
.ck-status--wait .result-icon {
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 0.8rem; background: #f1f5f9;
    animation: bp-pop 0.62s var(--bp-ease, ease) 0.08s backwards;
}
.ck-status--wait .result-icon svg { width: 26px; height: 26px; }
.ck-status--wait .bp-wait-result.is-ok .result-icon { background: #eafaf1; }
.ck-status--wait .bp-wait-result.is-ko .result-icon { background: #fef3f2; }
.ck-status--wait .ck-status-title   { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.3rem; color: var(--bp-ink, #0b1f3f); }
.ck-status--wait .ck-status-message { font-size: 0.86rem; color: #64748b; margin: 0 0 1rem; }

/* Espacements de bas d'ecran. Le message d'accompagnement reserve une hauteur
   fixe pour que le bloc ne saute pas quand le texte change de longueur, mais
   2,2 em laissaient 12 px de vide sous une ligne unique ; s'y ajoutaient trois
   marges successives avant le bouton. */
.ck-status--wait .bp-status-hint { min-height: 1.5em; margin-bottom: 0.15rem; }
.ck-status--wait .ck-recheck { margin-top: 2px; }

/* Carte de resultat compacte : elle vient APRES le suivi, qui porte deja
   l'information principale. Elle confirme, elle n'a pas a occuper l'ecran. */
/* Icone et titre sur la MEME ligne. Empiles, ils coutaient deux blocs pleine
   hauteur pour une information qui tient sur une ligne. La carte passe en
   flex-wrap : l'icone et le titre tiennent cote a cote, le message et le
   bouton sont forces au retour a la ligne par un flex-basis de 100%. */
.ck-status--wait .bp-wait-result {
    flex-direction: row; flex-wrap: wrap;
    align-items: center; justify-content: center;
    column-gap: 10px; row-gap: 0;
    padding: 0.85rem 0.9rem;
}
.ck-status--wait .result-icon { width: 32px; height: 32px; margin: 0; }
.ck-status--wait .result-icon svg { width: 17px; height: 17px; }
/* flex/width auto : le titre porte une largeur pleine heritee, qui repoussait
   l'icone a l'extreme gauche au lieu de la laisser a cote de lui. */
.ck-status--wait .ck-status-title   { font-size: 0.98rem; margin: 0; flex: 0 0 auto; width: auto; }
/* Selecteur par id : une regle de flex plus specifique gagnait sur la classe
   et laissait le message sur la ligne du titre, tres a droite. */
.ck-status--wait #result-message { flex: 0 0 100%; font-size: 0.8rem; margin: 0.35rem 0 0.7rem; text-align: center; }
.ck-status--wait .ck-thank-you      { flex: 0 0 100%; margin: 0 0 0.5rem; font-size: 0.78rem; }
.ck-status--wait .ck-status-btn { padding: 0.45rem 1.25rem; font-size: 0.83rem; }

/* Attente plafonnee (120 s). Tout ce qui suggerait « ca travaille » s'arrete :
   l'anneau cesse de respirer et se desature, la pastille de l'etape courante
   arrete de pulser, le halo disparait. Seule la verification manuelle reste
   vivante, et elle prend toute la place. Le paiement reste valide : aucun
   message d'echec ici. */
.bp-wait.is-stalled .bp-ring-bar { animation: none; stroke: #cbd5e1; }
.bp-wait.is-stalled .bp-wait-halo { animation: none; opacity: 0; }
.bp-wait.is-stalled .bp-live-step.is-current .bp-live-dot,
.bp-wait.is-stalled .bp-live-step.is-current .bp-live-ring { animation: none; }
.bp-wait.is-stalled .bp-num-slot { color: #94a3b8; }
.ck-status--wait .ck-recheck-btn.is-stalled {
    width: 100%; max-width: 300px;
    padding: 0.7rem 1.4rem; font-size: 0.9rem;
}