/* Simulateur simplifié de l'accueil : curseur des cafés vendus par jour à gauche, planche champagne du
   résultat à droite. Calcul : earnings.js (et ProfitabilitySimulator sans JS). */
.earnings {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
}

.earnings__control {
    display: grid;
    gap: var(--space-2);
    padding-top: var(--space-4);
}

.earnings__control label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    color: var(--text-secondary);
}

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

.earnings__scale {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--text-secondary);
    font-size: var(--text-xs);
}


/* Planche du résultat : champagne sur le champ sombre, texte et bouton en encre. */
.earnings__card {
    --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);

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

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

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

.earnings.is-loss .earnings__result {
    color: var(--color-error);
}

.earnings__detail {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid color-mix(in srgb, var(--color-night) 20%, transparent);
    font-size: var(--text-sm);
}

.earnings__detail div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
}

.earnings__detail dd {
    flex-shrink: 0;
    white-space: nowrap;
}

.earnings__link {
    margin-top: var(--space-5);
}

.earnings__contact {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    text-align: center;
}

.earnings__contact a {
    color: var(--text-primary);
    font-weight: var(--fw-medium);
}

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

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