/* =========================================================
   BCA Simulateur — mise en page du simulateur hypothécaire (bcacredit.be)
   AJOUTÉ 21/10/2026 (intégration de la maquette 2023:47 / 2009:27).
   Chargée SEULEMENT sur les pages qui appellent le fragment
   « simulateur-hypothecaire ». Jetons du thème et couleurs de la page
   Style uniquement ; aucune couleur en dur. Tableau des custo : decisions.md.
   ========================================================= */

/* custo CSS — 21/10/2026 — fragment simulateur-hypothecaire — raison : le thème n'a pas de simulateur (formulaire de calcul + résultat rendu par le serveur + bloc d'offre dans une même carte, posée aussi dans un héro sombre) — pour le thème plus tard : non (propre à BCA) */
.custo-simulateur { display: flex; flex-direction: column; gap: var(--space-24); padding: var(--space-40); color: var(--color-ink); }
.custo-simulateur [hidden] { display: none !important; }
.custo-simulateur__calcul,
.custo-simulateur__form,
.custo-simulateur__offre-bloc,
.custo-simulateur__offre-bloc form { display: flex; flex-direction: column; gap: var(--space-16); }
.custo-simulateur__titre { margin: 0; font-family: var(--font-primary); font-size: var(--fs-h4); line-height: var(--lh-heading); }
.custo-simulateur__calculer,
.custo-simulateur__plein { inline-size: 100%; }
.custo-simulateur__resultat { display: flex; flex-direction: column; gap: var(--space-16); padding-block-start: var(--space-16); border-block-start: 3px solid var(--color-surface-card-line); }
.custo-simulateur__resultat p { margin: 0; }
.custo-simulateur__estimation { font-weight: 700; }
.custo-simulateur__offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-16); }
.custo-simulateur__offre { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-16); border-radius: var(--radius); background: var(--color-surface-doux); }
.custo-simulateur__nom { color: var(--color-ink-muted); font-weight: 700; }
.custo-simulateur__mensualite { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-8); }
.custo-simulateur__chiffre { font-family: var(--font-primary); font-size: 2.125rem; /* 34 px de la maquette : entre h3 et h2 du Style */ font-weight: 700; line-height: 1.15; white-space: nowrap; }
.custo-simulateur__par,
.custo-simulateur__note,
.custo-simulateur__aide { color: var(--color-ink-muted); font-size: var(--fs-body-s); }
.custo-simulateur__detail { font-size: var(--fs-body-s); font-weight: 600; }
.custo-simulateur__offre-bloc { padding-block-start: var(--space-16); border-block-start: 3px solid var(--color-surface-card-line); }
.custo-simulateur__offre-bloc > p { margin: 0; }
.custo-simulateur__lecture .sl-field__input[readonly] { background: var(--color-surface-card); box-shadow: inset 0 0 0 1px var(--color-surface-card-line); }

/* custo CSS — 21/10/2026 — fragment simulateur-hypothecaire dans le héro de l'accueil — raison : la carte blanche est posée dans un héro sl-sombre ; le thème y passe titres, libellés et textes en clair (illisibles sur la carte blanche) — pour le thème plus tard : oui (îlot clair dans un fond sombre) */
.sl-sombre .custo-simulateur,
.sl-sombre .custo-simulateur :is(h2, h3, p, label, legend, .sl-field__label, .sl-choice__label, .custo-mention-credit) { color: var(--color-ink); }
.sl-sombre .custo-simulateur :is(.custo-simulateur__par, .custo-simulateur__note, .custo-simulateur__aide, .custo-simulateur__nom) { color: var(--color-ink-muted); }
.sl-sombre .custo-simulateur .sl-field__input { background: var(--color-surface-chip); color: var(--color-ink); }
.sl-sombre .custo-simulateur a:not(.sl-btn, .sl-badge) { color: var(--color-principal); }
.sl-sombre .custo-simulateur .sl-btn:not(.sl-btn--secondaire, .sl-btn--tertiaire, .sl-btn--verre, .sl-btn--accent, .sl-btn--clair) { background: var(--color-pill-dark); color: var(--color-ink-inverse); }
.sl-sombre .custo-simulateur .sl-btn--secondaire { background: var(--color-surface-card); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-surface-card-line), var(--shadow-card-soft); }
.sl-sombre .custo-simulateur .sl-btn--secondaire:is(:hover, :focus) { background: var(--color-monogram-1-bg); color: var(--color-monogram-1-ink); }

/* custo CSS — 21/10/2026 — fragment simulateur-hypothecaire — raison : même carte au téléphone, rembourrage réduit (maquette 2023:280) ; le thème n'a pas de simulateur — pour le thème plus tard : non */
@media (max-width: 767.98px) {
  .custo-simulateur { padding: var(--space-24); }
}