/* website/static/website/css/simulation.css */

.vefa-sim-page-container {
    --sim-accent-primary: var(--btn-bg-hover, #ff4000);
    --sim-accent-primary-hover: color-mix(in srgb, var(--btn-bg-hover, #ff4000) 85%, black 15%);
    --sim-accent-secondary: var(--btn-bg-color, #3498db);
    --sim-slider-track-primary: color-mix(in srgb, var(--sim-accent-primary) 18%, transparent);
    --sim-slider-track-secondary: color-mix(in srgb, var(--sim-accent-secondary) 18%, transparent);
    --sim-accent-primary-soft: color-mix(in srgb, var(--sim-accent-primary) 12%, #ffffff 88%);
    --sim-accent-secondary-soft: color-mix(in srgb, var(--sim-accent-secondary) 12%, #ffffff 88%);
    --sim-card-bg: #ffffff;
    --sim-border-color: #eef0f6;
    --sim-text-color: #1f2430;
    --sim-muted-color: #7a8499;
    --sim-shadow-soft: 0 24px 60px rgba(31, 36, 48, 0.08);
    --sim-shadow-card: 0 30px 70px rgba(31, 36, 48, 0.09);
    --sim-border-radius-lg: 28px;
    --sim-border-radius-md: 18px;
    --sim-border-radius-sm: 12px;
    --sim-font-heading: var(--font-heading, var(--font-primary, 'Poppins', sans-serif));
}

.vefa-sim-page-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 3rem;
}

.vefa-sim-form {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.vefa-sim-main-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: 3rem;
    align-items: flex-start;
}

.vefa-sim-inputs-panel {
    background: var(--sim-card-bg);
    border-radius: var(--sim-border-radius-lg);
    padding: 2.75rem 3rem;
    box-shadow: var(--sim-shadow-card);
}

.vefa-sim-summary-panel {
    display: flex;
    align-items: stretch;
}

.vefa-sim-summary-card {
    background: var(--sim-card-bg);
    border-radius: var(--sim-border-radius-lg);
    padding: 2.75rem 2.5rem;
    box-shadow: var(--sim-shadow-card);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
    overflow: hidden;
}

.vefa-sim-summary-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 110% -10%, color-mix(in srgb, var(--sim-accent-primary) 35%, transparent) 0%, transparent 60%),
        radial-gradient(circle at -10% 130%, color-mix(in srgb, var(--sim-accent-secondary) 28%, transparent) 0%, transparent 45%);
    opacity: 0.65;
}

.vefa-sim-summary-card > * {
    position: relative;
    z-index: 1;
}

.vefa-sim-header {
    text-align: left;
    border-bottom: 1px solid var(--sim-border-color);
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

/* Variante "hero" : badge programme + titre plus généreux + pattern subtil */
.vefa-sim-header-hero {
    position: relative;
    overflow: hidden;
    padding: 1.75rem 1.75rem 1.5rem;
    margin: -1rem -1rem 2rem;
    border-radius: var(--sim-border-radius-md);
    border-bottom: none;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--sim-accent-primary) 8%, transparent 92%) 0%, transparent 55%),
        linear-gradient(135deg, color-mix(in srgb, var(--sim-accent-secondary) 5%, #ffffff 95%) 0%, #ffffff 100%);
}
.vefa-sim-header-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(color-mix(in srgb, var(--sim-accent-primary) 14%, transparent) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: 0.5;
    mask-image: radial-gradient(ellipse 70% 60% at 100% 0%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 100% 0%, #000 0%, transparent 75%);
    pointer-events: none;
}
.vefa-sim-header-hero > * {
    position: relative;
    z-index: 1;
}
.vefa-sim-header-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    margin-bottom: 0.9rem;
    background: #ffffff;
    border: 1px solid var(--sim-border-color);
    border-radius: 999px;
    color: var(--sim-text-color);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(31, 36, 48, 0.04);
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.vefa-sim-header-pill i {
    color: var(--sim-accent-primary);
    font-size: 0.9rem;
}
.vefa-sim-header-pill:hover {
    border-color: var(--sim-accent-primary);
    color: var(--sim-text-color);
    transform: translateY(-1px);
}

.vefa-sim-title {
    font-family: var(--sim-font-heading);
    font-size: clamp(2rem, 3vw, 2.8rem);
    color: var(--sim-text-color);
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin: 0 0 0.5rem;
}

.vefa-sim-subtitle {
    font-size: 1rem;
    color: var(--sim-muted-color);
    margin: 0;
}

.vefa-sim-subtitle a {
    color: var(--sim-accent-secondary);
    text-decoration: none;
    font-weight: 600;
}

.vefa-sim-subtitle a:hover {
    color: var(--sim-accent-primary);
}

.vefa-sim-form-body {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.vefa-sim-identification-block,
.vefa-sim-extra-fields {
    background: var(--sim-accent-secondary-soft, #eef5ff);
    border-radius: var(--sim-border-radius-md);
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--sim-border-color);
}

.vefa-sim-field-label,
.vefa-sim-slider-label {
    display: block;
    font-weight: 1200;
    color: var(--sim-text-color);
    font-family: var(--sim-font-heading);
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.vefa-sim-required {
    color: var(--sim-accent-primary);
    margin-left: 0.3rem;
}

.vefa-sim-form input[type="text"],
.vefa-sim-form input[type="number"],
.vefa-sim-form select,
.vefa-sim-form textarea,
.vefa-sim-form-input {
    width: 100%;
    border: 1px solid var(--sim-border-color);
    border-radius: var(--sim-border-radius-sm);
    padding: 0.85rem 1rem;
    font-size: 1rem;
    color: var(--sim-text-color);
    background-color: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: var(--font-primary, sans-serif);
}

.vefa-sim-form input[type="number"] {
    -moz-appearance: textfield;
}

.vefa-sim-form input[type="number"]::-webkit-inner-spin-button,
.vefa-sim-form input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.vefa-sim-form input[type="text"]:focus,
.vefa-sim-form input[type="number"]:focus,
.vefa-sim-form select:focus,
.vefa-sim-form textarea:focus,
.vefa-sim-form-input:focus {
    border-color: var(--sim-accent-primary);
    box-shadow: 0 0 0 0.15rem rgba(255, 64, 0, 0.18);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--sim-accent-primary) 35%, transparent);
    outline: none;
}

/* Polish : fondu discret du résultat à chaque calcul HTMX. */
@keyframes vefa-sim-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.vefa-sim-fade-in {
    animation: vefa-sim-fade-in 0.25s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .vefa-sim-fade-in { animation: none; }
}

.vefa-sim-help-text {
    display: block;
    margin-top: 1.15rem;
    font-size: 0.85rem;
    color: var(--sim-muted-color);
}

.vefa-sim-error-list {
    margin-top: 0.5rem;
}

.vefa-sim-error-item {
    display: block;
    color: #d93025;
    font-size: 0.85rem;
}

.vefa-sim-alert {
    padding: 1rem 1.2rem;
    border-radius: var(--sim-border-radius-sm);
    border: 1px solid transparent;
    font-size: 0.9rem;
}

.vefa-sim-alert-error {
    border-color: rgba(217, 48, 37, 0.25);
    background-color: rgba(217, 48, 37, 0.12);
    color: #7f1d1d;
}

.vefa-sim-sliders-stack {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.vefa-sim-slider-field {
    background: #ffffff;
    border-radius: var(--sim-border-radius-md);
    padding: 1.75rem 1.9rem;
    box-shadow: var(--sim-shadow-soft);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.vefa-sim-slider-primary {
    --slider-color: var(--sim-accent-primary);
    --slider-track-color: var(--sim-slider-track-primary);
}

.vefa-sim-slider-secondary {
    --slider-color: var(--sim-accent-secondary);
    --slider-track-color: var(--sim-slider-track-secondary);
}

.vefa-sim-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.vefa-sim-slider-value-wrapper {
    min-width: clamp(200px, 35%, 320px);
    max-width: 100%;
    flex: 1 0 clamp(200px, 35%, 320px);
    display: flex;
    justify-content: flex-end;
}

.vefa-sim-slider-value {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.vefa-sim-direct-input {
    width: 100%;
    max-width: clamp(200px, 35%, 320px);
    padding: 0.85rem 1.35rem;
    border-radius: 10px;
    border: 1px solid transparent;
    background: var(--sim-accent-primary-soft, #fff4ec);
    background: color-mix(in srgb, var(--slider-color, var(--sim-accent-primary)) 12%, #ffffff 88%);
    font-size: 1.75rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--slider-color, var(--sim-accent-primary));
    text-align: right;
    font-family: var(--sim-font-heading);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
}

.vefa-sim-direct-input:focus {
    border-color: var(--slider-color, var(--sim-accent-primary));
    box-shadow: 0 0 0 0.15rem rgba(255, 64, 0, 0.25);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--slider-color, var(--sim-accent-primary)) 35%, transparent);
    outline: none;
}

.vefa-sim-form .vefa-sim-field-label,
.vefa-sim-form .vefa-sim-slider-label {
    font-size: clamp(1.2rem, 1.8vw, 1.9rem);
    font-weight: 700;
    line-height: 1.25;
}

.vefa-sim-form input.vefa-sim-direct-input,
.vefa-sim-form input.vefa-sim-direct-input[type="text"],
.vefa-sim-form input.vefa-sim-direct-input[type="number"] {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.35;
}

.vefa-sim-slider {
    position: relative;
}

.vefa-sim-slider-field .noUi-target {
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--slider-color, var(--sim-accent-primary)) 10%, #f6f8fa 90%);
    border: none;
    box-shadow: none;
}

.vefa-sim-slider-field .noUi-pips {
    display: none;
    height: 0;
    margin: 0;
}

.vefa-sim-slider-field .noUi-connect {
    background: var(--slider-color, var(--sim-accent-primary));
    opacity: 0.9;
    border-radius: 999px;
}

.vefa-sim-slider-field .noUi-handle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 4px solid #ffffff;
    background: var(--slider-color, var(--sim-accent-primary));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--slider-color, var(--sim-accent-primary)) 35%, transparent 65%);
    cursor: grab;
    top: -7px;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.vefa-sim-slider-field .noUi-handle:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--slider-color, var(--sim-accent-primary)) 45%, transparent 55%);
}

.vefa-sim-slider-field .noUi-handle:active {
    cursor: grabbing;
    transform: scale(1.05);
}

.vefa-sim-slider-field .noUi-handle::before,
.vefa-sim-slider-field .noUi-handle::after {
    display: none;
}

.vefa-sim-slider-field .noUi-pips,
.vefa-sim-slider-field .noUi-value,
.vefa-sim-slider-field .noUi-marker {
    display: none !important;
    height: 0;
    margin: 0;
    padding: 0;
}

.vefa-sim-required-legend {
    text-align: right;
    font-size: 0.85rem;
    color: var(--sim-muted-color);
}

.vefa-sim-summary-intro {
    font-family: var(--sim-font-heading);
    font-size: 0.78rem;
    color: var(--sim-muted-color);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}

.vefa-sim-summary-highlight {
    font-family: var(--sim-font-heading);
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    color: var(--sim-accent-primary);
    background: linear-gradient(135deg, var(--sim-accent-primary) 0%, color-mix(in srgb, var(--sim-accent-primary) 75%, #6a1500 25%) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 0.15rem 0 0;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.vefa-sim-summary-highlight.is-pulsing {
    transform: scale(1.04);
}

.vefa-sim-summary-unit {
    font-size: 0.95rem;
    color: var(--sim-muted-color);
    font-weight: 600;
    -webkit-text-fill-color: var(--sim-muted-color);
    letter-spacing: 0;
}

.vefa-sim-summary-details {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    border-top: 1px solid var(--sim-border-color);
    padding-top: 1.5rem;
}

.vefa-sim-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

.vefa-sim-result-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sim-muted-color);
    white-space: nowrap;
}

.vefa-sim-result-value {
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    font-weight: 700;
    color: var(--sim-text-color);
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    white-space: nowrap; /* Empêche la coupure du montant et du signe € */
    overflow: visible;
}

.vefa-sim-result-unit {
    font-size: 0.85rem;
    color: var(--sim-muted-color);
    font-weight: 500;
}

.vefa-sim-result-label-light {
    font-weight: 400;
    white-space: nowrap;
}

.vefa-sim-result-subline {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.3rem;
    margin-left: 0.75rem;
    padding-left: 0.25rem;
    font-size: 0.85rem;
    color: var(--sim-muted-color);
}

.vefa-sim-result-subvalue {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-weight: 600;
    color: inherit;
}

.vefa-sim-hidden {
    display: none !important;
}

.vefa-sim-summary-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.vefa-sim-select {
    width: 100%;
    border: 1px solid var(--sim-border-color);
    border-radius: var(--sim-border-radius-sm);
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: var(--sim-text-color);
    background-color: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: var(--font-primary, sans-serif);
}

.vefa-sim-select:focus {
    border-color: var(--sim-accent-secondary);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--sim-accent-secondary) 35%, transparent);
    outline: none;
}

.vefa-sim-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.5rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    text-decoration: none;
}

.vefa-sim-btn-primary {
    background: linear-gradient(135deg, var(--sim-accent-primary), color-mix(in srgb, var(--sim-accent-primary) 75%, #ffffff 25%));
    color: #ffffff;
    box-shadow: 0 18px 30px color-mix(in srgb, var(--sim-accent-primary) 28%, transparent);
}

.vefa-sim-btn-primary:hover {
    background: linear-gradient(135deg, var(--sim-accent-primary-hover), color-mix(in srgb, var(--sim-accent-primary-hover) 70%, #ffffff 30%));
    transform: translateY(-2px);
    box-shadow: 0 20px 38px color-mix(in srgb, var(--sim-accent-primary-hover) 32%, transparent);
}

.vefa-sim-btn-secondary {
    background: #ffffff;
    color: var(--sim-text-color);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), inset 0 0 0 1px var(--sim-border-color);
}

.vefa-sim-btn-secondary:hover {
    background: color-mix(in srgb, #ffffff 92%, var(--sim-accent-secondary) 8%);
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.06);
}

.vefa-sim-btn-danger {
    background: linear-gradient(135deg, #c53030, color-mix(in srgb, #c53030 75%, #ffffff 25%));
    color: #ffffff;
    box-shadow: 0 18px 30px color-mix(in srgb, #c53030 28%, transparent);
}

.vefa-sim-btn-danger:hover {
    background: linear-gradient(135deg, #9b2c2c, color-mix(in srgb, #9b2c2c 70%, #ffffff 30%));
    transform: translateY(-2px);
    box-shadow: 0 20px 38px color-mix(in srgb, #9b2c2c 32%, transparent);
}

.vefa-sim-summary-link {
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sim-muted-color);
    text-decoration: none;
}

.vefa-sim-summary-link:hover {
    color: var(--sim-accent-secondary);
}

.vefa-sim-loading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    color: var(--sim-muted-color);
}

.vefa-sim-loading i {
    color: var(--sim-accent-primary);
}

.vefa-sim-charts-section {
    background: var(--sim-card-bg);
    border-radius: var(--sim-border-radius-lg);
    padding: 2.5rem;
    box-shadow: var(--sim-shadow-card);
}

.vefa-sim-evolution-card {
    background: var(--sim-card-bg);
    border-radius: var(--sim-border-radius-lg);
    padding: 1.5rem 1.5rem 0;
    box-shadow: var(--sim-shadow-card);
    margin-bottom: 2rem;
}

.vefa-sim-evolution-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem; /* espace sous le bouton */
}

.vefa-sim-evolution-body {
    margin-top: 0;
}

.vefa-sim-evolution-table-wrapper {
    overflow-x: auto;
}

.vefa-sim-evolution-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
}

.vefa-sim-evolution-table thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    text-align: right;
    font-weight: 600;
    color: var(--sim-muted-color);
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--sim-border-color);
}

.vefa-sim-evolution-table tbody td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--sim-border-color);
    vertical-align: middle;
    text-align: right;
}

.vefa-sim-evolution-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--sim-accent-secondary) 3%, #ffffff 97%);
}

.vefa-num {
    white-space: nowrap;
}
.vefa-num-blue { color: var(--sim-accent-secondary); font-weight: 700; }
.vefa-num-orange { color: var(--sim-accent-primary); font-weight: 700; }

.vefa-sim-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.vefa-sim-chart-card {
    background: var(--sim-accent-secondary-soft, #eef5ff);
    border-radius: var(--sim-border-radius-md);
    padding: 1.75rem;
    border: 1px solid var(--sim-border-color);
}

.vefa-sim-chart-title {
    font-family: var(--sim-font-heading);
    font-size: 1.15rem;
    color: var(--sim-text-color);
    margin-bottom: 1.2rem;
}

.vefa-sim-chart-card canvas {
    width: 100%;
    height: auto;
    max-height: 360px;
}

/* Responsive adjustments */
@media (min-width: 1440px) {
    .vefa-sim-page-container {
        max-width: clamp(1280px, 90vw, 1600px);
    }
    .vefa-sim-main-layout {
        grid-template-columns: 1.6fr 1fr;
        gap: 3.5rem;
    }
    .vefa-sim-summary-card {
        position: sticky;
        top: 24px;
    }
}

@media (min-width: 1800px) {
    .vefa-sim-page-container {
        max-width: clamp(1600px, 88vw, 1800px);
    }
    .vefa-sim-main-layout {
        grid-template-columns: 1.8fr 1fr;
        gap: 4rem;
    }
}
@media (max-width: 1100px) {
    .vefa-sim-main-layout {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
        gap: 2.5rem;
    }

    .vefa-sim-summary-highlight {
        font-size: clamp(2.6rem, 4.5vw, 3.4rem);
    }
}

@media (max-width: 992px) {
    .vefa-sim-page-container {
        padding: 2rem 1.25rem 2.5rem;
    }

    .vefa-sim-main-layout {
        grid-template-columns: 1fr;
    }

    .vefa-sim-summary-panel {
        order: initial;
        /* Le panneau résultats reste visible quand on scrolle les sliders */
        position: sticky;
        top: 0.75rem;
        z-index: 5;
        align-self: flex-start;
    }

    .vefa-sim-summary-card {
        max-width: 100%;
        margin: 0 0 1.5rem;
        /* Compact mobile : moins de padding pour ne pas voler trop d'espace écran */
        padding: 1.5rem 1.5rem 1.25rem;
        box-shadow: var(--sim-shadow-card);
        backdrop-filter: blur(8px);
        background: color-mix(in srgb, var(--sim-card-bg) 96%, transparent 4%);
    }

    /* Sur mobile, la zone "détails" sous la mensualité prend moins de place */
    .vefa-sim-summary-details {
        gap: 0.6rem;
        padding-top: 1rem;
    }

    /* Boutons d'actions secondaires : compacts par défaut */
    .vefa-sim-summary-actions {
        gap: 0.5rem;
    }
}
/* Mobile-only utility */
.vefa-sim-mobile-only { display: none; }
@media (max-width: 768px) {
    .vefa-sim-mobile-only { display: block; }
}

@media (max-width: 768px) {
    .vefa-sim-inputs-panel {
        padding: 2rem 1.75rem;
    }

    .vefa-sim-slider-field {
        padding: 1.5rem 1.4rem;
    }

    .vefa-sim-slider-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .vefa-sim-slider-value-wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: 1 1 auto;
        justify-content: flex-start;
    }

    .vefa-sim-direct-input {
        max-width: 100%;
        text-align: left;
        padding: 0.85rem 1.1rem;
    }

    .vefa-sim-result-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .vefa-sim-result-value {
        font-size: 1rem;
    }

    .vefa-sim-charts-section {
        padding: 2rem 1.75rem;
    }

    .vefa-sim-summary-card .vefa-sim-btn,
    .vefa-sim-summary-card .vefa-sim-select {
        width: 100%;
    }

    .vefa-sim-chart-card canvas {
        max-height: 260px;
    }

    .vefa-sim-slider-field .noUi-target {
        height: 8px;
    }
    .vefa-sim-slider-field .noUi-handle {
        width: 18px;
        height: 18px;
        top: -6px;
        border-width: 3px;
    }
}

@media (max-width: 640px) {
    .vefa-sim-page-container {
        padding: 1.75rem 1rem 2rem;
    }

    .vefa-sim-charts-grid {
        grid-template-columns: 1fr;
    }

    .vefa-sim-slider-field .noUi-pips {
        display: none;
    }
}

@media (max-width: 480px) {
    .vefa-sim-inputs-panel {
        padding: 1.5rem 1.25rem;
    }

    .vefa-sim-summary-card {
        padding: 1.75rem 1.5rem;
    }

    .vefa-sim-summary-highlight {
        font-size: clamp(2.2rem, 9vw, 2.8rem);
    }

    .vefa-sim-slider-field {
        padding: 1.25rem 1rem;
    }

    .vefa-sim-chart-card canvas {
        max-height: 220px;
    }
}

/* Respecte les préférences utilisateur de réduction d'animation */
@media (prefers-reduced-motion: reduce) {
    .vefa-sim-btn,
    .vefa-sim-btn:hover {
        transition: none !important;
    }
}

/* --- Bloc "Affiner avec ma situation" (apport + revenus) --- */
.vefa-sim-extra-fields[open] {
    padding: 1.25rem 1.5rem 1.5rem;
}
.vefa-sim-extra-fields-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--sim-text-color);
    padding: 0.25rem 0;
}
.vefa-sim-extra-fields-summary > i:first-child {
    color: var(--sim-accent-primary);
    font-size: 1.1rem;
    padding-top: 0.15rem;
    flex-shrink: 0;
}
.vefa-sim-extra-fields-summary-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.vefa-sim-extra-fields-title {
    font-weight: 700;
    font-size: 1.05rem;
}
.vefa-sim-extra-fields-hint {
    font-size: 0.85rem;
    color: var(--sim-muted-color);
    font-weight: 500;
    line-height: 1.4;
}
.vefa-sim-extra-fields-summary::-webkit-details-marker { display: none; }
.vefa-sim-extra-fields-summary::after {
    content: '\002B';
    margin-left: auto;
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--sim-accent-primary);
}
.vefa-sim-extra-fields[open] .vefa-sim-extra-fields-summary::after {
    content: '\2212';
}
.vefa-sim-extra-fields-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
}
.vefa-sim-extra-field .vefa-sim-form-input {
    width: 100%;
    border: 1px solid var(--sim-border-color);
    border-radius: var(--sim-border-radius-sm);
    padding: 0.85rem 1rem;
    font-size: 1rem;
    background-color: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.vefa-sim-extra-field .vefa-sim-form-input:focus {
    border-color: var(--sim-accent-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--sim-accent-primary-rgb, 0, 102, 204), 0.15);
}
@media (max-width: 768px) {
    .vefa-sim-extra-fields-body {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* --- Badge "Taux d'endettement" dans le panneau résultats --- */
.vefa-sim-debt-ratio {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border-radius: var(--sim-border-radius-sm);
    border-left: 4px solid #6c757d;
    background: #f6f8fa;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.vefa-sim-debt-ratio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--sim-text-color-muted, #555);
}
.vefa-sim-debt-ratio-value {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.vefa-sim-debt-ratio-value > span:first-child {
    font-weight: 800;
    font-size: 1.8rem;
    color: inherit;
}
.vefa-sim-debt-ratio-hint {
    font-size: 0.85rem;
    color: var(--sim-text-color-muted, #6c757d);
}
.vefa-sim-debt-ratio-ok {
    background: #e8f5ec;
    border-left-color: #198754;
    color: #146c43;
}
.vefa-sim-debt-ratio-warning {
    background: #fff5e1;
    border-left-color: #fd7e14;
    color: #b15c0a;
}
.vefa-sim-debt-ratio-danger {
    background: #fdecec;
    border-left-color: #dc3545;
    color: #a01724;
}

/* --- Bandeau mode invité (utilisateur non connecté) --- */
.vefa-sim-anon-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: linear-gradient(90deg, #eef5ff 0%, #f5f8ff 100%);
    border: 1px solid #c7dafd;
    border-left: 4px solid var(--sim-accent-primary, #0d6efd);
    border-radius: var(--sim-border-radius-sm);
    padding: 1rem 1.15rem;
    margin: 1rem 0 1.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
}
.vefa-sim-anon-banner-icon {
    color: var(--sim-accent-primary, #0d6efd);
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1;
    padding-top: 0.1rem;
}
.vefa-sim-anon-banner-text strong {
    color: var(--sim-text-color, #1f2937);
}
.vefa-sim-anon-banner-text a {
    color: var(--sim-accent-primary, #0d6efd);
    font-weight: 600;
    text-decoration: underline;
}
.vefa-sim-anon-banner-text a:hover {
    color: #0a58ca;
}

/* =================================================================
 * DESIGN SYSTEM — Composants génériques partagés
 * (utilisés par simulation_detail.html, simulation_list.html
 *  et toute future page de la feature simulation)
 * Pré-requis : doit être à l'intérieur d'un wrapper
 *              `.vefa-sim-page-container` pour hériter des tokens.
 * ================================================================= */

/* --- Tokens couleur statut (badges, bannières, alertes) --- */
.vefa-sim-page-container {
    --sim-status-ok-bg:        #e8f5ec;
    --sim-status-ok-border:    #198754;
    --sim-status-ok-text:      #146c43;
    --sim-status-warning-bg:   #fff5e1;
    --sim-status-warning-border: #fd7e14;
    --sim-status-warning-text: #b15c0a;
    --sim-status-danger-bg:    #fdecec;
    --sim-status-danger-border: #dc3545;
    --sim-status-danger-text:  #a01724;
    --sim-status-info-bg:      var(--sim-accent-secondary-soft, #eef5ff);
    --sim-status-info-border:  var(--sim-accent-secondary, #3498db);
    --sim-status-info-text:    #1e3a8a;
}

/* --- Cartes génériques --- */
.vefa-sim-card {
    background: var(--sim-card-bg);
    border-radius: var(--sim-border-radius-md);
    box-shadow: var(--sim-shadow-soft);
    overflow: hidden;
    border: 1px solid var(--sim-border-color);
}
.vefa-sim-card-header {
    padding: 1.1rem 1.5rem;
    background: color-mix(in srgb, var(--sim-border-color) 35%, #ffffff 65%);
    border-bottom: 1px solid var(--sim-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    color: var(--sim-text-color);
    font-family: var(--sim-font-heading);
}
.vefa-sim-card-header h2,
.vefa-sim-card-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}
.vefa-sim-card-header .vefa-sim-card-meta {
    color: var(--sim-muted-color);
    font-size: 0.9rem;
}
.vefa-sim-card-body {
    padding: 1.75rem;
}
.vefa-sim-card-footer {
    padding: 1rem 1.5rem;
    background: color-mix(in srgb, var(--sim-border-color) 25%, #ffffff 75%);
    border-top: 1px solid var(--sim-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.vefa-sim-card-compact .vefa-sim-card-body {
    padding: 1.25rem 1.5rem;
}

/* Grille de cartes pour la liste */
.vefa-sim-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 992px) {
    .vefa-sim-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* --- Boutons complémentaires (étend vefa-sim-btn existant) --- */
.vefa-sim-btn-success {
    background: linear-gradient(135deg, #198754 0%, #146c43 100%);
    color: #ffffff;
    border: none;
}
.vefa-sim-btn-success:hover {
    background: linear-gradient(135deg, #146c43 0%, #0f5132 100%);
    color: #ffffff;
}
.vefa-sim-btn-danger {
    background: #ffffff;
    color: #a01724;
    border: 1px solid #f1aeb5;
}
.vefa-sim-btn-danger:hover {
    background: #fdecec;
    color: #842029;
    border-color: #ea868f;
}
.vefa-sim-btn-outline {
    background: transparent;
    border: 1px solid var(--sim-border-color);
    color: var(--sim-text-color);
}
.vefa-sim-btn-outline:hover {
    background: color-mix(in srgb, var(--sim-accent-primary) 8%, #ffffff 92%);
    border-color: var(--sim-accent-primary);
    color: var(--sim-accent-primary);
}
.vefa-sim-btn-sm {
    padding: 0.45rem 0.95rem;
    font-size: 0.9rem;
}

/* --- Badges colorés génériques (alias des debt-ratio existants) --- */
.vefa-sim-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--sim-border-radius-sm);
    font-weight: 600;
    border-left: 4px solid #6c757d;
    background: #f6f8fa;
    color: var(--sim-text-color);
    font-size: 0.95rem;
    line-height: 1.3;
}
.vefa-sim-badge-block {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.9rem 1rem;
    border-radius: var(--sim-border-radius-sm);
    border-left: 4px solid #6c757d;
    background: #f6f8fa;
}
.vefa-sim-badge-ok,
.vefa-sim-debt-ratio-ok {
    background: var(--sim-status-ok-bg);
    border-left-color: var(--sim-status-ok-border);
    color: var(--sim-status-ok-text);
}
.vefa-sim-badge-warning,
.vefa-sim-debt-ratio-warning {
    background: var(--sim-status-warning-bg);
    border-left-color: var(--sim-status-warning-border);
    color: var(--sim-status-warning-text);
}
.vefa-sim-badge-danger,
.vefa-sim-debt-ratio-danger {
    background: var(--sim-status-danger-bg);
    border-left-color: var(--sim-status-danger-border);
    color: var(--sim-status-danger-text);
}
.vefa-sim-badge-info {
    background: var(--sim-status-info-bg);
    border-left-color: var(--sim-status-info-border);
    color: var(--sim-status-info-text);
}

/* --- Bannières génériques (généralisation du anon-banner) --- */
.vefa-sim-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: var(--sim-border-radius-sm);
    padding: 1rem 1.15rem;
    margin: 1rem 0 1.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
}
.vefa-sim-banner-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1;
    padding-top: 0.1rem;
}
.vefa-sim-banner-body {
    flex: 1;
}
.vefa-sim-banner-body strong {
    color: inherit;
}
.vefa-sim-banner-body a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}
.vefa-sim-banner-action {
    flex-shrink: 0;
}
.vefa-sim-banner-info {
    background: linear-gradient(90deg, var(--sim-accent-secondary-soft) 0%, color-mix(in srgb, var(--sim-accent-secondary) 5%, #ffffff 95%) 100%);
    border-color: color-mix(in srgb, var(--sim-accent-secondary) 30%, transparent 70%);
    border-left-color: var(--sim-accent-secondary);
    color: var(--sim-text-color);
}
.vefa-sim-banner-info .vefa-sim-banner-icon { color: var(--sim-accent-secondary); }
.vefa-sim-banner-success {
    background: linear-gradient(90deg, var(--sim-status-ok-bg) 0%, color-mix(in srgb, var(--sim-status-ok-border) 5%, #ffffff 95%) 100%);
    border-color: color-mix(in srgb, var(--sim-status-ok-border) 30%, transparent 70%);
    border-left-color: var(--sim-status-ok-border);
    color: var(--sim-status-ok-text);
}
.vefa-sim-banner-success .vefa-sim-banner-icon { color: var(--sim-status-ok-border); }
.vefa-sim-banner-warning {
    background: linear-gradient(90deg, var(--sim-status-warning-bg) 0%, #ffffff 100%);
    border-color: color-mix(in srgb, var(--sim-status-warning-border) 30%, transparent 70%);
    border-left-color: var(--sim-status-warning-border);
    color: var(--sim-status-warning-text);
}
@media (max-width: 640px) {
    .vefa-sim-banner {
        flex-direction: column;
        align-items: stretch;
    }
    .vefa-sim-banner-action {
        align-self: flex-start;
    }
}

/* --- Récap chiffré 2 colonnes (page détail) --- */
.vefa-sim-recap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
    margin-bottom: 1rem;
}
.vefa-sim-recap-grid > .vefa-sim-recap-col + .vefa-sim-recap-col {
    border-left: 1px solid var(--sim-border-color);
    padding-left: 2rem;
}
.vefa-sim-recap-col {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.vefa-sim-recap-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    color: var(--sim-text-color);
    font-size: 0.95rem;
}
.vefa-sim-recap-item .vefa-sim-recap-label {
    color: var(--sim-muted-color);
    font-weight: 500;
}
.vefa-sim-recap-item .vefa-sim-recap-value {
    font-weight: 700;
    text-align: right;
}
.vefa-sim-recap-highlight {
    background: var(--sim-accent-primary-soft);
    border-left: 4px solid var(--sim-accent-primary);
    border-radius: var(--sim-border-radius-sm);
    padding: 0.85rem 1.1rem;
    margin-top: 0.4rem;
}
.vefa-sim-recap-highlight .vefa-sim-recap-label {
    display: block;
    color: var(--sim-text-color);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.vefa-sim-recap-highlight .vefa-sim-recap-value {
    display: block;
    color: var(--sim-accent-primary);
    font-size: 1.6rem;
    font-weight: 800;
    font-family: var(--sim-font-heading);
    text-align: left;
}
/* Héros chiffré coloré par signe (cash-flow positif / effort d'épargne négatif).
   Même spécificité que la règle ci-dessus + source plus tardive → l'emporte
   sans !important (le projet charge un Bootstrap 3 où .text-* n'a pas !important). */
.vefa-sim-recap-highlight--positive .vefa-sim-recap-value {
    color: #198754;
}
.vefa-sim-recap-highlight--negative .vefa-sim-recap-value {
    color: #dc3545;
}
.vefa-sim-recap-subline {
    color: var(--sim-muted-color);
    font-size: 0.85rem;
    margin-top: 0.2rem;
}
@media (max-width: 768px) {
    .vefa-sim-recap-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .vefa-sim-recap-grid > .vefa-sim-recap-col + .vefa-sim-recap-col {
        border-left: none;
        border-top: 1px solid var(--sim-border-color);
        padding-left: 0;
        padding-top: 1rem;
    }
}

/* --- Titre de page (au-dessus des cartes) --- */
.vefa-sim-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.vefa-sim-page-header h1 {
    margin: 0;
    color: var(--sim-text-color);
    font-family: var(--sim-font-heading);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 800;
}

/* --- CTA "Que faire ensuite ?" sous le bouton sauvegarder --- */
.vefa-sim-next-steps {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--sim-border-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
.vefa-sim-next-steps-label {
    font-size: 0.82rem;
    color: var(--sim-muted-color);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.vefa-sim-next-steps-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sim-accent-secondary) 6%, #ffffff 94%);
    border: 1px solid color-mix(in srgb, var(--sim-accent-secondary) 25%, transparent 75%);
    color: var(--sim-text-color);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.vefa-sim-next-steps-link i {
    color: var(--sim-accent-secondary);
    font-size: 0.85rem;
}
.vefa-sim-next-steps-link:hover {
    background: color-mix(in srgb, var(--sim-accent-secondary) 12%, #ffffff 88%);
    border-color: var(--sim-accent-secondary);
    color: var(--sim-text-color);
    transform: translateY(-1px);
}

/* === Composant « slider + saisie » réutilisable (partials/simulators/range_field.html) ===
   Slider natif brandé via accent-color (zéro dépendance, accessible clavier via le champ
   numérique couplé). Variantes de couleur sur le token --range-color. */
.vefa-sim-range {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    --range-color: var(--sim-accent-primary);
}
.vefa-sim-range--secondary {
    --range-color: var(--sim-accent-secondary);
}
.vefa-sim-range__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.vefa-sim-range__label {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--sim-text-color);
}
.vefa-sim-range__output {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    flex-shrink: 0;
}
.vefa-sim-range__number {
    width: clamp(4.75rem, 26%, 8.5rem);
    padding: 0.4rem 0.65rem;
    text-align: right;
    border: 1px solid transparent;
    border-radius: 12px;
    font-family: var(--sim-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--range-color);
    background: color-mix(in srgb, var(--range-color) 9%, #ffffff 91%);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
/* Champs monétaires (prix, revenu, loyer) : plus large pour afficher 6-7 chiffres. */
.vefa-sim-range__number--wide {
    width: clamp(6.75rem, 42%, 12rem);
}
.vefa-sim-range__number:focus {
    outline: none;
    border-color: var(--range-color);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--range-color) 30%, transparent);
}
/* Masque les flèches natives du number input (rendu plus net). */
.vefa-sim-range__number::-webkit-outer-spin-button,
.vefa-sim-range__number::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.vefa-sim-range__number[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.vefa-sim-range__unit {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sim-muted-color);
}

/* --- Slider custom : track rempli en dégradé de marque (--range-fill piloté en JS),
   thumb blanc à anneau coloré, halo au focus/active. Épuré, cross-browser. --- */
.vefa-sim-range__slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 1.4rem;
    margin: 0;
    background: transparent;
    cursor: pointer;
}
.vefa-sim-range__slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        var(--range-color) 0%,
        var(--range-color) var(--range-fill, 0%),
        color-mix(in srgb, var(--range-color) 14%, #e9edf3 86%) var(--range-fill, 0%),
        color-mix(in srgb, var(--range-color) 14%, #e9edf3 86%) 100%
    );
}
.vefa-sim-range__slider::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--range-color) 14%, #e9edf3 86%);
}
.vefa-sim-range__slider::-moz-range-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--range-color);
}
.vefa-sim-range__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -7px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 2px var(--range-color),
                0 4px 12px color-mix(in srgb, var(--range-color) 45%, transparent);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.vefa-sim-range__slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 2px var(--range-color),
                0 4px 12px color-mix(in srgb, var(--range-color) 45%, transparent);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.vefa-sim-range__slider:hover::-webkit-slider-thumb { transform: scale(1.12); }
.vefa-sim-range__slider:hover::-moz-range-thumb { transform: scale(1.12); }
.vefa-sim-range__slider:focus-visible { outline: none; }
.vefa-sim-range__slider:focus-visible::-webkit-slider-thumb,
.vefa-sim-range__slider:active::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px var(--range-color),
                0 0 0 7px color-mix(in srgb, var(--range-color) 20%, transparent);
}
.vefa-sim-range__slider:focus-visible::-moz-range-thumb,
.vefa-sim-range__slider:active::-moz-range-thumb {
    box-shadow: 0 0 0 3px var(--range-color),
                0 0 0 7px color-mix(in srgb, var(--range-color) 20%, transparent);
}
@media (prefers-reduced-motion: reduce) {
    .vefa-sim-range__slider::-webkit-slider-thumb,
    .vefa-sim-range__slider::-moz-range-thumb { transition: none; }
}

/* Repères min / max sous le slider — discrets. */
.vefa-sim-range__scale {
    display: flex;
    justify-content: space-between;
    margin-top: -0.1rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--sim-muted-color);
}

/* === Mini-calcul explicite du cash-flow (loyer net − mensualité = cash-flow) === */
.vefa-sim-calc {
    border: 1px solid var(--sim-border-color);
    border-radius: var(--sim-border-radius-sm);
    overflow: hidden;
}
.vefa-sim-calc__row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
}
.vefa-sim-calc__label {
    color: var(--sim-text-color);
    font-size: 0.92rem;
}
.vefa-sim-calc__label small {
    color: var(--sim-muted-color);
    font-weight: 400;
}
.vefa-sim-calc__val {
    font-weight: 600;
    white-space: nowrap;
    text-align: right;
}
/* Ligne déduite : montant en rouge discret (= une sortie). */
.vefa-sim-calc__row--minus .vefa-sim-calc__val {
    color: #c0392b;
}
/* Ligne résultat : trait séparateur + fond léger + chiffre fort. */
.vefa-sim-calc__row--total {
    border-top: 1px solid var(--sim-border-color);
    background: color-mix(in srgb, var(--sim-accent-primary) 5%, #ffffff 95%);
}
.vefa-sim-calc__row--total .vefa-sim-calc__label {
    font-weight: 700;
}
.vefa-sim-calc__row--total .vefa-sim-calc__val {
    font-weight: 800;
    font-size: 1.05rem;
}
.vefa-sim-calc__row--positive .vefa-sim-calc__val {
    color: #1e7e4f;
}
.vefa-sim-calc__row--negative .vefa-sim-calc__val {
    color: #c0392b;
}