/* ======================================================
   CHAMPS DES VIREMENTS
====================================================== */

/* Base commune */
.champs_vir_all,
.wrong_vir_all,
.champs_viradd_nom_benef,
.champs_viradd_num_compte,
.champs_viradd_code_bic,
.champs_viradd_origine,
.wrong_viradd_nom_benef,
.wrong_viradd_num_compte,
.wrong_viradd_code_bic,
.wrong_viradd_origine,
.champs_vir_submit,
.champs_submit_off,
.champs_good,
.champs_wrong,
.champs_virement,
.champs_exec,
.wrong_exec {
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

/* Champs normaux */
.champs_vir_all,
.champs_viradd_nom_benef,
.champs_viradd_num_compte,
.champs_viradd_code_bic,
.champs_viradd_origine,
.champs_virement,
.champs_exec {
    border-color: #ECEDF0;
    color: #000000;
    background-color: #F7F8FA;
}

/* Champs en erreur */
.wrong_vir_all,
.wrong_viradd_nom_benef,
.wrong_viradd_num_compte,
.wrong_viradd_code_bic,
.wrong_viradd_origine,
.wrong_exec {
    border-color: #990000;
    color: #990000;
    background-color: #FFD7D7;
}

/* Champs simples */
.champs_vir_all,
.wrong_vir_all {
    padding: 5px;
    font-size: 14px;
}

.champs_virement {
    padding: 5px;
    font-size: 18px;
}

/* ======================================================
   CHAMPS AVEC ICÔNE À GAUCHE
====================================================== */

.champs_viradd_nom_benef,
.champs_viradd_num_compte,
.champs_viradd_code_bic,
.champs_viradd_origine,
.wrong_viradd_nom_benef,
.wrong_viradd_num_compte,
.wrong_viradd_code_bic,
.wrong_viradd_origine {
    padding: 5px 5px 5px 50px;
    font-size: 18px;
    background-position: left center;
    background-repeat: no-repeat;
}

/* Icônes normales */
.champs_viradd_nom_benef {
    background-image: url("../images/input_nom_benef.png");
}

.champs_viradd_num_compte {
    background-image: url("../images/input_num_compte.png");
}

.champs_viradd_code_bic {
    background-image: url("../images/input_code_bic.png");
}

.champs_viradd_origine {
    background-image: url("../images/input_origine.png");
}

/* Icônes d’erreur */
.wrong_viradd_nom_benef {
    background-image: url("../images/wrong_nom_benef.png");
}

.wrong_viradd_num_compte {
    background-image: url("../images/wrong_num_compte.png");
}

.wrong_viradd_code_bic {
    background-image: url("../images/wrong_code_bic.png");
}

.wrong_viradd_origine {
    background-image: url("../images/wrong_origine.png");
}

/* ======================================================
   CHAMP D’EXÉCUTION
====================================================== */

.champs_exec,
.wrong_exec {
    padding: 5px 50px 5px 5px;
    font-size: 18px;
    background-position: right center;
    background-repeat: no-repeat;
}

.champs_exec {
    background-image: url("../images/input_exec.png");
}

.wrong_exec {
    background-image: url("../images/wrong_exec.png");
}

/* ======================================================
   CHAMPS DE VALIDATION
====================================================== */

.champs_good,
.champs_wrong {
    width: 350px;
    max-width: 100%;
    height: 40px;
    padding: 5px;
    font-size: 20px;
    color: #238C57;
}

.champs_good {
    border-color: #ECEDF0;
    background-color: #F7F8FA;
}

.champs_wrong {
    border-color: #CC3300;
    background-color: #FFFFFF;
}

/* ======================================================
   BOUTONS
====================================================== */

.champs_vir_submit,
.champs_submit_off {
    width: 93%;
    height: 50px;
    padding: 10px;
    font-size: 14px;
}

.champs_vir_submit {
    border-color: #007461;
    color: #FFFFFF;
    background-color: #007461;
    cursor: pointer;
}

.champs_vir_submit:hover {
    background-color: #004652;
}

.champs_submit_off {
    border-color: #F7F8FA;
    color: #007461;
    background-color: #F7F8FA;
    cursor: not-allowed;
}

/* ======================================================
   FOCUS ACCESSIBLE
====================================================== */

.champs_vir_all:focus,
.champs_viradd_nom_benef:focus,
.champs_viradd_num_compte:focus,
.champs_viradd_code_bic:focus,
.champs_viradd_origine:focus,
.champs_good:focus,
.champs_virement:focus,
.champs_exec:focus,
.champs_vir_submit:focus {
    border-color: #007461;
    outline: 2px solid rgba(35, 140, 87, 0.25);
    outline-offset: 1px;
}

.wrong_vir_all:focus,
.wrong_viradd_nom_benef:focus,
.wrong_viradd_num_compte:focus,
.wrong_viradd_code_bic:focus,
.wrong_viradd_origine:focus,
.champs_wrong:focus,
.wrong_exec:focus {
    outline: 2px solid rgba(153, 0, 0, 0.25);
    outline-offset: 1px;
}

/* ======================================================
   CONTENEURS DES FORMULAIRES
====================================================== */

.contener_form_index,
.contener_form_champs {
    min-width: 0;
}

.contener_form_index {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.contener_form_champs input {
    display: block;
    max-width: 100%;
    height: 40px;
}

/* Complément à .champs_vir_submit, déjà présent dans Scripts/champs.css. */
.champs_vir_submit.bouton_beneficiaire {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 300px;
    max-width: 100%;
    height: auto;
    min-height: 35px;
    padding: 14px 18px;
    border-radius: 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
}

/* Le focus maintient le vert foncé après le clic, jusqu'à sa perte. */
.champs_vir_submit.bouton_beneficiaire:hover,
.champs_vir_submit.bouton_beneficiaire:active,
.champs_vir_submit.bouton_beneficiaire:focus {
    background-color: #004652;
}

.champs_vir_submit.bouton_beneficiaire:focus-visible {
    outline: 2px solid #007461;
    outline-offset: 3px;
}

/* box_initiales */
.box_initiales {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;

    width: 40px;
    height: 40px;
    border: 1px solid #d6e9e2;
    border-radius: 16px;
    background-color: #edf7f3;

    color: #007461;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}