/****************************************************
 * BCVS – CREDIT SIMULATOR
 * Premium Banking UI – Ultimate Version
 * Responsive • Accessible • Dark Mode • Performant
 ****************************************************/

/* ==================================================
   VARIABLES GLOBALES & THÈMES
================================================== */
:root {
    --primary: #7a0c0c;
    --primary-dark: #5e0909;
    --secondary: #1f2937;
    --muted: #6b7280;

    --bg-main: #f6f7f9;
    --bg-card: #ffffff;

    --border-soft: #e5e7eb;

    --radius-lg: 22px;
    --radius-md: 14px;

    --shadow-soft: 0 14px 34px rgba(0,0,0,.07);

    --transition: 0.25s ease;
}

/* -------- DARK MODE AUTO -------- */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-main: #0f1115;
        --bg-card: #161a22;
        --secondary: #e5e7eb;
        --muted: #9ca3af;
        --border-soft: #2a2f3a;
        --shadow-soft: 0 18px 40px rgba(0,0,0,.6);
    }
}

/* ==================================================
   SECTION PRINCIPALE
================================================== */
.credit-simulator-section {
    background: linear-gradient(180deg, var(--bg-main), transparent);
    padding: clamp(50px, 6vw, 90px) 0;
}

/* ==================================================
   CARTE GLOBALE
================================================== */
.credit-simulator-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: clamp(22px, 4vw, 42px);
}

/* ==================================================
   TITRES & TEXTE
================================================== */
.simu-title {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 700;
    color: var(--primary);
}

.simu-subtitle {
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    color: var(--muted);
    max-width: 560px;
}

/* ==================================================
   FORMULAIRES (ACCESSIBILITÉ)
================================================== */
.form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--secondary);
}

.form-control,
.form-select {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    padding: 12px;
    font-size: 0.95rem;
    background: transparent;
    color: var(--secondary);
    transition: var(--transition);
}

.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(122,12,12,.25);
}

/* ==================================================
   SLIDERS PREMIUM
================================================== */
.form-range {
    height: 6px;
}

.form-range::-webkit-slider-runnable-track {
    height: 6px;
    background: #d1d5db;
    border-radius: 999px;
}

.form-range::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    background: var(--primary);
    border-radius: 50%;
    margin-top: -7px;
    cursor: pointer;
    transition: transform var(--transition);
}

.form-range::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

/* ==================================================
   INFORMATIONS & ERREURS
================================================== */
.simu-rate-info {
    font-size: 0.75rem;
    color: var(--muted);
}

.simu-error {
    font-size: 0.85rem;
    border-radius: var(--radius-md);
}

/* ==================================================
   CARTE RÉSULTATS
================================================== */
.simu-result-card {
    background: linear-gradient(180deg, var(--bg-card), transparent);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft);
    padding: 28px;
    display: flex;
    flex-direction: column;
}

.simu-result-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.simu-result-subtitle {
    font-size: 0.85rem;
    color: var(--muted);
}

/* ==================================================
   MONTANT MENSUEL
================================================== */
.simu-result-main {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border-radius: var(--radius-md);
    padding: 20px;
    margin: 14px 0;
    transition: var(--transition);
}

.simu-result-amount {
    font-size: clamp(1.4rem, 4vw, 1.9rem);
    font-weight: 700;
}

/* ==================================================
   DÉTAILS
================================================== */
.simu-result-details {
    font-size: 0.9rem;
    color: var(--secondary);
}

.simu-result-details div {
    padding: 6px 0;
    border-bottom: 1px dashed var(--border-soft);
}

.simu-result-details div:last-child {
    border-bottom: none;
}

/* ==================================================
   BARRE CAPITAL / INTÉRÊTS
================================================== */
.simu-bar-bg {
    height: 10px;
    background: var(--border-soft);
    border-radius: 999px;
    overflow: hidden;
}

.simu-bar-capital {
    height: 100%;
    background: var(--primary);
    transition: width .6s ease;
}

.simu-bar-interest {
    height: 100%;
    background: #9ca3af;
    transition: width .6s ease;
}

/* ==================================================
   BOUTON CTA PREMIUM
================================================== */
.simu-cta-btn {
    margin-top: auto;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 14px;
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition);
}

.simu-cta-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

/* ==================================================
   SKELETON LOADING
================================================== */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--border-soft) 25%,
        rgba(255,255,255,.35) 37%,
        var(--border-soft) 63%
    );
    background-size: 400% 100%;
    animation: skeleton 1.4s ease infinite;
    border-radius: 6px;
}

@keyframes skeleton {
    0% { background-position: 100% 0 }
    100% { background-position: 0 0 }
}

/* ==================================================
   RESPONSIVE – TABLETTE
================================================== */
@media (max-width: 992px) {
    .credit-simulator-card {
        padding: 28px;
    }
}

/* ==================================================
   RESPONSIVE – MOBILE FIRST
================================================== */
@media (max-width: 360px) {
    .simu-result-amount {
        font-size: 1.25rem;
    }

    .form-control,
    .form-select {
        padding: 10px;
        font-size: 0.9rem;
    }
}
/* FIX: centrage vertical du texte dans les SELECT + INPUTS */
#projectType,
#currency,
#rateInput,
#amountInput,
#durationInput {
  height: 52px;              /* même hauteur partout */
  line-height: 52px;         /* centre verticalement */
  padding: 0 14px;           /* padding horizontal */
  box-sizing: border-box;
}

/* Les <select> ne respectent pas toujours line-height, on force */
#projectType,
#currency {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 52px;
}

/* Si tu utilises input-group (ex: %), on aligne aussi le suffixe */
.input-group-text {
  height: 52px;
  display: flex;
  align-items: center;
}