/* =========================================================================
   BODEZIA — RÉSULTAT DU TRANSFERT
   -------------------------------------------------------------------------
   Réécriture complète. L'ancien fichier contenait TROIS fois le même
   contenu, copié bout à bout : 522 lignes pour 174 utiles.

   Ce qui change
     - Le fichier n'est plus triplé
     - Le message serveur devient le texte principal : les sous-titres en
       dur ont été retirés du PHP, ils répétaient mot pour mot les
       messages de req-payment-result.js
     - L'encadré se masque tant qu'il n'y a rien à dire
     - #8f999f (3,0:1) sort
     - Bascule à 991,98px comme le reste du projet

   L'en-tête de page vient de motif-origin-money.css (.flow-main).
   Les tokens viennent de flow.css.
   ========================================================================= */

#money-result-flow {
    min-width: 0;
}


/* =========================================================================
   CARTE
   ========================================================================= */

#money-result-flow .money-result-card {
    padding: 40px 32px 32px;
}


/* =========================================================================
   ÉTATS
   ========================================================================= */

#money-result-flow .money-result-state {
    display: flex;
    align-items: center;
    flex-direction: column;

    max-width: 560px;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center;
}


/* =========================================================================
   ICÔNE D'ÉTAT
   ========================================================================= */

#money-result-flow .money-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 76px;
    height: 76px;

    margin-bottom: 20px;

    border-radius: 50%;

    font-size: 1.8rem;
}

#money-result-flow .money-result-icon.is-checking {
    color: var(--flow-c-accent, #7441d4);

    background: var(--flow-c-accent-soft, #f3eefd);
}

#money-result-flow .money-result-icon.is-success {
    color: #1b7a44;

    background: rgba(39, 174, 96, 0.12);
}

#money-result-flow .money-result-icon.is-processing {
    color: #96690a;

    background: rgba(242, 178, 38, 0.16);
}

#money-result-flow .money-result-icon.is-failed {
    color: #c62b39;

    background: rgba(235, 87, 87, 0.12);
}


/* =========================================================================
   TEXTE
   ========================================================================= */

#money-result-flow .money-result-title {
    margin: 0;

    color: var(--flow-c-heading, #2b3034);

    font-size: 1.5rem;   /* 24px */
    font-weight: 600;

    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* Ne subsiste que sur l'état « Vérification… », les trois autres ayant
   été retirés du PHP : ils répétaient les messages du JS. */
#money-result-flow .money-result-subtitle {
    margin: 8px 0 0;

    color: var(--flow-c-body, #5c6670);

    font-size: var(--flow-fs-body, 0.9375rem);
    line-height: 1.5;
}


/* =========================================================================
   MESSAGE SERVEUR
   C'est désormais le texte porteur : il vient de req-payment-status.php
   et détaille ce qui s'est réellement passé.
   ========================================================================= */

#money-result-flow .money-result-message-wrap {
    max-width: 620px;

    margin: 24px auto 0;

    padding: 16px 20px;

    background: var(--flow-c-surface, #f9fafc);

    border: 1px solid var(--flow-c-border, #e6e9ee);
    border-radius: 12px;

    text-align: center;
}

/* Tant que le statut n'est pas revenu, l'encadré n'a rien à montrer */
#money-result-flow .money-result-message-wrap:has(.money-result-message:empty) {
    display: none;
}

#money-result-flow .money-result-message {
    color: var(--flow-c-body, #5c6670);

    font-size: var(--flow-fs-body, 0.9375rem);
    line-height: 1.55;
}


/* =========================================================================
   ACTIONS
   ========================================================================= */

#money-result-flow .money-result-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 16px;

    margin-top: 26px;
}

#money-result-flow .money-result-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 260px;
    min-height: 50px;

    padding: 12px 28px;

    border-radius: 999px;

    font-size: var(--flow-fs-body, 0.9375rem);
    font-weight: 600;
}

/* C'était un lien mort à 11,8px : <a href="#"> sans gestionnaire.
   Devenu un <button> qui appelle window.print(). */
#money-result-flow .money-result-print {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 8px 16px;

    color: var(--flow-c-accent, #7441d4);

    background: none;
    border: 0;

    font-size: var(--flow-fs-label, 0.875rem);
    font-weight: 600;

    text-decoration: none;
    cursor: pointer;
}

#money-result-flow .money-result-print:hover {
    color: var(--flow-c-accent-dark, #6533c1);

    text-decoration: underline;
}

#money-result-flow .money-result-print:focus-visible {
    outline: 2px solid var(--flow-c-accent, #7441d4);
    outline-offset: 2px;

    border-radius: 8px;
}


/* =========================================================================
   IMPRESSION
   La barre latérale et l'en-tête n'ont rien à faire sur un justificatif.
   ========================================================================= */

@media print {

    #flow-sidebar,
    #header,
    #footer,
    #money-result-flow .money-result-actions {
        display: none !important;
    }

    #money-result-flow .money-result-card {
        border: 0;
        box-shadow: none;
    }
}


/* =========================================================================
   TABLETTE ET MOBILE  (< 992px)
   ========================================================================= */

@media (max-width: 991.98px) {

    #money-result-flow .money-result-card {
        padding: 30px 20px 26px;
    }
}


/* =========================================================================
   MOBILE  (< 576px)
   ========================================================================= */

@media (max-width: 575.98px) {

    #money-result-flow .money-result-card {
        padding: 28px 16px 22px;
    }

    #money-result-flow .money-result-icon {
        width: 66px;
        height: 66px;

        margin-bottom: 16px;

        font-size: 1.5rem;
    }

    #money-result-flow .money-result-title {
        font-size: 1.25rem;   /* 20px */
    }

    #money-result-flow .money-result-message-wrap {
        margin-top: 20px;
        padding: 14px 16px;
    }

    #money-result-flow .money-result-primary-btn {
        width: 100%;
        min-width: 0;
        min-height: 52px;
    }
}