/* ==========================================================================
   Mon Saju — calculateur et résultat (public/calculateur.html)
   Fidèle à design/maquettes/site/calculateur.html et resultat.html.
   Feuilles chargées avant : fonts.css, tokens, base, composants (icons,
   button, tags, form, pillars, faq, offer, chrome, result, reveal). Le <body>
   porte `ds`. Jetons uniquement ; aucun style en ligne (CSP stricte).
   ========================================================================== */

body { overflow-x: hidden; }
[hidden] { display: none !important; }
.head-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: 15px; color: var(--ink-2); }
.head-link[hidden] { display: none; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------------- Saisie ---------------- */
.calc { padding: 20px 0 56px; }
.calc .wrap { max-width: 600px; }
.calc[hidden], .result[hidden] { display: none; }
.calc__intro { margin-bottom: 28px; }
.calc__intro .kicker { margin-bottom: 12px; }
.calc__intro .lead { margin-top: 12px; }
.alert {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 16px; margin-bottom: 24px;
  border-radius: var(--r-sm); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.alert[hidden] { display: none; }
.alert:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.alert .i { color: var(--accent-ink); width: 22px; height: 22px; }
.alert b { display: block; font-weight: 600; margin-bottom: 6px; }
.alert ul { display: grid; gap: 4px; font-size: 15px; }
.alert a { color: var(--accent-ink); font-weight: 500; display: inline-block; padding: 4px 0; }
.alert ul:empty { display: none; }
.alert b:only-child { margin-bottom: 0; }
.confirm { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.confirm[hidden], .err[hidden], .note[hidden], .field__help[hidden] { display: none; }
.confirm .i { width: 16px; height: 16px; color: var(--success); }
.time-row { display: grid; gap: 14px; }
.input input[hidden] { display: none; }
.input select { cursor: pointer; }
.input .hour-off { font-size: 16px; }
.field .note { margin-top: 14px; }
.field.is-error .field__help { display: none; }

/* Cases et choix : de vraies entrées (clavier, lecteurs d'écran), habillées par leur étiquette */
.check { position: relative; }
.check input { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.seg input, .opt-row input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.check .box .i { visibility: hidden; }
.check input:checked + .box { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.check input:checked + .box .i { visibility: visible; }
.check input:focus-visible + .box { outline: 2px solid var(--focus); outline-offset: 3px; }
.check input[aria-invalid="true"] + .box { border-color: var(--accent); border-width: 2px; }
.seg label { position: relative; }
.seg input:checked + .radio { border-color: var(--ink); }
.seg input:checked + .radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.seg label:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
#field-gender .field__help b { color: var(--ink-2); font-weight: 600; }

/* Ville : liste de propositions (combobox) */
.combo__list { max-height: none; overflow: visible; padding: 6px; }
.combo__list[hidden] { display: none; }
.combo__list ul { margin: 0; padding: 0; list-style: none; max-height: 15rem; overflow: auto; }
.combo__opt { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 11px 12px; min-height: 52px; align-items: center; border-radius: var(--r-sm); cursor: pointer; }
.combo__opt b { font-weight: 600; font-size: 16px; }
.combo__opt b mark { background: none; color: var(--accent-ink); }
.combo__opt span { grid-column: 1; font-size: 14px; color: var(--ink-3); }
.combo__opt em { grid-row: 1 / span 2; grid-column: 2; align-self: center; font: 500 13px/1 var(--font-ui); font-style: normal; color: var(--ink-3); white-space: nowrap; }
.combo__foot { padding: 10px 12px 6px; border-top: 1px solid var(--line-soft); margin-top: 4px; font-size: 14px; color: var(--ink-3); }
.tz-fallback { display: grid; gap: 10px; justify-items: start; }
.tz-fallback .input { width: 100%; }
.tz-fallback .field__label { margin-bottom: 0; }
.tz-fallback .input select { padding-right: 8px; }

/* Options avancées */
.adv { margin-top: 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.adv summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 52px; cursor: pointer; font: 500 15px/1.3 var(--font-ui); color: var(--ink-2); }
.adv summary::-webkit-details-marker { display: none; }
.adv summary .i { width: 18px; height: 18px; transition: transform var(--t-base) var(--ease-out); }
.adv[open] summary .i { transform: rotate(180deg); }
.adv__body { padding: 2px 0 18px; display: grid; gap: 10px; }
.opt-row { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); cursor: pointer; }
.opt-row.is-on { border-color: var(--ink); }
.opt-row .radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--field-border); display: grid; place-items: center; margin-top: 1px; }
.opt-row input:checked + .radio { border-color: var(--ink); }
.opt-row input:checked + .radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.opt-row:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.opt-row b { font-weight: 600; font-size: 15px; display: block; }
.opt-row .small { color: var(--ink-3); }
.submit { margin-top: 28px; }
.privacy { margin-top: 16px; display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.privacy .i { width: 18px; height: 18px; margin-top: 1px; flex: none; }
.privacy a { color: var(--ink-2); }
.calc__form[data-sending] .fields { opacity: .5; pointer-events: none; }
.btn-calc-label { display: inline-flex; align-items: center; gap: 10px; }

/* ---------------- Résultat : mise en page ---------------- */
.result { padding-bottom: 8px; }
.layout { display: block; }
.main-col--end { padding-top: 8px; }
.aside { margin-top: 8px; }
.offer-sec { padding: 40px 0 24px; }
.disclaimer { margin: 24px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.disclaimer a { color: var(--ink-2); }
.offer h2:focus { outline: none; }
.offer .pay__err { margin-top: 12px; }
.waiver__msg[hidden] { display: none; }
.waiver .check input { top: 1px; }
body.has-buybar .site-foot { padding-bottom: 96px; }

/* Socle technique replié */
.socle { margin-top: 36px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.socle summary { list-style: none; cursor: pointer; padding: 18px; display: grid; grid-template-columns: 1fr 20px; gap: 4px 12px; }
.socle summary::-webkit-details-marker { display: none; }
.socle summary b { font: 600 16px/1.3 var(--font-ui); }
.socle summary span { grid-column: 1; font-size: 14px; color: var(--ink-3); }
.socle summary .i { grid-row: 1 / span 2; grid-column: 2; align-self: center; width: 20px; height: 20px; color: var(--ink-2); transition: transform var(--t-base) var(--ease-out); }
.socle[open] summary .i { transform: rotate(180deg); }
.socle__body { padding: 0 18px 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.socle__sec { min-width: 0; }
.socle__sec .h4 { margin-bottom: 10px; }
.markers { display: grid; gap: 8px; margin: 0; }
.markers div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 8px; font-size: 14px; }
.markers dt { color: var(--ink-3); }
.markers dd { margin: 0; color: var(--ink); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line-soft); border-radius: var(--r-sm); }
.stable { width: 100%; border-collapse: collapse; font-size: 14px; }
.stable th, .stable td { padding: 9px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.stable thead th { font: 600 12px/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.stable tbody th { font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.stable tr:last-child > * { border-bottom: 0; }
.stable td small { display: block; margin-top: 4px; color: var(--ink-3); font-size: 12px; }
.stable--compact td, .stable--compact th { white-space: nowrap; }
.schip { display: inline-flex; align-items: baseline; gap: 4px; margin: 0 4px 2px 0; padding: 2px 8px; border-radius: var(--r-pill); background: var(--el-soft); color: var(--el-ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
.schip .ko { font-size: 15px; }
.mini { display: block; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.gloss { display: grid; gap: 8px; font-size: 14px; color: var(--ink-2); }
.gloss b { color: var(--ink); }
.socle .meta { margin-bottom: 8px; }

/* ---------------- Desktop ---------------- */
@media (min-width: 900px) {
  .calc { padding: 24px 0 96px; }
  .calc .wrap { max-width: 640px; }
  .calc__form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 36px 40px; box-shadow: var(--shadow-1); }
  .layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 64px; align-items: start; }
  .main-col { max-width: 680px; grid-column: 1; }
  .aside { position: sticky; top: 16px; padding: 36px 4px 4px; margin: 0 -4px; grid-column: 2; grid-row: 1 / span 2; max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .offer-sec { padding: 0; }
}
@media (max-width: 560px) {
  .markers div { grid-template-columns: 1fr; gap: 0; }
}