@charset "utf-8";
/* CSS Document */

/* Reset de base (corrigé) */
body, div, h1, h2, h3, h4, h5, h6, p, ul, img, a {
	margin: 0px;
	padding: 0px;
	outline: none;
	border: 0px;
}

body, td, th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
}

body {
	background-color: #FFFFFF;
	margin: 0px;
}

/* Champs */
.champs_vir_all {
	border: #ECEDF0 1px solid;
	font-weight: normal;
	font-size: 14px;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #F7F8FA;
	padding: 5px;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.wrong_vir_all {
	border: #900 1px solid;
	font-weight: normal;
	font-size: 14px;
	color: #900;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #FFD7D7;
	padding: 5px;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.champs_viradd_nom_benef {
	border: #ECEDF0 1px solid;
	font-weight: normal;
	font-size: 18px;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #F7F8FA;
	padding: 5px;
	padding-left: 50px;
	background-image: url("https://finbankpro.com/images/input_nom_benef.png");
	background-position: left;
	background-repeat: no-repeat;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.champs_viradd_num_compte {
	border: #ECEDF0 1px solid;
	font-weight: normal;
	font-size: 18px;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #F7F8FA;
	padding: 5px;
	padding-left: 50px;
	background-image: url("https://www.finbankpro.com/images/input_num_compte.png");
	background-position: left;
	background-repeat: no-repeat;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.champs_viradd_code_bic {
	border: #ECEDF0 1px solid;
	font-weight: normal;
	font-size: 18px;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #F7F8FA;
	padding: 5px;
	padding-left: 50px;
	background-image: url("https://www.finbankpro.com/images/input_code_bic.png");
	background-position: left;
	background-repeat: no-repeat;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.champs_viradd_origine {
	border: #ECEDF0 1px solid;
	font-weight: normal;
	font-size: 18px;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #F7F8FA;
	padding: 5px;
	padding-left: 50px;
	background-image: url("https://www.finbankpro.com/images/input_origine.png");
	background-position: left;
	background-repeat: no-repeat;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
.wrong_viradd_nom_benef
{
	BORDER: #900 1px solid;
    FONT-WEIGHT: normal;
	FONT-SIZE: 18px;
	COLOR: #900; 
	FONT-FAMILY: Arial, Helvetica, sans-serif; 
	BACKGROUND-COLOR: #FFD7D7;
	padding: 5px;
	padding-left:50px;
	background-image:url("https://www.finbankpro.com/images/wrong_nom_benef.png");
	background-position: left;
	background-repeat: no-repeat;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; /* optional rounded corners for browsers that support it */
}
.wrong_viradd_num_compte
{
	BORDER: #900 1px solid;
    FONT-WEIGHT: normal;
	FONT-SIZE: 18px;
	COLOR: #900; 
	FONT-FAMILY: Arial, Helvetica, sans-serif; 
	BACKGROUND-COLOR: #FFD7D7;
	padding: 5px;
	padding-left:50px;
	background-image:url("https://www.finbankpro.com/images/wrong_num_compte.png");
	background-position: left;
	background-repeat: no-repeat;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; /* optional rounded corners for browsers that support it */
}
.wrong_viradd_code_bic
{
	BORDER: #900 1px solid;
    FONT-WEIGHT: normal;
	FONT-SIZE: 18px;
	COLOR: #900; 
	FONT-FAMILY: Arial, Helvetica, sans-serif; 
	BACKGROUND-COLOR: #FFD7D7;
	padding: 5px;
	padding-left:50px;
	background-image:url("https://www.finbankpro.com/images/wrong_code_bic.png");
	background-position: left;
	background-repeat: no-repeat;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; /* optional rounded corners for browsers that support it */
}
.wrong_viradd_origine
{
	BORDER: #900 1px solid;
    FONT-WEIGHT: normal;
	FONT-SIZE: 18px;
	COLOR: #900; 
	FONT-FAMILY: Arial, Helvetica, sans-serif; 
	BACKGROUND-COLOR: #FFD7D7;
	padding: 5px;
	padding-left:50px;
	background-image:url("https://www.finbankpro.com/images/wrong_origine.png");
	background-position: left;
	background-repeat: no-repeat;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; /* optional rounded corners for browsers that support it */
}
.champs_vir_submit
{
	BORDER: #30AB53 1px solid;
	FONT-WEIGHT: normal;
	FONT-SIZE: 14px; 
	COLOR: #FFFFFF; 
	FONT-FAMILY: Arial, Helvetica, sans-serif; 
	BACKGROUND-COLOR: #238C57;
	padding: 10px;
	width:93%; 
	height:50px;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; /* optional rounded corners for browsers that support it */
}
.champs_submit_off
{
	BORDER: #F7F8FA 1px solid;
    FONT-WEIGHT: normal;
	FONT-SIZE: 14px;
	COLOR: #238C57; 
	FONT-FAMILY: Arial, Helvetica, sans-serif;
	BACKGROUND-COLOR: #F7F8FA;
	padding: 10px;
	width:93%; 
	height:50px;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; /* optional rounded corners for browsers that support it */
}
.champs_good
{
	BORDER: #ECEDF0 1px solid;
	FONT-WEIGHT: normal;
	FONT-SIZE: 20px; 
	COLOR: #238C57; 
	FONT-FAMILY: Arial, Helvetica, sans-serif; 
	BACKGROUND-COLOR: #F7F8FA;
	padding: 5px;
	width: 350px; 
	height:40px;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; /* optional rounded corners for browsers that support it */
}
.champs_wrong
{
	BORDER: #C30 1px solid;
	FONT-WEIGHT: normal;
	FONT-SIZE: 20px; 
	COLOR: #238C57; 
	FONT-FAMILY: Arial, Helvetica, sans-serif; 
	BACKGROUND-COLOR: #FFFFFF;
	padding: 5px;
	width: 350px; 
	height:40px;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; /* optional rounded corners for browsers that support it */
}
.champs_virement
{
	BORDER: #ECEDF0 1px solid;
    FONT-WEIGHT: normal;
	FONT-SIZE: 18px;
	COLOR: #000000; 
	FONT-FAMILY: Arial, Helvetica, sans-serif; 
	BACKGROUND-COLOR: #F7F8FA;
	padding: 5px;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; /* optional rounded corners for browsers that support it */
}
.champs_exec
{
	BORDER: #ECEDF0 1px solid;
    FONT-WEIGHT: normal;
	FONT-SIZE: 18px;
	COLOR: #000000; 
	FONT-FAMILY: Arial, Helvetica, sans-serif; 
	BACKGROUND-COLOR: #F7F8FA;
	padding: 5px;
	background-image:url("https://www.finbankpro.com/images/input_exec.png");
	background-position: right;
	background-repeat: no-repeat;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; /* optional rounded corners for browsers that support it */
}
.wrong_exec
{
	BORDER: #900 1px solid;
    FONT-WEIGHT: normal;
	FONT-SIZE: 18px;
	COLOR: #900; 
	FONT-FAMILY: Arial, Helvetica, sans-serif; 
	BACKGROUND-COLOR: #FFD7D7;
	padding: 5px;
	background-image:url("https://www.finbankpro.com/images/wrong_exec.png");
	background-position: right;
	background-repeat: no-repeat;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; /* optional rounded corners for browsers that support it */
}
.class_menu_fixe {
	width: 100%;
	position: fixed;
	top: 0;
}
.class_barre_green {
	width: 100%;
	background: #00915A;
	padding: 0px;
}
.class_barre_noir {
	width: 100%;
	background: #000000;
	padding: 0px;
}
.class_barre_auth {
	width: 100%;
	background: #373737;
	padding: 0px;
}
.class_barre_darkblue {
	width: 100%;
	background: #071621;
	padding: 0px;
}
.class_barre_blanc {
	width: 100%;
	background: #FFF;
	padding: 0px;
}
.class_barre_grey {
	width: 100%;
	background: #F7F8FA;
	padding: 0px;
}
.barre_grey {
	width: 100%;
	height: 1px;
	background: #ECEDF0;
	padding: 0px;
}
.box_blue_up {
	border-right: 1px solid #238C57;
	border-left: 1px solid #238C57;
	border-top: 1px solid #238C57;
	border-bottom: 0px solid #238C57;
	background: #238C57;
	vertical-align: middle;
	padding: 0px;
	border-radius: 10px 10px 0px 0px; /* optional rounded corners for browsers that support it */
}
.box_white_down {
	border: 1px solid #003A80;
	background: #FFFFFF;
	vertical-align: middle;
	padding: 0px;
	border-radius: 0px 0px 10px 10px; /* optional rounded corners for browsers that support it */
}
.box_blue_left {
	border-right: 1px solid #238C57;
	border-left: 1px solid #238C57;
	border-top: 1px solid #238C57;
	border-bottom: 0px solid #238C57;
	background: #238C57;
	vertical-align: middle;
	padding: 0px;
	border-radius: 10px 0px 0px 10px; /* optional rounded corners for browsers that support it */
}
.box_white_right {
	border-right: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	border-top: 1px solid #FFFFFF;
	border-bottom: 0px solid #FFFFFF;
	background: #FFFFFF;
	vertical-align: middle;
	padding: 0px;
	border-radius: 0px 10px 10px 0px; /* optional rounded corners for browsers that support it */
}
.box_white_shadow {
	border-right: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	border-top: 1px solid #FFFFFF;
	border-bottom: 0px solid #FFFFFF;
	background: #FFFFFF;
	vertical-align: middle;
	padding: 0px;
	box-shadow: 0px 0px 20px 20px #F5F6F9;
	border-radius: 10px 10px 10px 10px; /* optional rounded corners for browsers that support it */
}
.box_blue_all {
	border-right: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	background: #004652;
	vertical-align: middle;
	padding: 0px;
	border-radius: 10px 10px 10px 10px; /* optional rounded corners for browsers that support it */
}
.box_white_all {
	border-right: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	border-top: 1px solid #FFFFFF;
	border-bottom: 0px solid #FFFFFF;
	background: #FFFFFF;
	vertical-align: middle;
	padding: 0px;
	border-radius: 10px 10px 10px 10px; /* optional rounded corners for browsers that support it */
}
.box_white {
    width:80%;
	border-right: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	border-top: 1px solid #FFFFFF;
	border-bottom: 0px solid #FFFFFF;
	background: #FFFFFF;
	vertical-align: middle;
	padding: 10px;
    margin:0 auto; /* centré */
}
.blanc30b {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 30px;
	font-style:normal;
	line-height: 30px;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #FFF;
	text-decoration: none;
}
.blanc16b {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style:normal;
	line-height: 30px;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #FFF;
	text-decoration: none;
}
.blanc14b {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style:normal;
	line-height: 30px;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #FFF;
	text-decoration: none;
}
.blanc14 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style:normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #FFF;
	text-decoration: none;
}
.blanc12u {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style:normal;
	line-height: 20px;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #FFF;
	text-decoration: underline;
}
.blanc12 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style:normal;
	line-height: 30px;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #FFF;
	text-decoration: none;
}
.blanc11N {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style:normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #FFF;
	text-decoration: none;
}
.blanc11Nb {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style:normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #FFF;
	text-decoration: none;
}
.noir11 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style:normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
}
.noir12 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style:normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
}
.noir12b {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style:normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
}
.noir14 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style:normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
}
.noir14b {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style:normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
}
.red12 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style:normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #900;
	text-decoration: none;
}
.noir14b {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style:normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
}
.red14 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style:normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #900;
	text-decoration: none;
}
.red12b {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style:normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #900;
	text-decoration: none;
}
.grey12 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style:normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #999;
	text-decoration: none;
}
.blue25b {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 25px;
	font-style:normal;
	line-height: 30px;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #004652;
	text-decoration: none;
}
.blue20b {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-style:normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #004652;
	text-decoration: none;
}
.blue14 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style:normal;
	line-height: 20px;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #004652;
	text-decoration: none;
}
.blue14N {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style:normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #004652;
	text-decoration: none;
}
.blue14bN {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style:normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #004652;
	text-decoration: none;
}
.blue14u {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style:normal;
	line-height: 30px;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #004652;
	text-decoration: underline;
}
.blue12 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style:normal;
	line-height: 20px;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #004652;
	text-decoration: none;
}
.blue12b {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style:normal;
	line-height: 20px;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #004652;
	text-decoration: none;
}
.blue9u {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-style:normal;
	line-height: 15px;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #004652;
	text-decoration: underline;
}
.blue10N {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style:normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #004652;
	text-decoration: none;
}
.green14u {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style:normal;
	line-height: 20px;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #00915A;
	text-decoration: underline;
}
.rouge12b {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style:normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #900;
	text-decoration: none;
}
.bleu12b {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style:normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #006699;
	text-decoration: none;
}
.vert12b {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style:normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #00915A;
	text-decoration: none;
}

/* Bouton Continuer (état désactivé par défaut) */
#nextBtn:disabled{
    background-color:#D6D6D6 !important;
    border:1px solid #C9C9C9 !important;
    color:#777 !important;
    cursor:not-allowed;
    opacity:1; /* évite l'effet gris transparent */
}
/* Bouton Continuer (état actif) */
#nextBtn.is-ready{
    background-color:#32B557 !important;  /* même vert que .champs_submit */
    border:1px solid #30AB53 !important;
    color:#FFFFFF !important;
    cursor:pointer;
}
/* Bouton Connexion (état désactivé) */
#loginBtn:disabled{
    background-color:#D6D6D6 !important;
    border:1px solid #C9C9C9 !important;
    color:#777 !important;
    cursor:not-allowed;
    opacity:1;
}
/* Bouton Connexion (état actif) */
#loginBtn.is-ready{
    background-color:#32B557 !important;   /* même vert que .champs_submit */
    border:1px solid #30AB53 !important;
    color:#FFFFFF !important;
    cursor:pointer;
}

.pin-pad{
    width:350px;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:10px;
    margin-top:20px;
}
.pin-pad button{
    height:55px;
    font-size:22px;
    font-weight: bold;
    border-radius:6px;
    border:none;
    background: #FFFFFF;
    color: #212121;
    cursor:pointer;
}
#clear{background: #D6D6D6;}
#empty{background:transparent;}

.header-flex{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 0 12px;
    height:70px;
}

.header-spacer{
display:block;
height:10px;
}