/** ************
simulateur
*************** */

.investment-simulator {
    display: flex;
    flex-direction: row; /* Colonne horizontale par défaut */
    justify-content: space-between;
    gap: 20px;
    background: var(--bg);
    padding: 40px 40px;
    border-radius: 30px;
}

.investment-simulator-form, .investment-simulator-results {
    flex: 1;
    display: flex;
    flex-direction: column; /* Permet de contrôler l'agencement interne */
    justify-content: space-between; /* Espacement pour ajuster le contenu */
    padding: 20px;
    border-radius: 30px;
}

/* Formulaire (colonne gauche) */
.investment-simulator-form {
    background: var(--bleu);
	background: radial-gradient(circle at 30% 30%, var(--bleu) 50%, var(--bleu-fonce) 100%);

    color: var(--bg) !important;
}

.investment-simulator-form h3,
.investment-simulator-form p {
    color: var(--bg) !important;
}

/* Résultats (colonne droite) */
.investment-simulator-results {
    background: var(--jaune);
	background: radial-gradient(circle at 30% 30%, var(--jaune) 50%, var(--jaune-fonce) 100%);

    color: var(--noir)!important;
    text-align: left;
}


.investment-simulator-results button {
    font-size: 20px;
    color: var(--bg) !important;
    padding: 15px 25px;
    margin-top: auto; /* Positionne le bouton en bas de la colonne */
	border-radius: 50px;
	transition: all .5s ease;
}

/* Général */
.form-group {
    margin-bottom: 20px;
}

.investment-simulator-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
}

.investment-simulator-form input[type="text"] {
    width: 100%;
    padding: 10px 10px 0px 10px;
    border: 0;
    background-color: transparent;
    color: var(--bg);
    font-weight: bold;
    font-size: 18px;
    border-radius: 0;
	border-bottom: 1px solid var(--bg);
}

.investment-simulator-form input[type="text"]:focus {
    background-color: var(--bleu);
}

/* Jauges */
.investment-simulator-form .noUi-target,
.investment-simulator-form .noUi-connects {
    border-radius: 5px;
    border-width: 0px !important;
    border: none;
}

.investment-simulator-form .noUi-connects .noUi-connect {
    border: 0px;
    background-color: var(--jaune);
}

/* Résultats */
.results p {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0px;
}

.results .cashflow {
    display: block;
}

.results .nbcashflow,
.results .rdt {
    font-size: 3em;
    display: block;
    margin: 0 auto;
	line-height: 1;
	font-weight:bold;
}

.investment-simulator-results .results strong,
.investment-simulator-results .results p {
    font-size: 24px;
    margin: 25px auto;
}

.investment-simulator-results .results p {
    font-size: 20px;
}

/* Titres */
.results h3,
.investment-simulator-form h3,
.investment-simulator-results h3 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    /* text-align: left; */
}
.investment-simulator-results h3 { color:var(--noir)!important;}
/** Responsive design */
/* Ajustements pour d'autres tailles d'écran */
@media (max-width:1140px) { .results .nbcashflow, .results .rdt {font-size: 2.5em;}}
@media (max-width:900px) {.investment-simulator {padding-bottom: 100px;}}
@media (max-width: 768px) {
    .results p {
        font-size: 1rem;
    }

    .results .nbcashflow, .results .rdt {
        font-size: 2em;
    }

    .investment-simulator-results button {
        font-size: 18px;
        padding: 10px 20px;
    }
}
/* Écrans inférieurs à 640px */
@media (max-width: 640px) {
    .investment-simulator {
        flex-direction: column; /* Passe en colonne */
    }

    .investment-simulator-form,
    .investment-simulator-results, .investment-simulator-results .results {
        width: 100%; /* Chaque colonne prend 100% de largeur */
		display:block;
    }
	.results .cashflow {
		display: inline-block; /* Rend le texte "Cashflow" inline pour s'aligner avec la valeur */
		font-size: 16px;
		font-weight: bold;
	}

	.results .nbcashflow {
		display: inline-block; /* Même chose pour la valeur */
		font-size: 2em;
		font-weight: bold;
		margin-left: 0px; /* Ajoute un espacement entre "Cashflow" et la valeur */
	}

	.results p {
		 display: grid; /* Utilise CSS Grid */
        grid-template-columns: 50% 50%; /* Deux colonnes égales */
        /* justify-items: center; / * Centre horizontalement chaque cellule * / */
        align-items: center; /* Centre verticalement chaque cellule */
        margin: 5px auto !important;
        text-align: center; /* Alignement du texte */
		}
	.investment-simulator-results .results strong {font-size: 16px;}
.investment-simulator-results .results { flex-direction: column;}
.results p strong, .results p .cashflow {display: inline-block; width: 100%;text-align:right; padding-right:15px;}
.results p .rdt, .results p .nbcashflow {text-align:left;}

}
@media (max-width: 450px) {
	.results p {grid-template-columns: 100%; /* Deux colonnes égales */}
	.results p .rdt, .results p .nbcashflow , .results p strong, .results p .cashflow {display: block; width: 100%;text-align:center; padding:0px;}
	.results p .rdt, .results p .nbcashflow  {margin-top: 0;}
	.results p strong, .results p .cashflow {margin-bottom:0!important;}
	.results .nbcashflow {font-size: 30px;}
	.investment-simulator-results button {margin: 25px auto 25px auto;}
}

@media (min-width:1140px) {
	.investment-simulator-form {
    flex: 0 0 60%; /* 60% de largeur */
}

.investment-simulator-results {
    flex: 0 0 40%; /* 40% de largeur */
}

.fl-node-ni56w7mkac9x > .fl-module-content {
  margin-top: 20px!important;
  margin-bottom: 20px!important;
}
.fl-row-bg-photo.fl-node-ais4hu980mnp > .fl-row-content-wrap {padding-bottom:40px!important;}


}


.precision-sim {color: var(--noir);}
/* @media (min-width: 900px) { */
    .investment-simulator {
        position: relative; /* Permet de positionner .precision-sim en absolu par rapport à ce bloc */
    }

    .precision-sim {
        position: absolute;
        bottom: 20px; /* Distance du bas */
        left: 40px; /* Distance de la gauche */
        font-size: 14px; /* Taille de texte adaptée */
        color: rgba(0, 0, 0, 0.7)!important; /* Légère transparence pour indiquer un avertissement */
        max-width: 80%; /* Empêche un trop grand débordement */
    }
/* } */