/* ==========================================================================
   TAGUS VALUE — Formulaire long, parcours « une question par écran »
   Le rendu du mode app (benchmark Leo Care), à toutes les largeurs : la
   question en grand titre, des champs et des tuiles de 56 px, un écran
   par question. html.tv-flow est posée par initAppShell pour tout
   visiteur (jamais en mode expert, qui garde l'étape entière) ; sur
   téléphone s'y ajoute html.tv-app et son chrome (form-app.css).
   ========================================================================== */

/* ---------- La question en grand titre ---------- */
html.tv-flow .tv-form-step > .form-section:first-child > legend,
html.tv-flow .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-flow .tagus-value-form-container .form-section legend{border-bottom:0}
/* L'icône de la section devient l'illustration de l'écran : une pastille
   teintée au-dessus du titre (graphisme, teal à 3,3:1 suffisant), jamais
   pour une sous-section. */
html.tv-flow .tagus-value-form-container .form-section legend i{
  display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin:0 0 14px!important;
  border-radius:16px;background:var(--tv-teal-tint);color:var(--tv-teal-line);font-size:22px;line-height:1;letter-spacing:0}
html.tv-flow .tagus-value-form-container .form-section .form-section legend i{display:none}
html.tv-flow .tagus-value-form-container .form-section > legend:has(> i){display:flex;flex-direction:column;align-items:flex-start}
html.tv-flow .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-flow .tagus-value-form-container .form-section{margin-bottom:32px;padding:0;border:0;background:transparent;box-shadow:none}
html.tv-flow .tagus-value-form-container .tv-form-step .form-group,
html.tv-flow .tagus-value-form-container .tv-form-step .form-row,
html.tv-flow .tagus-value-form-container .tv-loc-search,
html.tv-flow .tagus-value-form-container .form-section > .tv-loc-confirm,
html.tv-flow .tagus-value-form-container #tv-contact-form-fields > .form-group,
html.tv-flow .tagus-value-form-container #tv-contact-form-fields > .form-row,
html.tv-flow .tagus-value-form-container #tv-billing-address-fields > .form-group,
html.tv-flow .tagus-value-form-container #tv-billing-address-fields > .form-row,
html.tv-flow .tagus-value-form-container #tv-professional-billing-fields > .form-group{
  padding:0;background:transparent;border:0;box-shadow:none}
html.tv-flow .tagus-value-form-container .form-section > .form-group,
html.tv-flow .tagus-value-form-container .form-section > .form-row,
html.tv-flow .tagus-value-form-container .tv-loc-search{margin-bottom:28px}

/* ---------- Une question par écran ---------- */
html.tv-flow .tv-q-off{display:none!important}
/* La section devient un surtitre ; la question de l'écran, le grand titre. */
html.tv-flow .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-flow .tagus-value-form-container .tv-q-cur.form-group > label .tv-doc-ico{margin-right:.45em}
/* Explication posée entre la question et ses réponses : elle touchait les
   tuiles. Rapprochée du titre qu'elle précise, décollée des réponses. */
html.tv-flow .tagus-value-form-container .form-group > label + .form-text{margin:-6px 0 18px}
/* Le TITRE de l'écran est désigné par le script (_qTitle) : la question
   quand l'écran n'en pose qu'une, sinon le nom du groupe — jamais le
   texte d'une case à cocher ni le premier de plusieurs libellés. */
html.tv-flow .tagus-value-form-container label.tv-q-title{
  display:block;font-size:26px;line-height:32px;font-weight:800;letter-spacing:-.02em;margin-bottom:18px}
html.tv-flow .tagus-value-form-container .form-section > legend.tv-q-title{
  font-size:26px;line-height:32px;font-weight:800;letter-spacing:-.02em;text-transform:none;
  color:var(--tv-ink);margin:4px 0 20px}

/* ---------- Champs : pleins, hauts, en 17 px (pas de zoom iOS) ---------- */
html.tv-flow .tagus-value-form-container input.form-control:not([type="radio"]):not([type="checkbox"]),
html.tv-flow .tagus-value-form-container select.form-control:not(.tv-seg-select):not([multiple]),
html.tv-flow .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-flow .tagus-value-form-container input.form-control:not([type="radio"]):not([type="checkbox"]):focus,
html.tv-flow .tagus-value-form-container select.form-control:not(.tv-seg-select):not([multiple]):focus,
html.tv-flow .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-flow .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-flow .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-flow .tagus-value-form-container .tv-seg--short{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px}
html.tv-flow .tagus-value-form-container .tv-seg--short .tv-seg-opt{width:100%;justify-content:center;padding:15px 12px}
html.tv-flow .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-flow .tagus-value-form-container .tv-num-pills{grid-template-columns:repeat(auto-fit,minmax(56px,1fr))}
html.tv-flow .tagus-value-form-container .form-check:has(> input[type="checkbox"]):not(.tv-sem-numero),
html.tv-flow .tagus-value-form-container .tv-qual-options .form-check,
html.tv-flow .tagus-value-form-container .tv-radio-group .form-check{min-height:56px;border-radius:14px}

/* Écran à choix unique sans réponse : le choix avance seul, pas de
   « Continuer » (sur téléphone, la barre du bas disparaît avec lui). */
html.tv-flow .tagus-value-form-container .tv-form-next.tv-next-idle{visibility:hidden}

/* ---------- Ordinateur : une colonne de lecture, le fil d'étapes à côté ---------- */
@media (min-width:768px){
html.tv-flow .tagus-value-form-container .tv-form-step,
html.tv-flow .tagus-value-form-container .tv-form-navigation,
html.tv-flow .tagus-value-form-container .tv-form-later{max-width:var(--tv-col,640px);margin-left:auto;margin-right:auto}
html.tv-flow .tagus-value-form-container .tv-form-step{padding-top:8px}
html.tv-flow .tv-form-step:not(.tv-q-multi) > .form-section:first-child > legend,
html.tv-flow .tv-form-step > h3{font-size:32px;line-height:40px}
html.tv-flow .tagus-value-form-container label.tv-q-title{font-size:28px;line-height:36px}
html.tv-flow .tagus-value-form-container .tv-seg--short{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
html.tv-flow .tagus-value-form-container .tv-form-prev,
html.tv-flow .tagus-value-form-container .tv-form-next,
html.tv-flow .tagus-value-form-container .tv-form-submit{min-height:56px;padding:0 32px;font-size:17px;border-radius:999px}
/* Le champ est la cible de l'écran : plus haut, texte plus grand. */
html.tv-flow .tagus-value-form-container .tv-q-cur input.form-control:not([type="radio"]):not([type="checkbox"]),
html.tv-flow .tagus-value-form-container .tv-loc-search input.form-control:not([type="radio"]):not([type="checkbox"]){min-height:64px;font-size:18px;padding:16px 20px}
/* Rien à précéder au premier écran : pas de bouton grisé qui pèse à gauche. */
html.tv-flow .tagus-value-form-container .tv-form-prev:disabled{visibility:hidden}
/* Navigation : de l'air au-dessus, plus de filet — la question respire, le
   bouton reste dans son axe. */
html.tv-flow .tagus-value-form-container .tv-form-navigation{margin-top:48px;padding-top:0;border-top:0}
/* Actions secondaires : pied de colonne, séparées de la navigation. */
html.tv-flow .tagus-value-form-container .tv-form-later{padding-top:24px;margin-top:56px;border-top:1px solid var(--tv-line)}
}

/* ---------- Formules, ordinateur ----------
   L'écran des formules sort de la colonne de lecture : trois cartes de
   front, de même hauteur, l'état en pied de carte, aligné d'une carte à
   l'autre. Le menu « formule choisie » doublait les cartes : il reste pour
   les lecteurs d'écran, hors de la vue. */
@media (min-width:768px){
html.tv-flow .tagus-value-form-container #tv-step-12{max-width:none}
html.tv-flow .tagus-value-form-container #tv-step-12 > h3,
html.tv-flow .tagus-value-form-container #tv-step-12 > h3 + p{text-align:center!important}
html.tv-flow .tagus-value-form-container .tv-plans-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;align-items:stretch;margin:24px 0}
html.tv-flow .tagus-value-form-container .tv-plan-card{display:flex;flex-direction:column;padding:28px 20px 20px;border-radius:16px}
html.tv-flow .tagus-value-form-container .tv-plan-card .plan-features{text-align:left;margin:16px 0 0;padding:0}
html.tv-flow .tagus-value-form-container .tv-plan-card .plan-features li{font-size:14px;line-height:1.45;margin-bottom:10px}
html.tv-flow .tagus-value-form-container .tv-plan-card .plan-select-state{margin-top:auto}
html.tv-flow .tagus-value-form-container .tv-plan-card:not(.selected) .plan-select-state{border-style:solid;border-color:var(--tv-line-strong)}
html.tv-flow .tagus-value-form-container .tv-plan-chooser{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}
html.tv-flow .tagus-value-form-container #tv-step-12 .tv-plan-info{max-width:640px;margin-left:auto;margin-right:auto}

/* L'icône de section se range À CÔTÉ du titre, pas au-dessus : une ligne
   de gagnée, et l'œil lit l'illustration et la question d'un bloc. */
html.tv-flow .tagus-value-form-container .tv-form-step > .form-section:has(> legend > i){position:relative}
html.tv-flow .tagus-value-form-container .tv-form-step > .form-section > legend:has(> i){display:flex;flex-direction:row;align-items:center;min-height:52px;padding-left:68px}
html.tv-flow .tagus-value-form-container .tv-form-step > .form-section > legend > i{position:absolute;left:0;top:0;margin:0!important}
/* Hiérarchie : la QUESTION de l'écran est le titre, à côté de l'icône ;
   le groupe (« Eau, calme et risques ») la surmonte en surtitre lisible.
   Le groupe en grand titre couvrait plusieurs écrans et ne disait pas la
   question affichée. */
html.tv-flow .tagus-value-form-container .tv-form-step.tv-q-multi > .form-section > legend:has(> i){min-height:0;margin:0 0 6px}
html.tv-flow .tagus-value-form-container .tv-form-step.tv-q-multi > .form-section > legend{font-size:15px;line-height:20px;letter-spacing:.06em}
html.tv-flow .tagus-value-form-container .tv-form-step.tv-q-multi > .form-section:has(> legend > i) label.tv-q-title{padding-left:68px;min-height:32px}
html.tv-flow .tagus-value-form-container .tv-form-step.tv-q-multi label.tv-q-title{font-size:30px;line-height:38px;font-weight:800;margin-bottom:22px}
html.tv-flow .tagus-value-form-container .tv-form-step.tv-q-multi > .form-section > legend.tv-q-title{
  font-size:30px;line-height:38px;font-weight:800;letter-spacing:-.02em;text-transform:none;
  color:var(--tv-ink);min-height:52px;margin:0 0 22px}

/* Adresse : « Localização » redisait la question. L'icône reste, le titre
   de section se tait, et « Adresse » devient le grand titre à sa hauteur. */
html.tv-flow .tagus-value-form-container #tv-step-0 > .form-section:first-child > legend{font-size:0!important;line-height:0;min-height:0;height:0;margin:0;padding:0}
html.tv-flow .tagus-value-form-container #tv-step-0 .tv-loc-search label[for="tv_loc_search"]{
  display:flex;align-items:center;min-height:52px;padding-left:68px;margin-bottom:18px;
  font-size:32px;line-height:40px;font-weight:800;letter-spacing:-.02em;color:var(--tv-ink)}
}

/* Grille à deux colonnes : la colonne des questions s'étire à la hauteur de
   la frise, les actions secondaires descendent en pied de colonne. La
   question et ses boutons gardent leur place en haut (rien ne saute d'un
   écran à l'autre). */
@media (min-width:1080px){
html.tv-flow .tagus-value-form-container .tv-form-shell{align-items:stretch}
html.tv-flow .tagus-value-form-container .tv-form-rail{align-self:start}
html.tv-flow .tagus-value-form-container .tv-form-shell__main{display:flex;flex-direction:column}
html.tv-flow .tagus-value-form-container .tv-form-shell__main > *{width:100%}
html.tv-flow .tagus-value-form-container .tv-form-shell__main > .tv-form-later{margin-top:auto}
/* margin-top:auto vaut 0 quand la question est plus haute que la frise :
   le filet se collait sous les boutons. L'écart minimal vit sur la nav. */
html.tv-flow .tagus-value-form-container .tv-form-shell__main > .tv-form-navigation{margin-bottom:48px}
/* Adresse (premier écran) et formules : la frise cède sa place. À
   l'adresse, rien n'est encore rempli — l'écran s'ouvre en pleine largeur
   comme le tunnel court, la frise arrive avec l'étape suivante. */
html.tv-flow .tagus-value-form-container .tv-form-shell:has(#tv-step-0.active),
html.tv-flow .tagus-value-form-container .tv-form-shell:has(#tv-step-12.active){grid-template-columns:minmax(0,1fr)}
html.tv-flow .tagus-value-form-container .tv-form-shell:has(#tv-step-0.active) > .tv-form-rail,
html.tv-flow .tagus-value-form-container .tv-form-shell:has(#tv-step-12.active) > .tv-form-rail{display:none}
html.tv-flow .tagus-value-form-container .tv-form-shell:has(#tv-step-0.active){--tv-col:880px}
}