/* ============================================================
   PAGE SIMULATEUR
   Frame Figma : SIM (374:1332). Interactif : calculs JS dans
   assets/js/simulator.js.
   ============================================================ */

body.simulator {
    background: var(--color-primary-light-grey);
}

.simulatorPage {
    background: var(--color-primary-light-grey);
    padding: 0 var(--content-gutter) var(--space-10);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* ----- Titre tab "Simuler / votre investissement" -------------------- */
.simulatorPage__title {
    align-self: flex-start;
    background: var(--color-primary-white);
    padding: var(--space-10);
    margin-bottom: -30px;
    z-index: 1;
    position: relative;
}

.simulatorPage__titleMain,
.simulatorPage__titleSub {
    font-family: var(--font-family-base);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    white-space: nowrap;
}

.simulatorPage__titleMain { color: var(--color-primary-dark-blue); }
.simulatorPage__titleSub,
.simulatorPage__titleMain em {
    color: var(--color-secondary-teal);
    font-style: italic;
    font-weight: var(--font-weight-regular);
}

.simulatorPage__titleMain p,
.simulatorPage__titleSub p {
    margin: 0; font: inherit; color: inherit;
}

/* ----- Conteneur sections (inner gutter 100px) ----------------------- */
.simulatorPage__content {
    padding: 0 var(--content-gutter);
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    z-index: 2;
    position: relative;
}

/* ============================================================
   Bandeau intro teal
   ============================================================ */
.simulatorIntro {
    background: var(--color-secondary-teal);
    color: var(--color-primary-white);
    padding: var(--space-10);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.simulatorIntro__title,
.simulatorIntro__body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: 1.4;
}

.simulatorIntro__title { font-weight: var(--font-weight-bold); }

.simulatorIntro__title p,
.simulatorIntro__body p {
    margin: 0;
    font: inherit;
    color: inherit;
}

.simulatorIntro__title strong { font-weight: var(--font-weight-bold); }

/* ============================================================
   Cartes blanches (Prix / Combien investir / Combien rapporter)
   ============================================================ */
.simCard {
    background: var(--color-primary-white);
    padding: var(--space-8);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.10);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.simCard__title {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-h2);    /* 20px */
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-dark-blue);
    line-height: var(--line-height-tight);
}

.simCard__title p {
    margin: 0;
    font: inherit;
    color: inherit;
}

.simCard__lead {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--color-secondary-teal);
    line-height: 1.4;
}

.simCard__lead p {
    margin: 0;
    font: inherit;
    color: inherit;
}

/* ----- Row (Prix de l'action : 2 champs côte à côte) ---------------- */
.simRow {
    display: flex;
    gap: var(--space-5);
    align-items: stretch;
}

.simRow--gainCols {
    align-items: stretch;
}

.simRow > .simField {
    flex: 1 1 0;
}

/* ============================================================
   Champ générique (label gauche + valeur/input droite)
   ============================================================ */
.simField {
    display: flex;
    gap: var(--space-10);
    align-items: center;
    padding: var(--space-5);
    background: var(--color-primary-white);
    border: 1px solid var(--color-primary-dark-blue);
}

.simField--lilac {
    background: var(--color-secondary-lilac);
    border: 0;
}

.simField--result {
    background: var(--color-primary-white);
    border: 1px solid var(--color-primary-dark-blue);
}

/* Ligne de synthèse « Total SAR Payment » (FCPE_SAR / AD_SAR) : mise en avant
   par rapport aux lignes de résultat intermédiaires (indemnité, prime, valeur
   FCPE) qui restent en .simField--result. */
.simField--total {
    background: var(--color-primary-dark-blue);
    border: 1px solid var(--color-primary-dark-blue);
    color: var(--color-primary-white);
}

.simField--total .simField__label,
.simField--total .simField__value {
    color: var(--color-primary-white);
}

.simField--gainCol {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.simField__label {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Les libellés de champ sont en GRAS (Figma text/bold 16px) : couvre les
       labels rendus en texte direct (gain q1/q2, "Vous récupérerez…",
       "Vous pouvez donc investir… au maximum :"). labelSub/labelDetail
       repassent en regular ci-dessous. */
    font-weight: var(--font-weight-bold);
}

.simField__label--center {
    text-align: center;
    align-items: center;
}

.simField__labelMain,
.simField__labelSub {
    margin: 0;
    font-family: var(--font-family-base);
    color: var(--color-primary-dark-blue);
    line-height: var(--line-height-tight);
}

.simField__labelMain {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
}

.simField__labelMain p {
    margin: 0;
    font: inherit;
    color: inherit;
}

.simField__labelSub {
    font-size: var(--font-size-mention);   /* 10px */
    font-weight: var(--font-weight-regular);
}

.simField__labelSub p {
    margin: 0;
    font: inherit;
    color: inherit;
}

/* Aide détaillée 2025 (explication "rémunération brute") : note lisible
   multi-paragraphes, sous la question du champ salaire. */
.simField__help {
    margin-top: var(--space-2);
    font-family: var(--font-family-base);
    font-size: var(--font-size-mention);
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
    color: var(--color-primary-dark-blue);
}

.simField__help p {
    margin: 0 0 var(--space-2) 0;
}

.simField__help p:last-child {
    margin-bottom: 0;
}

/* Détail rendement sous "Vous récupérerez…" : 10px regular (pas gras). */
.simField__labelDetail {
    display: block;
    margin-top: 4px;
    font-size: var(--font-size-mention);   /* 10px */
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-tight);
}
.simField__labelDetail p { margin: 0; font: inherit; color: inherit; }

/* Hint "L'investissement minimum est de 100€" sous le champ montant
   (Figma 377:2166 : italique, deep red). */
.simField__minHint {
    margin: 6px 0 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-nav);   /* 12px */
    font-style: italic;
    color: var(--color-secondary-deep-red);
    line-height: var(--line-height-tight);
    text-align: center;
}
.simField__minHint p { margin: 0; font: inherit; color: inherit; }

/* ----- Valeur read-only (prix) -------------------------------------- */
.simField__value {
    /* Assez large pour des montants à 8 chiffres + séparateurs + devise
       (ex. « 12 345 678,00 € »), avec auto-croissance pour les très gros gains. */
    min-width: 150px;
    width: auto;
    flex-shrink: 0;
    padding: 8px;
    background: transparent;
    color: var(--color-primary-dark-blue);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    text-align: center;
    line-height: var(--line-height-tight);
    white-space: nowrap;
}

.simField__value--rounded {
    background: var(--color-primary-white);
    border-radius: 8px;
}

/* ----- Input editable (montant) ------------------------------------- */
.simField__inputWrap {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: center;
}

.simField__input {
    /* Élargi pour contenir des montants à 5-8 chiffres avec séparateurs. */
    width: 160px;
    max-width: 100%;
    padding: 6px 8px;
    background: var(--color-primary-white);
    border: 0;
    border-bottom: 1px solid var(--color-secondary-purple);
    border-radius: 8px;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-secondary-purple);
    text-align: center;
    line-height: var(--line-height-tight);
    /* Hide spin buttons */
    -moz-appearance: textfield;
    appearance: textfield;
}

.simField__input::-webkit-outer-spin-button,
.simField__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.simField__input:focus-visible {
    outline: 2px solid var(--color-secondary-teal);
    outline-offset: 2px;
}

.simField__input--rounded {
    color: var(--color-secondary-deep-red);
    font-weight: var(--font-weight-bold);
}

.simField__warning {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: 12px;
    color: var(--color-secondary-deep-red);
    font-style: italic;
    text-align: center;
    line-height: var(--line-height-tight);
}

.simField__warning p {
    margin: 0;
    font: inherit;
    color: inherit;
}

/* ----- Range / Jauge ------------------------------------------------- */
.simField__range {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    height: 16px;
    cursor: pointer;
}

.simField__range::-webkit-slider-runnable-track {
    height: 4px;
    background: linear-gradient(
        to right,
        var(--color-primary-dark-blue) 0%,
        var(--color-primary-dark-blue) var(--sim-range-percent, 0%),
        var(--color-primary-white) var(--sim-range-percent, 0%),
        var(--color-primary-white) 100%
    );
    border-radius: 2px;
}

.simField__range::-moz-range-track {
    height: 4px;
    background: var(--color-primary-white);
    border-radius: 2px;
}

.simField__range::-moz-range-progress {
    height: 4px;
    background: var(--color-primary-dark-blue);
    border-radius: 2px;
}

.simField__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-secondary-lilac);
    border: 3px solid var(--color-primary-dark-blue);
    margin-top: -6px;
    cursor: pointer;
}

.simField__range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-secondary-lilac);
    border: 3px solid var(--color-primary-dark-blue);
    cursor: pointer;
}

.simField__rangeValue {
    margin-top: var(--space-2);
    padding: 8px;
    background: var(--color-primary-white);
    border-radius: 8px;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-dark-blue);
    min-width: 78px;
    text-align: center;
    line-height: var(--line-height-tight);
}

/* ============================================================
   CTA Souscrire en bas
   ============================================================ */
.simulatorPage__cta {
    display: flex;
    justify-content: flex-start;
    margin-top: 0;
}

.simulatorCta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    min-width: 333px;
    background: transparent;
    border: 1px solid var(--color-primary-dark-blue);
    color: var(--color-primary-dark-blue);
    font-family: var(--font-family-base);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.simulatorCta:hover,
.simulatorCta:focus-visible {
    background: var(--color-primary-dark-blue);
    color: var(--color-primary-white);
    outline: none;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1280px) {
    .simulatorPage__content {
        padding: 0 var(--content-gutter);
    }
}

@media (max-width: 1024px) {
    .simulatorPage,
    .simulatorPage__content {
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }

    .simulatorPage__titleMain,
    .simulatorPage__titleSub {
        font-size: 24px;
        white-space: normal;
    }

    .simRow {
        flex-direction: column;
    }

    .simField {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .simField__inputWrap {
        width: 100%;
        align-items: stretch;
    }

    .simField__input,
    .simField__value {
        width: 100%;
    }

    .simulatorCta {
        width: 100%;
        min-width: 0;
    }
}

/* ── Mentions légales (footnote) — Figma node 374:1528 "Mentions" ──
   Ubuntu Regular 10px, navy, pleine largeur du contenu, espacement vertical.
   (Sans règle dédiée, le bloc s'affichait en taille de base = incohérent.) */
.simulatorPage__footnote {
    width: 100%;
    margin-top: var(--space-8);
    font-family: var(--font-family-base);
    font-size: var(--font-size-mention);   /* 10px */
    font-weight: var(--font-weight-regular);
    color: var(--color-primary-dark-blue);
    line-height: 1.4;
    text-align: left;
}
.simulatorPage__footnote p { margin: 0 0 var(--space-3); }
.simulatorPage__footnote p:last-child { margin-bottom: 0; }
.simulatorPage__footnote strong { font-weight: var(--font-weight-bold); }