/* Simulateur complet (/investissement) : réglages à gauche, planche champagne du bénéfice à droite,
   même langage que l'aperçu de l'accueil (earnings.css). Calcul : simulator.js (et
   ProfitabilitySimulator sans JS). */
.simulator {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
}

.simulator__controls {
    display: grid;
    gap: var(--space-6);
    align-content: start;
}

.simulator__field {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    padding-top: var(--space-5);
    border: 0;
    border-top: 1px solid var(--rule);
}

.simulator__field label {
    color: var(--text-secondary);
}

/* Le nombre de cafés : libellé et valeur sur la même ligne, la valeur en grand chiffre. */
.simulator__field--range {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
}

.simulator__field--range input,
.simulator__field--range .simulator__hint {
    grid-column: 1 / -1;
}

.simulator__field output {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--fw-black);
    line-height: 1;
}

.simulator__field input[type='number'] {
    width: 9rem;
    min-height: var(--tap-size);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--field-line);
    border-radius: var(--radius-sm);
    background-color: var(--color-night-raised);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.simulator__hint {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* Planche du bénéfice : champagne sur le champ sombre, texte et bouton en encre. */
.simulator__result {
    --text-primary: var(--color-night);
    --text-secondary: var(--color-ink-muted);
    --btn-bg: var(--color-night);
    --btn-bg-hover: var(--color-night-high);
    --btn-text: var(--color-champagne);
    --focus-ring: var(--color-night);
    --field-line: color-mix(in srgb, var(--color-night) 20%, transparent);

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding: clamp(1.75rem, 1rem + 2.5vw, 2.5rem);
    border-radius: var(--radius-lg);
    background-color: var(--color-champagne);
    color: var(--text-primary);
}

.simulator__headline {
    display: grid;
    gap: var(--space-1);
}

.simulator__headline > span {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.simulator__headline strong {
    font-family: var(--font-display);
    font-size: var(--text-num);
    font-weight: var(--fw-black);
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.simulator__result .btn {
    margin-top: var(--space-2);
}

.simulator__assumptions {
    margin-top: var(--space-7);
}

.simulator__scenarios {
    margin-top: var(--space-8);
}

/* Sous 360 px, marge resserrée : le bouton de la planche tient sur une ligne. */
@media (max-width: 22.49rem) {
    .simulator__result {
        padding: var(--space-5);
    }
}

@media (min-width: 56rem) {
    .simulator {
        grid-template-columns: minmax(0, 1fr) minmax(0, 33rem);
        gap: var(--space-10);
    }
}