/* ============================================================
   calc-split.css — calculateur « d'un seul coup d'œil »
   Texte à gauche, formulaire à droite, le tout tient dans un écran.
   Structure :
   <section class="cn-hero calc-split [calc-split--wide]">
     <div class="container calc-split-inner">
       <div class="calc-split-text">titre, intro…</div>
       <div class="calc-split-form">formulaire</div>
     </div>
   </section>
   calc-split--wide : formulaires à deux personnes ou à deux volets.
   Couleurs uniquement via les tokens d'astro.css (thème clair et sombre).
   ============================================================ */

main#main > section.calc-split{
  padding:0;
  min-height:calc(100svh - 64px);
  display:flex;
  align-items:center;
  text-align:left;
}
.calc-split + section::before{content:none}

.calc-split-inner{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(360px,520px);
  gap:clamp(40px,6vw,96px);
  align-items:center;
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:40px 24px;
}
.calc-split--wide .calc-split-inner{
  grid-template-columns:minmax(320px,.85fr) minmax(560px,740px);
  max-width:1320px;
  gap:clamp(32px,4vw,64px);
}

/* --- colonne texte --- */
.calc-split-text{text-align:left;max-width:none;margin:0;display:block;align-items:stretch}
.calc-split-text .cn-sec-heading,
.calc-split-text h1{
  text-align:left;
  font-size:clamp(2.3rem,4.4vw,4rem);
  line-height:1.03;
  margin:0 0 1.1rem;
  max-width:none;
}
.calc-split--wide .calc-split-text .cn-sec-heading,
.calc-split--wide .calc-split-text h1{font-size:clamp(2rem,3.4vw,3.1rem)}
.calc-split-text p{
  text-align:left;
  margin:0 0 .8rem;
  max-width:44ch;
  font-size:1.02rem;
  line-height:1.58;
}
.calc-split-text .cn-hero-foot{font-size:.9rem;margin-top:.2rem}
.calc-split-text .cn-hero-cta-row{display:none}
.calc-split-text .bsm-method{display:flex;flex-wrap:wrap;gap:.4rem;max-width:none;margin-top:1rem}
.calc-split-keys{
  list-style:none;
  margin:1.6rem 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  font-size:.95rem;
  color:var(--ink-2);
}
.calc-split-keys li{display:flex;align-items:baseline;gap:.7rem}
.calc-split-keys strong{font-weight:500;color:var(--ink);margin-right:.35rem}
.calc-split-keys .k-glyph{
  font-family:var(--font-glyph);
  color:var(--gold);
  font-size:1.05rem;
  width:1.2em;
  text-align:center;
  flex:none;
}

/* --- colonne formulaire --- */
.calc-split-form > form{
  margin:0;
  max-width:none;
  padding:1.4rem 1.5rem 1.3rem;
  background:var(--surface);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.calc-split-form .form-row,
.calc-split-form .syn-field{display:block;margin-bottom:.85rem}
.calc-split-form .form-row > label:not(.rs-check):not(.time-unknown-label){display:block;margin-bottom:.35rem;text-align:left}
.calc-split-form label{text-align:left}
.calc-split-form .form-hint{display:none}
.calc-split-form input[type="text"],
.calc-split-form select{width:100%}
.calc-split-form fieldset{margin:0}
.calc-split-form .trinite-form-submit,
.calc-split-form .form-submit,
.calc-split-form .rs-form-submit,
.calc-split-form .cn-form-actions,
.calc-split-form .syn-form-actions{margin-top:.9rem}
.calc-split-form .syn-form-foot{display:none}

/* révolution solaire : les deux volets côte à côte */
.calc-split-form .rs-form{display:grid;grid-template-columns:1fr 1fr;gap:.4rem 1.6rem}
.calc-split-form .rs-form .profile-loader,
.calc-split-form .rs-form .rs-error,
.calc-split-form .rs-form .rs-form-submit{grid-column:1 / -1}
.calc-split-form .rs-form-submit{text-align:center}
.calc-split-form .rs-legend{font-size:.95rem}
.calc-split-form .rs-check{display:flex;align-items:center;gap:.5rem;font-size:.8rem}

/* compatibilité familiale : le choix du lien au-dessus du formulaire */
.calc-split-form .fam-link-question{margin:0 0 .5rem;text-align:left}
.calc-split-form .fam-link-selector{margin-bottom:1rem}
.calc-split-form .fam-link-desc{display:none}

/* formulaires à deux personnes : plus compacts pour tenir dans l'écran */
.calc-split-form .fam-field,
.calc-split-form .cma-field{margin-bottom:.7rem}
.calc-split-form .syn-field{margin-bottom:.7rem}
.calc-split-form .fam-form-foot,
.calc-split-form .cma-form-foot{display:none}
.calc-split-form .fam-person-card,
.calc-split-form .syn-person-card,
.calc-split-form .cma-person-card{padding:.9rem 1rem 1rem}
.calc-split-form .cn-form-actions{margin-top:.6rem}
.calc-split-form .fam-link-card{padding:.5rem .8rem;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.5rem;min-height:0}
.calc-split-form .fam-link-glyph{font-size:1rem;margin:0}
.calc-split-form .fam-link-question{font-size:.9rem;margin-bottom:.4rem}
.calc-split-form .fam-link-selector{margin-bottom:.8rem}

/* --- écrans étroits : on empile, le formulaire vient tout de suite --- */
@media (max-width:1100px){
  main#main > section.calc-split--wide{min-height:0;display:block}
  .calc-split--wide .calc-split-inner{grid-template-columns:1fr;gap:28px}
}
@media (max-width:900px){
  main#main > section.calc-split{min-height:0;display:block}
  .calc-split-inner{grid-template-columns:1fr;gap:28px;padding:32px 20px}
  .calc-split-text .cn-sec-heading,
  .calc-split-text h1{font-size:clamp(2rem,8vw,2.8rem)}
  .calc-split-form .rs-form{grid-template-columns:1fr}
}
@media (max-width:640px){
  .calc-split-text p{font-size:1rem}
  .calc-split-keys{display:none}
  .calc-split-form .fam-link-desc{display:block}
}