/* ═══════════════════════════════════════════════════════════════════════════════
   Review for Good — Simulateur ROI
   Reset agressif : isolation totale du thème WordPress parent
   Mobile-first. Chaque règle préfixée #rfg-simulator pour éviter toute fuite.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────────────────────────── */
#rfg-simulator {
    --g:      #0F6E56;
    --g-l:    #E1F5EE;
    --g-d:    #0a5240;
    --b:      #185FA5;
    --b-l:    #E6F1FB;
    --amb:    #854F0B;
    --amb-l:  #FEF3E2;
    --amb-br: #E8A87C;
    --dark:   #111c16;
    --grey:   #555552;
    --g-lt:   #F4F6F4;
    --bdr:    #D8E4DE;
    --white:  #ffffff;
    --radius: 14px;
    --shadow: 0 4px 24px rgba(15,110,86,.10), 0 1px 4px rgba(0,0,0,.04);
    --font:   'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Reset héritage thème */
    all:         initial;
    display:     block;
    font-family: var(--font);
    font-size:   16px;
    line-height: 1.6;
    color:       #1a1a1a;
    box-sizing:  border-box;
    max-width:   700px;
    margin:      0 auto;
    padding:     0 4px;
}

/* Reset universel dans le scope */
#rfg-simulator *,
#rfg-simulator *::before,
#rfg-simulator *::after {
    box-sizing:  border-box;
    margin:      0;
    padding:     0;
    font-family: inherit;
    line-height: inherit;
}

/* ── Card ───────────────────────────────────────────────────────────────────── */
#rfg-simulator .rfg-card {
    background:    var(--white);
    border:        1.5px solid var(--bdr);
    border-radius: var(--radius);
    padding:       28px 20px;
    box-shadow:    var(--shadow);
    margin-bottom: 16px;
}
@media (min-width: 580px) {
    #rfg-simulator .rfg-card { padding: 44px 48px; }
}

/* ── Badge — PAS de fond plein, juste une pilule ────────────────────────────── */
#rfg-simulator .rfg-badge {
    display:        inline-block;
    background:     var(--g-l);
    color:          var(--g);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding:        4px 12px;
    border-radius:  20px;
    margin-bottom:  14px;
    border:         none;
    box-shadow:     none;
}
#rfg-simulator .rfg-badge--green {
    background: var(--g);
    color:      var(--white);
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
#rfg-simulator .rfg-header {
    margin-bottom: 28px;
    background:    transparent; /* neutralise tout fond injecté par le thème */
    border:        none;
    padding:       0;
}
#rfg-simulator .rfg-header h2 {
    font-size:   1.45rem;
    font-weight: 700;
    color:       var(--dark);
    line-height: 1.25;
    margin:      0 0 8px;
    background:  transparent;
    border:      none;
    padding:     0;
    display:     block;
}
@media (min-width: 580px) {
    #rfg-simulator .rfg-header h2 { font-size: 1.75rem; }
}
#rfg-simulator .rfg-subtitle {
    font-size: .9rem;
    color:     var(--grey);
    display:   block;
}
#rfg-simulator .rfg-highlight  { color: var(--g); }
#rfg-simulator .rfg-disclaimer { font-size: .78rem; font-style: italic; color: #999; }

/* ── Stepper ────────────────────────────────────────────────────────────────── */
#rfg-simulator .rfg-steps-indicator {
    display:       flex;
    align-items:   center;
    margin-bottom: 6px;
}
#rfg-simulator .rfg-step-dot {
    width:           28px;
    height:          28px;
    border-radius:   50%;
    background:      var(--bdr);
    color:           #999;
    font-size:       .8rem;
    font-weight:     700;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    transition:      background .3s;
}
#rfg-simulator .rfg-step-dot--active { background: var(--g); color: #fff; }
#rfg-simulator .rfg-step-dot--done   { background: var(--g); color: #fff; font-size: .7rem; }
#rfg-simulator .rfg-step-line {
    width:      40px;
    height:     2px;
    background: var(--bdr);
    flex-shrink: 0;
    transition: background .3s;
}
#rfg-simulator .rfg-step-line--done  { background: var(--g); }
#rfg-simulator .rfg-steps-label {
    font-size: .8rem;
    color:     var(--grey);
    display:   block;
    margin:    6px 0 20px;
}

/* ── Labels & hints ─────────────────────────────────────────────────────────── */
#rfg-simulator .rfg-field {
    margin-bottom: 18px;
}
#rfg-simulator .rfg-field label {
    display:       block;
    font-size:     .88rem;
    font-weight:   600;
    color:         #2a2a28;
    margin-bottom: 6px;
}
#rfg-simulator .rfg-req  { color: var(--g); }
#rfg-simulator .rfg-hint {
    display:     block;
    font-size:   .76rem;
    font-weight: 400;
    color:       #888;
    margin-top:  3px;
    line-height: 1.45;
}

/* ── Inputs — reset complet puis re-style ───────────────────────────────────── */
#rfg-simulator input,
#rfg-simulator select,
#rfg-simulator textarea {
    /* Reset total */
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
    background:         var(--white);
    border:             1.5px solid var(--bdr);
    border-radius:      8px;
    color:              #1a1a1a;
    display:            block;
    font-family:        var(--font);
    font-size:          16px; /* ≥16px = pas de zoom iOS */
    outline:            none;
    padding:            12px 14px;
    transition:         border-color .2s, box-shadow .2s;
    width:              100%;
}
#rfg-simulator select {
    appearance:          auto;
    -webkit-appearance:  auto;
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 14px center;
    padding-right:       36px;
}
#rfg-simulator input:focus,
#rfg-simulator select:focus {
    border-color: var(--g);
    box-shadow:   0 0 0 3px rgba(15,110,86,.14);
    outline:      none;
}
#rfg-simulator input::placeholder { color: #bbb; }

/* ── Champ 2 colonnes ───────────────────────────────────────────────────────── */
#rfg-simulator .rfg-field-row {
    display: grid;
    grid-template-columns: 1fr;
    gap:     0;
}
#rfg-simulator .rfg-field-row .rfg-field { margin-bottom: 18px; }
@media (min-width: 520px) {
    #rfg-simulator .rfg-field-row {
        grid-template-columns: 1fr 1fr;
        gap:                   16px;
    }
}

/* ── Range ──────────────────────────────────────────────────────────────────── */
#rfg-simulator .rfg-range-wrap {
    display:     flex;
    align-items: center;
    gap:         10px;
}
#rfg-simulator .rfg-range-wrap input[type="range"] {
    flex:              1;
    min-width:         0;
    padding:           0;
    border:            none;
    box-shadow:        none;
    background:        transparent;
    accent-color:      var(--g);
    cursor:            pointer;
    height:            4px;
    -webkit-appearance: auto;
    appearance:        auto;
}
#rfg-simulator .rfg-range-wrap input[type="range"]:focus {
    box-shadow: none;
    border:     none;
}
#rfg-simulator .rfg-range-wrap input[type="number"] {
    width:      68px !important;
    flex-shrink: 0;
    text-align: center;
    padding:    10px 8px;
}
#rfg-simulator .rfg-star,
#rfg-simulator .rfg-pct {
    font-size:   .95rem;
    font-weight: 700;
    color:       var(--g);
    flex-shrink: 0;
}

/* ── Mention légale ─────────────────────────────────────────────────────────── */
#rfg-simulator .rfg-legal {
    font-size:   .74rem;
    color:       #aaa;
    margin:      14px 0 20px;
    line-height: 1.5;
    display:     block;
}
#rfg-simulator .rfg-legal a { color: var(--g); text-decoration: underline; }

/* ── Bouton principal ───────────────────────────────────────────────────────── */
#rfg-simulator .rfg-btn-primary {
    display:         block;
    width:           100%;
    background:      var(--g);
    color:           #fff;
    font-size:       1rem;
    font-weight:     700;
    padding:         15px 24px;
    border:          none;
    border-radius:   9px;
    cursor:          pointer;
    text-decoration: none;
    text-align:      center;
    transition:      background .2s, transform .1s, box-shadow .2s;
    box-shadow:      0 2px 8px rgba(15,110,86,.25);
    -webkit-tap-highlight-color: transparent;
}
#rfg-simulator .rfg-btn-primary:hover {
    background:  var(--g-d);
    box-shadow:  0 4px 14px rgba(15,110,86,.35);
    color:       #fff;
}
#rfg-simulator .rfg-btn-primary:active   { transform: scale(.98); }
#rfg-simulator .rfg-btn-primary:disabled { background: #ccc; box-shadow: none; cursor: not-allowed; }

@media (min-width: 520px) {
    #rfg-simulator .rfg-btn-cta {
        width:   auto;
        display: inline-block;
        padding: 16px 40px;
    }
}

/* ── Bouton secondaire ──────────────────────────────────────────────────────── */
#rfg-simulator .rfg-btn-secondary {
    display:       block;
    width:         100%;
    background:    transparent;
    border:        1.5px solid var(--bdr);
    color:         var(--grey);
    font-size:     .88rem;
    font-weight:   500;
    padding:       12px 24px;
    border-radius: 9px;
    cursor:        pointer;
    margin-top:    10px;
    text-align:    center;
    transition:    border-color .2s, color .2s;
    -webkit-tap-highlight-color: transparent;
}
#rfg-simulator .rfg-btn-secondary:hover { border-color: var(--g); color: var(--g); }

/* ── Erreur ─────────────────────────────────────────────────────────────────── */
#rfg-simulator .rfg-msg-error {
    background:    #FEF2F2;
    border-left:   3px solid #dc2626;
    color:         #b91c1c;
    padding:       10px 14px;
    border-radius: 0 8px 8px 0;
    font-size:     .875rem;
    margin-top:    12px;
    display:       block;
    line-height:   1.5;
}

/* ── Section titles ─────────────────────────────────────────────────────────── */
#rfg-simulator .rfg-section-title {
    font-size:      .9rem;
    font-weight:    700;
    color:          var(--dark);
    margin:         0 0 12px;
    padding-bottom: 6px;
    border-bottom:  2px solid var(--g-l);
    display:        block;
}

/* ── Grilles résultats ──────────────────────────────────────────────────────── */
#rfg-simulator .rfg-results-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   10px;
    margin-bottom:         20px;
}
@media (min-width: 460px) {
    #rfg-simulator .rfg-results-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

#rfg-simulator .rfg-result-card {
    border-radius: 10px;
    padding:       16px 14px;
    text-align:    center;
}
#rfg-simulator .rfg-result--green  { background: var(--g-l); }
#rfg-simulator .rfg-result--blue   { background: var(--b-l); }
#rfg-simulator .rfg-result--dark   { background: var(--dark); }
#rfg-simulator .rfg-result--impact { background: var(--amb-l); border: 1px solid var(--amb-br); }

#rfg-simulator .rfg-result-label {
    font-size:      .7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:          var(--grey);
    margin-bottom:  8px;
    display:        block;
    line-height:    1.3;
}
#rfg-simulator .rfg-result--dark .rfg-result-label { color: rgba(255,255,255,.6); }

#rfg-simulator .rfg-result-value {
    font-size:     1.55rem;
    font-weight:   800;
    line-height:   1;
    color:         var(--dark);
    margin-bottom: 5px;
    display:       block;
    word-break:    break-word;
}
@media (min-width: 460px) {
    #rfg-simulator .rfg-result-value { font-size: 1.75rem; }
}
#rfg-simulator .rfg-result--green .rfg-result-value { color: var(--g); }
#rfg-simulator .rfg-result--blue  .rfg-result-value { color: var(--b); }
#rfg-simulator .rfg-result--dark  .rfg-result-value { color: #fff; }

#rfg-simulator .rfg-result-sub {
    font-size:   .7rem;
    color:       var(--grey);
    opacity:     .7;
    display:     block;
    line-height: 1.4;
}
#rfg-simulator .rfg-result--dark .rfg-result-sub { color: rgba(255,255,255,.55); opacity: 1; }

/* ── Bloc impact RSE ────────────────────────────────────────────────────────── */
#rfg-simulator .rfg-impact-block {
    display:       flex;
    align-items:   flex-start;
    gap:           12px;
    background:    var(--amb-l);
    border:        1.5px solid var(--amb-br);
    border-radius: 10px;
    padding:       16px;
    margin-bottom: 24px;
}
#rfg-simulator .rfg-impact-icon {
    font-size:   1.5rem;
    color:       var(--amb);
    flex-shrink: 0;
    line-height: 1.2;
}
#rfg-simulator .rfg-impact-text {
    font-size:   .875rem;
    color:       #3a2a10;
    line-height: 1.6;
}

/* ── Explications ───────────────────────────────────────────────────────────── */
#rfg-simulator .rfg-explanation { margin-bottom: 24px; }
#rfg-simulator .rfg-explanation h3 {
    font-size:      .95rem;
    font-weight:    700;
    color:          var(--dark);
    border-bottom:  2px solid var(--g-l);
    padding-bottom: 8px;
    margin-bottom:  14px;
    display:        block;
}
#rfg-simulator .rfg-explain-block {
    border-left:   3px solid;
    padding:       12px 14px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 10px;
    font-size:     .875rem;
    line-height:   1.6;
}
#rfg-simulator .rfg-explain--green  { border-color: var(--g);   background: var(--g-l);   }
#rfg-simulator .rfg-explain--blue   { border-color: var(--b);   background: var(--b-l);   }
#rfg-simulator .rfg-explain--impact { border-color: var(--amb); background: var(--amb-l); }
#rfg-simulator .rfg-explain--grey   { border-color: #ccc;       background: var(--g-lt);  }

#rfg-simulator .rfg-explain-title {
    font-weight:   700;
    font-size:     .875rem;
    color:         var(--dark);
    margin-bottom: 6px;
    display:       block;
    line-height:   1.4;
}
#rfg-simulator .rfg-explain-block p { color: #3a4040; margin: 0; }
#rfg-simulator .rfg-source {
    display:    block;
    font-size:  .72rem;
    font-style: italic;
    color:      #888;
    margin-top: 5px;
}

/* ── Hypothèses ─────────────────────────────────────────────────────────────── */
#rfg-simulator .rfg-hypotheses {
    background:    var(--g-lt);
    border:        1px solid var(--bdr);
    border-radius: 8px;
    padding:       14px 16px;
    margin-top:    16px;
    font-size:     .8rem;
    color:         var(--grey);
}
#rfg-simulator .rfg-hypotheses strong {
    display:       block;
    font-size:     .82rem;
    font-weight:   700;
    color:         var(--dark);
    margin-bottom: 8px;
}
#rfg-simulator .rfg-hypotheses ul {
    list-style:  disc;
    margin:      0 0 10px 18px;
    padding:     0;
    line-height: 1.85;
}

/* ── CTA final ──────────────────────────────────────────────────────────────── */
#rfg-simulator .rfg-cta-block {
    background:    var(--dark);
    border-radius: 12px;
    padding:       28px 20px;
    text-align:    center;
}
@media (min-width: 520px) {
    #rfg-simulator .rfg-cta-block { padding: 32px 40px; }
}
#rfg-simulator .rfg-cta-text {
    font-size:     .95rem;
    color:         rgba(255,255,255,.85);
    margin-bottom: 18px;
    line-height:   1.6;
    display:       block;
}
#rfg-simulator .rfg-cta-text strong { color: #fff; }