#smooth-wrapper {
    -webkit-overflow-scrolling: auto !important;
}

.menu-flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
}

.mil-text-lg {
    font-size: 1.2rem !important;
}

.mil-content {
    padding-top: 130px;
    /* Ajout de padding pour éviter le chevauchement */
}

.text-white {
    color: white !important;
}

.mil-top-panel {
    background: #fff;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

.mil-top-panel-content {
    padding: 15px 0;
    width: 100%;
}

.mil-logo {
    display: block;
}


.mil-profile-menu {
    position: relative;
    display: block;
}

.mil-profile-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
}

.mil-profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.mil-account-balance {
    background: linear-gradient(0deg, #224d50 0, #1c6360 100%);
    padding: 40px;
    border-radius: 20px;
    color: #f2fafa !important;
    margin-bottom: 30px;
    width: 100% !important;
}

.mil-account-info {
    background: linear-gradient(0deg, #224d50 0, #1c6360 100%);
    padding: 40px;
    border-radius: 20px;
    color: #f2fafa !important;
    margin-bottom: 30px;
    width: 100% !important;
}

.mil-account-info .info {
    font-family: 'Courier New', Courier, monospace !important;
}

.mil-account-info p {
    margin-bottom: 10px;
    font-size: larger !important;
}

.mil-account-info .info .title {
    margin-bottom: 10px;
    color: #fff !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serifS;
    font-weight: 900px !important;
}

.mil-account-balance h2 {
    font-size: 42px;
    margin-bottom: 10px;
    color: #f2fafa;
}






/* Profil page */

.profil .mil-profile-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
}

.profile-settings {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.profil .mil-setting-card, .date-picker-input-group{
    background: #f2fafa;
    padding: 20px;
    border-radius: 15px;
    text-align: justify;
    margin-bottom: 10px;
    position: relative;
    cursor: pointer;
    /* Donne l'impression que c'est cliquable */
    border: 1px solid #d1d1d1;
    /* Ajoute une bordure discrète */
    transition: all 0.3s ease;
    /* Transition fluide pour l'effet de survol */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Légère ombre pour la profondeur */
}

.profil .mil-setting-card:hover {
    background: #e8f8f8;
    /* Change légèrement la couleur de fond au survol */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    /* Accentue l'ombre au survol */
    transform: translateY(-2px);
    /* Donne un effet de survol */
}

.profil .mil-setting-card::after {
    content: '\2192';
    /* Utilise le symbole de flèche simple */
    font-size: 20px;
    color: #0d5152;
    /* Couleur de l'icône */
    position: absolute;
    right: 20px;
    /* Espace par rapport au bord droit */
    top: 50%;
    /* Centre verticalement */
    transform: translateY(-50%);
    /* Aligner verticalement */
}

.data-settings .mil-setting-card::after {
    content: '\1F58A';
    /* Utilise le symbole de flèche simple */
    font-size: 20px;
    color: #0d5152;
    /* Couleur de l'icône */
    position: absolute;
    right: 20px;
    /* Espace par rapport au bord droit */
    top: 50%;
    /* Centre verticalement */
    transform: translateY(-50%);
    /* Aligner verticalement */
}


.verification .mil-verification-card::after {

    /* Utilise le symbole de flèche simple */
    font-size: 20px;
    color: #0d5152;
    /* Couleur de l'icône */
    position: absolute;
    right: 20px;
    /* Espace par rapport au bord droit */
    top: 50%;
    /* Centre verticalement */
    transform: translateY(-50%);
    /* Aligner verticalement */
}
/* Loader-custom */

.loader-custom {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite
  }
  .loader-custom::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid #FFF;
    animation: prixClipFix 2s linear infinite ;
  }

  @keyframes rotate {
    100%   {transform: rotate(360deg)}
  }

  @keyframes prixClipFix {
      0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
      25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
      50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
      75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
      100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
  }

  /* =================================
   Barre de navigation mobile fixe (VERSION CORRIGÉE ET SÉCURISÉE)
   ================================= */

        .mil-bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 65px;
            /* Hauteur de la barre */
            background: #ffffff;
            display: flex;
            /* Cette règle fonctionnera maintenant ! */
            justify-content: space-around;
            align-items: stretch;
            /* Fait en sorte que les liens remplissent toute la hauteur */
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 998;
        }

        /* On rend le sélecteur plus spécifique pour éviter les conflits */
        .mil-bottom-nav .mil-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: #898d96;
            transition: color 0.3s ease;
            flex-grow: 1;
            /* Chaque item prend la même largeur */
            padding: 5px 0;
            /* Un peu d'espace vertical */
        }

        .mil-bottom-nav .mil-nav-item i {
            font-size: 20px;
            margin-bottom: 5px;
        }

        .mil-bottom-nav .mil-nav-item span {
            font-size: 12px;
            font-weight: 500;
        }

        /* Sélecteur plus spécifique pour l'état actif */
        .mil-bottom-nav .mil-nav-item.active {
            color: #1c6360;
            font-weight: 700;
        }

        /* Ajustement du contenu principal pour ne pas être caché par la barre */
        @media (max-width: 992px) {
            .mil-content {
                padding-bottom: 85px !important;
            }
        }


  /* =================================
   NOUVELLE CARTE SOLDE "NEO-BANQUE"
   ================================= */

.mil-neo-balance-card {
    background: linear-gradient(135deg, #1c6360 0%, #224d50 100%); /* Dégradé plus doux */
    border-radius: 24px; /* Bords plus arrondis */
    padding: 30px 20px; /* Padding adapté au mobile */
    color: #ffffff;
    text-align: center; /* Tout est centré pour un look d'app */
    width: 100%;
    margin-bottom: 30px;
    box-shadow: 0 16px 32px -12px rgba(28, 99, 96, 0.4); /* Ombre subtile */
}

/* Le label "Solde disponible" */
.mil-neo-balance-card .mil-neo-label {
    font-size: 0.9rem; /* 14px */
    font-weight: 500;
    text-transform: uppercase; /* Standard dans les UI modernes */
    letter-spacing: 0.5px;
    opacity: 0.7; /* On le rend moins proéminent */
    margin-bottom: 8px;
}

/* Le conteneur du solde */
.mil-neo-balance-card .mil-neo-balance {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Aligne le haut du € avec le haut du chiffre */
    line-height: 1;
}

/* Le symbole Euro "€" */
.mil-neo-balance-card .mil-neo-balance .currency {
    font-size: 1.7rem; /* Environ 28px */
    font-weight: 500;
    margin-top: 0.5rem; /* Ajustement pour un meilleur alignement vertical */
    margin-right: 8px;
    opacity: 0.8;
}

/* Le montant du solde - LA PARTIE LA PLUS IMPORTANTE */
.mil-neo-balance-card .mil-neo-balance .amount {
    font-weight: 700;
    /* Police responsive : minimum 40px, maximum 64px, et s'adapte entre les deux */
    font-size: clamp(2.5rem, 10vw, 4rem);
}

/* L'identifiant du compte en bas */
.mil-neo-balance-card .mil-neo-account-id {
    margin-top: 12px;
    font-family: 'Courier New', Courier, monospace; /* Police mono pour les ID */
    font-size: 0.8rem; /* 13px */
    opacity: 0.6;
    cursor: pointer; /* Pour indiquer que l'on peut copier */
    transition: opacity 0.3s;
}

.mil-neo-balance-card .mil-neo-account-id:hover {
    opacity: 1;
}

/* Ajustements pour les écrans plus larges (desktop) */
@media (min-width: 768px) {
    .mil-neo-balance-card {
        padding: 40px; /* Plus d'espace sur desktop */
    }
}
/* =================================
   BOUTONS D'ACTION RAPIDE "NEO-BANQUE"
   ================================= */

.mil-quick-actions {
    position: relative;
    padding: 10px 0; /* Un peu d'air au-dessus et en-dessous */
    margin-bottom: 30px;
}

/* Le style de base pour chaque "pod" d'action */
.mil-action-pod {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;  /* Largeur fixe */
    height: 90px; /* Hauteur fixe */
    border-radius: 24px; /* Forme "Squircle" très moderne */
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    flex-shrink: 0; /* Empêche le pod de se déformer */
}

/* Style pour l'icône à l'intérieur du pod */
.mil-action-pod i {
    font-size: 24px;
    margin-bottom: 8px;
}

/* Style pour le texte à l'intérieur du pod */
.mil-action-pod span {
    font-size: 13px;
    font-weight: 600;
}

/* --- Style de l'Action Principale (Envoi) --- */
.mil-action-pod.primary {
    background: linear-gradient(135deg, #1c6360 0%, #224d50 100%);
    color: #ffffff;
    box-shadow: 0 10px 20px -8px rgba(28, 99, 96, 0.5);
}

/* --- Style des Actions Secondaires --- */
.mil-action-pod:not(.primary) {
    background-color: #f2fafa; /* Fond très clair, presque blanc */
    color: #0d5152; /* Texte de couleur principale */
    border: 1px solid #e0ebea; /* Bordure très subtile */
}
.mil-action-pod:not(.primary) i {
    color: #1c6360; /* Icône de couleur principale */
}

/* --- Effets d'interaction pour TOUS les pods --- */
.mil-action-pod:hover {
    transform: translateY(-4px); /* Se soulève légèrement */
    box-shadow: 0 14px 28px -10px rgba(28, 99, 96, 0.4); /* Ombre plus prononcée */
}

.mil-action-pod:active {
    transform: translateY(-2px); /* Effet de pression */
    box-shadow: 0 8px 15px -8px rgba(28, 99, 96, 0.3); /* Ombre réduite */
}

/* Amélioration de l'indicateur de swipe */
.mil-quick-actions .swipe-indicator {
    right: -10px;
    background-color: rgba(230, 240, 239, 0.9);
    padding: 8px 10px;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    z-index: 50;
    color: #0d5152;
}


/* =================================
   SECTION STATISTIQUES "NEO-BANQUE"
   ================================= */

.mil-statistics-container {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
}

/* Style de base de chaque carte statistique */
.mil-stat-card {
    display: flex; /* Aligne l'icône et le texte horizontalement */
    align-items: center;
    background-color: #f2fafa;
    border-radius: 16px;
    padding: 20px;
    min-width: 220px; /* Assure une largeur minimale sur mobile */
    flex-shrink: 0;
    transition: all 0.3s ease;
    border: 1px solid transparent; /* Bordure cachée pour le hover */
}

.mil-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px -5px rgba(13, 81, 82, 0.1);
    border-color: #e0ebea;
}

/* Le cercle qui entoure l'icône */
.mil-stat-card .stat-icon-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px; /* Espace entre l'icône et le texte */
    flex-shrink: 0;
}

.mil-stat-card .stat-icon-wrapper i {
    font-size: 18px;
}

/* Couleurs par type de stat */
.stat-icon-wrapper.outgoing { background-color: #ffe8e3; color: #f27457; }
.stat-icon-wrapper.incoming { background-color: #e0f5f5; color: #03a6a6; }
.stat-icon-wrapper.pending  { background-color: #fff4e3; color: #ffab2d; }

/* Conteneur pour le texte */
.stat-content {
    display: flex;
    flex-direction: column;
}

/* Le montant */
.stat-content .stat-value {
    font-size: 1.3rem; /* ~21px */
    font-weight: 700;
    color: #0d5152;
    line-height: 1.2;
}

/* Le label */
.stat-content .stat-label {
    font-size: 0.9rem; /* ~14px */
    color: #898d96;
}

/* --- Disposition sur DESKTOP (Grille) --- */
@media (min-width: 992px) {
    .mil-statistics-container {
        display: grid;
        /* Grille responsive : crée autant de colonnes que possible d'au moins 240px */
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 20px;
    }
}

/* Amélioration de l'indicateur de swipe */
.mil-statistics-container .swipe-indicator {
    right: -10px;
    background-color: rgba(230, 240, 239, 0.9);
    padding: 8px 10px;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    z-index: 50;
    color: #0d5152;
}



/* =================================
   LISTE DE TRANSACTIONS "NEO-BANQUE"
   ================================= */

.mil-transaction-list-v2 {
    background-color: #ffffff; /* Fond blanc propre */
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 8px 30px -10px rgba(13, 81, 82, 0.08);
}

/* En-tête de la section (Titre + lien "Tout voir") */
.mil-tx-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eef2f2;
}
.mil-tx-header h5 {
    margin-bottom: 0;
    color: #0d5152;
    font-weight: 700;
}
.mil-tx-header .mil-link {
    text-decoration: none;
    color: #1c6360;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Conteneur pour la liste */
.mil-tx-items-wrapper {
    display: flex;
    flex-direction: column;
}

/* Chaque ligne de transaction */
.mil-tx-item {
    display: flex;
    align-items: center;
    padding: 15px 5px; /* Padding vertical pour l'espace, horizontal pour le clic */
    transition: background-color 0.2s ease;
}
.mil-tx-item:hover {
    background-color: #f8fbfb;
    border-radius: 10px;
}
.mil-tx-item:not(:last-child) {
    border-bottom: 1px solid #eef2f2;
}

/* Le cercle de l'icône */
.mil-tx-icon-wrapper {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
}
/* Couleurs de fond/texte pour les icônes */
.mil-tx-icon-wrapper.outgoing { background-color: #ffe8e3; color: #f27457; }
.mil-tx-icon-wrapper.incoming { background-color: #e0f5f5; color: #03a6a6; }
.mil-tx-icon-wrapper.pending  { background-color: #fff4e3; color: #ffab2d; }

/* Les détails textuels (titre, sous-titre) */
.mil-tx-details {
    flex-grow: 1; /* Prend tout l'espace disponible */
    margin-right: 10px;
}

.mil-tx-details .mil-tx-title {
    font-weight: 600;
    color: #0d5152;
    font-size: 1rem; /* ~16px */
    line-height: 1.3;
}

.mil-tx-details .mil-tx-subtitle {
    font-size: 0.85rem; /* ~13.5px */
    color: #898d96;
}

/* Le statut (pending, failed, etc.) */
.mil-tx-status {
    font-weight: 600;
}
.mil-tx-status.pending, .mil-tx-status.refunded { color: #ffab2d; }
.mil-tx-status.failed { color: #f27457; }

/* Le montant à droite */
.mil-tx-amount {
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
}

/* On peut réutiliser ces classes que vous aviez déjà */
.mil-amount-positive { color: #03a6a6; }
.mil-amount-negative { color: #f27457; }


/* =================================
   AMÉLIORATION MODALE DE TRANSFERT (v2 - Avec scroll et compacité)
   ================================= */

#transferModal .modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);

    /* C'est la partie qui corrige le scroll */
    max-height: 90vh; /* La modale ne dépassera jamais 90% de la hauteur de l'écran */
    display: flex;
    flex-direction: column;
}

#transferModal .modal-header {
    border-bottom: 1px solid #eef2f2;
    padding: 1rem 1.5rem;
    flex-shrink: 0; /* Empêche l'en-tête de rétrécir */
}

#transferModal .modal-body {
    padding: 1rem 1.5rem;

    /* La ligne la plus importante : active le scroll uniquement pour le corps */
    overflow-y: auto;
}

#transferModal .modal-footer {
    background-color: #f8fbfb;
    border-top: 1px solid #eef2f2;
    padding: 1rem 1.5rem;
    flex-shrink: 0; /* Empêche le pied de page de rétrécir */
}

/* --- Améliorations de compacité pour mobile --- */

/* Style unifié pour les groupes de formulaire */
.form-group-v2 {
    margin-bottom: 1rem; /* On réduit la marge verticale */
}
.form-group-v2 label {
    font-weight: 600;
    font-size: 0.85rem; /* On réduit légèrement la taille du label */
    color: #0d5152;
    margin-bottom: 0.4rem;
    display: block;
}
.form-group-v2 .form-control, .form-group-v2 .form-select {
    background-color: #f8fbfb;
    border: 1px solid #e0ebea;
    border-radius: 8px;
    padding: 0.65rem 1rem; /* On réduit légèrement le padding vertical des inputs */
}
.form-group-v2 .form-control:focus, .form-group-v2 .form-select:focus {
    background-color: #fff;
    border-color: #1c6360;
    box-shadow: none;
}
.form-group-v2 .input-group .form-control {
    border-left: none;
}
.form-group-v2 .input-group-text {
    background-color: #f8fbfb;
    border: 1px solid #e0ebea;
    border-right: none;
    border-radius: 8px 0 0 8px;
}
/* On ajuste le grand input du montant */
.form-group-v2 .form-control-lg {
    font-size: 1.4rem; /* Légère réduction */
    font-weight: 700;
    padding: 0.75rem 1rem; /* On s'assure que son padding est cohérent */
}
.error-text {
    font-size: 0.8rem;
    margin-top: 4px;
}

/* Style pour les champs du nouveau bénéficiaire */
.new-beneficiary-fields {
    background-color: #fafdfd;
    border: 1px dashed #e0ebea;
    padding: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    border-radius: 8px;
}
.new-beneficiary-fields .form-group-v2 {
    margin-bottom: 0.75rem;
}
.new-beneficiary-fields .form-group-v2:last-child {
    margin-bottom: 0;
}

/* Style pour le champ Motif */
.textarea-wrapper {
    position: relative;
}
.textarea-wrapper .char-counter {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 0.75rem;
    color: #898d96;
}


/* =================================
   MODALES DE FEEDBACK DE TRANSACTION
   ================================= */

.feedback-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1060; /* Au-dessus des autres modales Bootstrap */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.feedback-modal.show {
    opacity: 1;
    visibility: visible;
}

/* Thème de couleur SUCCÈS */
.feedback-modal.success {
    background: linear-gradient(160deg, #1c6360 0%, #1a5956 100%);
}
.feedback-modal.success .feedback-button {
    background-color: rgba(255, 255, 255, 0.15);
}
.feedback-modal.success .feedback-button:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

/* Thème de couleur ÉCHEC */
.feedback-modal.failure {
    background: linear-gradient(160deg, #f27457 0%, #e06b50 100%);
}
.feedback-modal.failure .feedback-button {
    background-color: rgba(255, 255, 255, 0.15);
}
.feedback-modal.failure .feedback-button:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

/* Contenu centré */
.feedback-content {
    text-align: center;
    padding: 20px;
    animation: zoomIn 0.4s ease forwards;
}

@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.feedback-icon-wrapper {
    margin: 0 auto 25px;
}

.feedback-icon {
    width: 100px;
    height: 100px;
}

/* --- Animation du Checkmark (Succès) --- */
.checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 3;
    stroke-miterlimit: 10;
    stroke: #fff;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke-width: 4;
    stroke: #fff;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}

/* --- Animation de la Croix (Échec) --- */
.cross-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 3;
    stroke: #fff;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.cross-path {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke-width: 4;
    stroke: #fff;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}

/* Keyframe générique pour l'animation de dessin */
@keyframes stroke {
    100% { stroke-dashoffset: 0; }
}

/* Typographie */
.feedback-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.feedback-message {
    font-size: 1.1rem;
    opacity: 0.8;
    max-width: 320px;
    margin: 0 auto 30px;
}

/* Bouton */
.feedback-button {
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* --- AMÉLIORATION : Récapitulatif de Transaction --- */

.feedback-summary {
    background-color: rgba(255, 255, 255, 0.08); /* Fond translucide très subtil */
    border-radius: 12px;
    padding: 20px;
    margin: 25px auto; /* Espace vertical et centrage horizontal */
    max-width: 350px;
    width: 100%;
    text-align: left; /* On aligne le texte à gauche à l'intérieur du bloc */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.summary-row {
    display: flex;
    justify-content: space-between; /* Aligne le label à gauche et la valeur à droite */
    align-items: flex-start; /* Gère les valeurs sur plusieurs lignes */
    font-size: 0.95rem; /* ~15px */
    line-height: 1.5;
}

.summary-row:not(:last-child) {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Séparateur discret */
}

/* Style pour les labels (Bénéficiaire, IBAN...) */
.summary-row strong {
    font-weight: 500;
    opacity: 0.7; /* On le rend moins proéminent */
    margin-right: 15px; /* Espace entre label et valeur */
    flex-shrink: 0;
}

/* Style pour les valeurs (John Doe, FR76...) */
.summary-row .summary-value {
    font-weight: 600;
    word-break: break-word; /* Coupe les longs IBAN si nécessaire */
    text-align: right;
}

/* On met en évidence le montant */
.summary-row .summary-value.amount {
    font-size: 1.1rem;
    color: #fff; /* S'assure qu'il est bien blanc */
}

.feedback-message .highlighted-amount {
    font-weight: 700;
    /* Un peu de couleur pour le faire ressortir, mais pas trop.
       Ici, on utilise une version un peu plus claire de blanc. */
    color: #ffffff;
    /* Si le fond était blanc, on utiliserait la couleur principale : color: #1c6360; */
}