/* ali aboudou — le simulateur de la page Tarifs (S11, étape 6), dans un bloc HTML (voir pages_uniques_site.py).
   Les règles de maquette-v6/tarifs.html, chargées seulement sur cette page (charte.php), après les feuilles de Hello,
   précédées de ce qu'il faut pour annuler son reset : marges des paragraphes, cadre des fieldset, libellés en ligne,
   bordure des champs numériques, boutons roses (#c36) et leur contour de focus noir. */
.tsim p,.simbar p{margin:0}
.tsim fieldset{padding:0;margin:0}
.tsim legend{padding:0;float:none;width:auto}
.tsim .opt-r label{line-height:inherit;vertical-align:baseline}
.tsim button[type=button],.tsim button[type=button]:where(:hover,:focus),.simbar button[type=button],.simbar button[type=button]:where(:hover,:focus){
  background-color:transparent;border:0;border-radius:0;color:inherit;padding:0;font:inherit;line-height:inherit;white-space:normal;box-shadow:none}
.tsim .stepper input[type=number]{padding:0;border-radius:0;transition:none}
.tsim :is(button,input):focus-visible{box-shadow:none}
.tsim .stepper button[type=button]:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.tsim .sum ul,.tsim .sum dl{padding:0}
.tsim .sum dd{margin:0}
#simulateur noscript .lede{margin-top:22px}

/* Simulateur : les questions à gauche, l'estimation qui suit à droite */
.tsim{margin-top:64px;display:grid;grid-template-columns:1.35fr 1fr;gap:var(--pad);align-items:start;text-align:left}
.tsim form{display:flex;flex-direction:column;gap:44px}
.tsim fieldset{border:0;min-width:0}
.tsim legend{font-weight:400;font-size:clamp(21px,1.9vw,26px);letter-spacing:-.025em;line-height:1.2;margin-bottom:6px}
.tsim .hint{font-size:14px;color:var(--ink-2);margin-bottom:18px}
.tsim .opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.tsim .opt-r{position:relative}
.tsim .opt-r input{position:absolute;opacity:0;inset:0;pointer-events:none}
.tsim .opt-r label{display:block;height:100%;border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-size:15px;background:var(--white);cursor:pointer;
  transition:border-color .2s ease,background-color .2s ease,color .2s ease,transform .16s var(--ease-out)}
.tsim .opt-r label small{display:block;margin-top:4px;font-size:13px;color:var(--ink-2);transition:color .2s ease}
@media (hover:hover) and (pointer:fine){.tsim .opt-r label:hover{border-color:var(--ink)}}
.tsim .opt-r label:active{transform:scale(.98)}
.tsim .opt-r input:checked + label{border-color:var(--blue);background:var(--blue);color:#fff}
.tsim .opt-r input:checked + label small{color:rgba(255,255,255,.8)}
.tsim .opt-r input:focus-visible + label{outline:2px solid var(--blue);outline-offset:3px}
.tsim .stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--white)}
.tsim .stepper button[type=button],.tsim .stepper button[type=button]:where(:hover,:focus){width:52px;height:52px;border-radius:50%;font-size:22px;font-weight:300;transition:transform .16s var(--ease-out),color .2s ease}
.tsim .stepper button[type=button]:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){.tsim .stepper button[type=button]:hover{color:var(--blue)}}
.tsim .stepper input[type=number]{width:64px;height:52px;border:0;background:none;text-align:center;font:inherit;font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.tsim .stepper input[type=number]::-webkit-outer-spin-button,.tsim .stepper input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tsim .stepper input[type=number]:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:4px}
/* questions propres à un type de projet */
.tsim [data-only]{display:none}
.tsim[data-type="refonte"] [data-only="refonte"],.tsim[data-shop="oui"] [data-only="boutique"],.tsim[data-shop="oui"][data-design="maquette"] [data-only="boutique-maquette"]{display:block;animation:qIn .45s var(--ease-out)}
@keyframes qIn{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.tsim [data-only]{animation:none!important}}

.tsim .sum{position:sticky;top:108px;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:clamp(24px,3vw,40px);scroll-margin-top:96px}
.tsim .sum__k{font-size:13px;color:var(--ink-2)}
.tsim .sum__total{display:block;font-weight:300;font-size:clamp(52px,5.4vw,84px);letter-spacing:-.05em;line-height:1;margin:12px 0 4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tsim .sum__total small{font-size:.26em;letter-spacing:0;color:var(--ink-2);margin-left:6px}
.tsim .sum ul{list-style:none;margin:24px 0 0;border-top:1px solid var(--line)}
.tsim .sum li{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
.tsim .sum li span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.tsim .sum dl{margin-top:18px;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px}
.tsim .sum dt{color:var(--ink-2)}
.tsim .sum__note{margin-top:22px;font-size:13px;color:var(--ink-2)}
.tsim .sum .btn{margin-top:24px;width:100%;justify-content:center}
@media (max-width:960px){.tsim{grid-template-columns:1fr}.tsim .sum{position:relative;top:auto}}

/* Mobile : le total reste visible pendant qu'on répond */
.simbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:45;display:none;align-items:center;justify-content:space-between;gap:12px;
  background:var(--ink);color:var(--bg);border-radius:16px;padding:12px 12px 12px 20px;transform:translateY(140%);transition:transform .45s var(--ease-out)}
.simbar.on{transform:none}
.simbar p{font-size:12px;color:rgba(248,248,248,.7);line-height:1.2}
.simbar p b{display:block;font-size:20px;font-weight:500;color:var(--bg);font-variant-numeric:tabular-nums;margin-top:2px}
.simbar button[type=button],.simbar button[type=button]:where(:hover,:focus){background:var(--bg);color:var(--ink);border-radius:999px;padding:11px 18px;font-size:14px;font-weight:500}
@media (max-width:960px){.simbar{display:flex}}
@media (prefers-reduced-motion:reduce){.simbar{transition:none}}
/* Le bouton du module d'accessibilité remonte au-dessus de la barre du total tant qu'elle est là : il en cachait le
   montant sur téléphone (le module, S10, est venu après la maquette Tarifs, S8 ; trouvé à l'étape 6 de S11) */
@media (max-width:960px){
  html .a11y .a11y__btn{transition:background-color .2s ease,transform .16s var(--ease-out),bottom .45s var(--ease-out)}
  body:has(.simbar.on) .a11y .a11y__btn{bottom:92px}
  body:has(.simbar.on) .a11y .a11y__panel{bottom:152px;max-height:calc(100dvh / var(--a11y-z,1) - 172px)}
}