/* ==========================================================================
   TAGUS VALUE — Formulaire long, mode téléphone (« app »)
   Benchmark : Leo Care. Sous 768 px, le formulaire prend l'écran comme une
   application : une barre du haut (retour, étape, fermer, avancement), la
   question en grand titre, des contrôles de 56 px et le bouton d'action
   collé au pouce. Tout est gardé par html.tv-app, posée par le JS du
   formulaire (initAppShell) : les autres pages et le bureau n'en voient
   rien. Les contrastes de form.css (bordures 3:1) sont conservés.
   ========================================================================== */
.tv-appbar,
.tv-app-summary{display:none}

@media (max-width:767px){

/* ---------- Le site s'efface : l'écran appartient au formulaire ---------- */
html.tv-app .tvt-header,
html.tv-app .tvt-breadcrumbs,
html.tv-app .tvt-footer,
html.tv-app .tvt-stickybar,
html.tv-app .tvt-pagehero,
html.tv-app .tv-form-header,
html.tv-app .tv-reliability-card,
html.tv-app .tv-form-rail > :not(.tv-inline-progress),
html.tv-app .tv-inline-progress > :not(.tv-live-price),
html.tv-app .tv-form-rail:not(:has(.tv-live-price)){display:none!important}

html.tv-app body{
  padding-top:calc(env(safe-area-inset-top) + 92px);
  padding-bottom:calc(env(safe-area-inset-bottom) + 112px);
  background:#fff}
html.tv-app #tagus-value-form-wrapper,
html.tv-app .tagus-value-form-container,
html.tv-app .tv-form-shell,
html.tv-app .tv-form-shell__main{
  margin:0;padding:0;max-width:none;border:0;border-radius:0;box-shadow:none;background:transparent}
html.tv-app .tagus-value-form-container{padding:0 4px}

/* ---------- Barre d'application ---------- */
html.tv-app .tv-appbar{
  display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:calc(env(safe-area-inset-top) + 10px) 16px 12px;
  background:#fff;box-shadow:0 6px 18px rgba(18,40,58,.08)}
html.tv-app .tv-appbar__btn{
  display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:0;border-radius:50%;background:#fff;color:var(--tv-ink);
  box-shadow:0 2px 10px rgba(18,40,58,.16);cursor:pointer}
html.tv-app .tv-appbar__btn:focus-visible{outline:3px solid var(--tv-ink);outline-offset:2px}
html.tv-app .tv-appbar__title{
  text-align:center;font-size:17px;line-height:22px;font-weight:700;color:var(--tv-ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.tv-app .tv-appbar__progress{
  grid-column:1/-1;height:6px;margin:10px 44px 0;border-radius:999px;background:var(--tv-line);overflow:hidden}
html.tv-app .tv-appbar__progress span{
  display:block;height:100%;width:4%;border-radius:inherit;background:var(--tv-teal);transition:width .3s ease}

/* ---------- La question en grand titre ---------- */
html.tv-app .tv-form-step > .form-section:first-child > legend,
html.tv-app .tv-form-step > h3{
  font-size:28px;line-height:34px;font-weight:800;letter-spacing:-.02em;
  color:var(--tv-ink);border:0;padding:0;margin:4px 0 20px;text-align:left}
html.tv-app .tagus-value-form-container .form-section legend{border-bottom:0}
html.tv-app .tagus-value-form-container .form-section legend i{display:none}
html.tv-app .tv-form-step > h3 + p{text-align:left!important;font-size:16px;color:var(--tv-ink-soft)}

/* Plus de bloc gris autour de chaque question : l'écran EST la carte. */
html.tv-app .tagus-value-form-container .form-section{margin-bottom:32px;padding:0;border:0;background:transparent;box-shadow:none}
html.tv-app .tagus-value-form-container .tv-form-step .form-group,
html.tv-app .tagus-value-form-container .tv-form-step .form-row,
html.tv-app .tagus-value-form-container .tv-loc-search,
html.tv-app .tagus-value-form-container .form-section > .tv-loc-confirm,
html.tv-app .tagus-value-form-container #tv-contact-form-fields > .form-group,
html.tv-app .tagus-value-form-container #tv-contact-form-fields > .form-row,
html.tv-app .tagus-value-form-container #tv-billing-address-fields > .form-group,
html.tv-app .tagus-value-form-container #tv-billing-address-fields > .form-row,
html.tv-app .tagus-value-form-container #tv-professional-billing-fields > .form-group{
  padding:0;background:transparent;border:0;box-shadow:none}
html.tv-app .tagus-value-form-container .form-section > .form-group,
html.tv-app .tagus-value-form-container .form-section > .form-row,
html.tv-app .tagus-value-form-container .tv-loc-search{margin-bottom:28px}

/* ---------- Une question par écran ---------- */
html.tv-app .tv-q-off{display:none!important}
/* La section devient un surtitre ; la question de l'écran, le grand titre. */
html.tv-app .tv-form-step.tv-q-multi .form-section > legend{
  font-size:13px;line-height:18px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tv-teal-title);margin:4px 0 10px}
html.tv-app .tagus-value-form-container .tv-q-cur.form-group > label:first-of-type{
  font-size:26px;line-height:32px;font-weight:800;letter-spacing:-.02em;margin-bottom:18px}

/* ---------- Champs : pleins, hauts, en 17 px (pas de zoom iOS) ---------- */
html.tv-app .tagus-value-form-container input.form-control:not([type="radio"]):not([type="checkbox"]),
html.tv-app .tagus-value-form-container select.form-control:not(.tv-seg-select):not([multiple]),
html.tv-app .tagus-value-form-container textarea.form-control:not([readonly]):not([disabled]){
  min-height:56px;padding:14px 16px;font-size:17px;border-radius:14px;
  background:#F3F5F8;border:1.5px solid var(--tv-line-strong)}
html.tv-app .tagus-value-form-container input.form-control:not([type="radio"]):not([type="checkbox"]):focus,
html.tv-app .tagus-value-form-container select.form-control:not(.tv-seg-select):not([multiple]):focus,
html.tv-app .tagus-value-form-container textarea.form-control:not([readonly]):not([disabled]):focus{
  background:#fff;border-color:var(--tv-teal-line);box-shadow:0 0 0 3px rgba(26,188,156,.28);outline:0}

/* ---------- Choix : tuiles de 56 px ---------- */
html.tv-app .tagus-value-form-container .tv-seg-opt{
  min-height:56px;align-items:center;padding:15px 18px;border-radius:14px;background:#F3F5F8;font-weight:600}
html.tv-app .tagus-value-form-container .tv-seg-opt[aria-pressed="true"]{padding:14.5px 17.5px;background:var(--tv-teal-tint)}
/* Oui / Non et réponses courtes : colonnes égales, comme deux boutons. */
html.tv-app .tagus-value-form-container .tv-seg--short{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px}
html.tv-app .tagus-value-form-container .tv-seg--short .tv-seg-opt{width:100%;justify-content:center;padding:15px 12px}
html.tv-app .tagus-value-form-container .tv-seg--short .tv-seg-opt[aria-pressed="true"]{
  padding:14.5px 11.5px;background:var(--tv-teal);color:var(--tv-on-teal)}
html.tv-app .tagus-value-form-container .tv-num-pills{grid-template-columns:repeat(auto-fit,minmax(56px,1fr))}
html.tv-app .tagus-value-form-container .form-check:has(> input[type="checkbox"]):not(.tv-sem-numero),
html.tv-app .tagus-value-form-container .tv-qual-options .form-check,
html.tv-app .tagus-value-form-container .tv-radio-group .form-check{min-height:56px;border-radius:14px}

/* ---------- Action au pouce ---------- */
html.tv-app .tagus-value-form-container .tv-form-navigation{
  position:fixed;left:0;right:0;bottom:0;z-index:999;
  display:flex;flex-direction:column;gap:10px;margin:0;max-width:none;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:#fff;border-top:1px solid var(--tv-line);box-shadow:0 -6px 18px rgba(18,40,58,.06)}
html.tv-app .tagus-value-form-container .tv-form-prev{display:none!important}
html.tv-app .tagus-value-form-container .tv-form-next,
html.tv-app .tagus-value-form-container .tv-form-submit{
  width:100%;min-height:56px;margin:0;justify-content:center;text-align:center;
  font-size:17px;font-weight:700;border-radius:999px}
html.tv-app .tv-app-summary:not([hidden]){
  display:flex;width:100%;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:17px;font-weight:700;color:var(--tv-ink)}
html.tv-app .tv-app-summary__price{font-size:22px;font-weight:800;color:var(--tv-teal-title);white-space:nowrap}
}