/* WOURI ESTATE — simulateurs de crédit et de rendement (fiche bien, Pass Diaspora).
   Direction artistique « Cadastre & calcaire » : calcaire, encre, olive, rouille. Gloock + Schibsted Grotesk. */
@layer components {
  .choice small { display: block; font-weight: 400; color: var(--encre-2); font-size: var(--step--1); }
  .sim__grid { display: grid; gap: var(--space-m); }
  @media (min-width: 64em) {
    .sim__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
    .sim__res { position: sticky; inset-block-start: calc(var(--header-total, 4.5rem) + 1rem); }
  }
  .sim__form { display: grid; gap: var(--space-s); }
  .sim__row { display: grid; gap: var(--space-xs) var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
  .sim__pre { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
  .sim__pre .choice { flex-direction: column; gap: .15rem; }
  .sim__pre .choice > input { position: absolute; opacity: 0; inline-size: 100%; block-size: 100%; inset: 0; margin: 0; cursor: pointer; }
  .sim__pre .choice span { font-size: .75rem; color: var(--encre-2); font-weight: 400; }
  .sim__pre .choice.is-perso { opacity: .8; border-style: dashed; cursor: default; }
  .sim__res { background: var(--chaux); border: 1px solid var(--bordure-forte); border-radius: var(--radius); padding: var(--space-m); display: grid; gap: var(--space-s); box-shadow: inset 0 3px 0 var(--rouille); container-type: inline-size; }
  .sim__res[aria-busy="true"] .sim__big, .sim__res[aria-busy="true"] dl { opacity: .35; }
  .sim__res dl { display: grid; gap: 0; margin: 0; }
  .sim__res dl > div { display: flex; justify-content: space-between; gap: var(--space-s); padding: .5rem 0; border-block-start: 1px dashed var(--bordure); font-size: var(--step--1); }
  .sim__res dt { color: var(--encre-2); }
  .sim__res dd { margin: 0; font-weight: 700; text-align: end; }
  .sim__trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .sim__trio > div { padding: .6rem .5rem; background: var(--calcaire); border-radius: var(--radius); text-align: center; }
  .sim__trio b { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); line-height: 1.1; }
  .sim__trio span { font-size: .6875rem; font-weight: 600; color: var(--encre-2); line-height: 1.3; display: block; }
  .sim__trio .net { background: var(--olive-clair); color: var(--olive-fonce); }
  .stackbar { display: flex; block-size: 1.6rem; border-radius: 2px; overflow: hidden; background: var(--calcaire-2); border: 1px solid var(--bordure-forte); }
  .stackbar i { display: block; min-inline-size: 2px; }
  .stackbar .s-vac { background: #B9B09C; }
  .stackbar .s-ges { background: var(--rouille); }
  .stackbar .s-cha { background: #D49A74; }
  .stackbar .s-fon { background: var(--ocre-texte); }
  .stackbar .s-ret { background: var(--encre-2); }
  .stackbar .s-net { background: var(--olive); }
  .legend { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin: 0; padding: 0; list-style: none; font-size: .75rem; color: var(--encre-2); }
  .legend li { display: inline-flex; align-items: center; gap: .35rem; }
  .legend i { inline-size: .7rem; block-size: .7rem; display: inline-block; }
}
@layer pages {
  .sim, .sim__res, .sim__form { grid-template-columns: minmax(0, 1fr); }
  .sim__pick { max-inline-size: 28rem; margin-block-end: var(--space-m); }
  .stackbar i { flex: 0 0 auto; inline-size: calc(var(--w, 0) * 1%); min-inline-size: 2px; }
  .legend i.s-vac { background: #B9B09C; }
  .legend i.s-ges { background: var(--rouille); }
  .legend i.s-cha { background: #D49A74; }
  .legend i.s-fon { background: var(--ocre-texte); }
  .legend i.s-ret { background: var(--encre-2); }
  .legend i.s-net { background: var(--olive); }
  .sim__row .field { min-inline-size: 0; }
}