/* ============================================================
   HYL'S STUDIO · test-visibilite.css
   Diagnostic du parcours client. Page de conversion autonome :
   pas de menu complet, pas de CTA concurrent, une seule sortie.
   Charge apres base.css (tokens, reset, .wrap, .nav__logo, .foot).
   ============================================================ */

/* ---- Nav minimale (meme motif que les pages legales) ---- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;
  width:min(1240px,90vw);margin-inline:auto;padding:22px 0}
.nav__back{font-size:.86rem;color:var(--bone-dim)}
.nav__back:hover{color:var(--gold)}

/* ---- Hero ---- */
.tv-hero{padding:56px 0 10px;text-align:center;
  background:radial-gradient(1100px 480px at 50% -10%,rgba(200,162,75,.10),transparent 62%)}
.tv-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.tv-hero h1{font-family:var(--ff-display);text-transform:uppercase;font-weight:400;
  font-size:clamp(2.1rem,5.6vw,3.9rem);line-height:.98;letter-spacing:.01em;margin-top:18px;text-wrap:balance}
.tv-hero h1 em{font-family:var(--ff-serif);font-style:italic;text-transform:none;color:var(--gold)}
.tv-lead{font-family:var(--ff-serif);font-size:clamp(1.05rem,1.9vw,1.3rem);line-height:1.65;
  color:var(--bone-dim);max-width:58ch;margin:24px auto 0}
.tv-proof{list-style:none;display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:center;
  margin-top:26px;font-size:.84rem;color:var(--bone-dim)}
.tv-proof b{color:var(--gold);font-weight:600}

.tv-main{padding-bottom:90px}

/* ---- Bloc diagnostic ---- */
.tv{max-width:720px;margin:44px auto 0;border:1px solid var(--line);border-radius:20px;
  padding:clamp(24px,4vw,44px);background:linear-gradient(170deg,rgba(200,162,75,.05),rgba(244,241,235,0) 60%)}

.tv-btn{display:inline-block;background:var(--gold);color:var(--ink);border:none;border-radius:100px;
  font-family:var(--ff-sans);font-weight:700;font-size:.95rem;padding:15px 30px;cursor:pointer;
  transition:transform .2s var(--ease),background .2s}
.tv-btn:hover{background:var(--gold-soft);transform:translateY(-1px)}

.tv-teaser__txt{font-family:var(--ff-serif);font-size:1.12rem;line-height:1.7;color:var(--bone-dim);
  margin-bottom:24px}
.tv-teaser__txt b{color:var(--bone);font-weight:400}
/* La preuve par l'exemple : argument de tete, donc apres le bouton et en retrait. */
.tv-teaser__note{margin-top:18px;font-size:.86rem;line-height:1.6;color:var(--bone-dim);opacity:.75;max-width:52ch}

/* Etats : sans JS, on montre les leviers en clair et rien d'autre. */
.tv-steps,.tv-result{display:none}
.tv:not(.tv--js) .tv-teaser{display:none}
.tv--js .tv-pool{display:none}
.tv--js[data-state="running"] .tv-teaser{display:none}
.tv--js[data-state="running"] .tv-steps{display:block}
.tv--js[data-state="done"] .tv-teaser{display:none}
.tv--js[data-state="done"] .tv-result{display:block}

/* ---- Progression ---- */
.tv-progress{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.tv-progress__count{font-size:.74rem;letter-spacing:.16em;color:var(--bone-dim);flex:none}
.tv-progress__bar{flex:1;height:3px;background:rgba(244,241,235,.12);border-radius:3px;overflow:hidden}
.tv-progress__bar > b{display:block;height:100%;width:7%;background:var(--gold);transition:width .3s var(--ease)}

/* ---- Question ---- */
.tv-q{border:none;display:none}
.tv-q.is-active{display:block;animation:tvIn .32s var(--ease) both}
@keyframes tvIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tv-bloc{font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:12px}
/* <legend> subit un rendu special : le navigateur la dimensionne a son contenu,
   pas a la largeur du bloc, d'ou des lignes qui cassent avant le bord droit.
   float + width:100% la sort de ce rendu et lui rend toute la colonne.
   Pas de text-wrap:balance ici : la question doit remplir la ligne, contrairement
   au titre d'accroche ou l'equilibrage est souhaitable. */
.tv-q__label{float:left;width:100%;font-family:var(--ff-serif);
  font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.3;color:var(--bone);margin-bottom:22px}
.tv-opts{clear:both;display:flex;flex-direction:column;gap:10px}
.tv-opt{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;
  padding:14px 17px;cursor:pointer;color:var(--bone-dim);
  transition:border-color .2s,color .2s,background .2s}
.tv-opt:hover{border-color:rgba(200,162,75,.5);color:var(--bone)}
.tv-opt input{accent-color:var(--gold);flex:none;margin:0}
.tv-opt:has(input:checked){border-color:var(--gold);color:var(--bone);background:rgba(200,162,75,.08)}
/* « Je n'ai jamais verifie » : une non-mesure n'est pas une mauvaise reponse,
   on la distingue sans la devaloriser. */
.tv-opt--unknown{border-style:dashed;font-size:.94em;opacity:.85}
.tv-opt--unknown:hover{opacity:1}
.tv-back{margin-top:20px;background:none;border:none;color:var(--bone-dim);font-family:var(--ff-sans);
  font-size:.85rem;cursor:pointer;padding:0}
.tv-back:hover{color:var(--bone)}

/* ---- Resultat ---- */
.tv-score{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.tv-score__num{font-family:var(--ff-display);font-size:clamp(2.2rem,6vw,3.4rem);color:var(--gold);line-height:1}
.tv-score__tier{font-family:var(--ff-serif);font-style:italic;font-size:clamp(1.1rem,2.4vw,1.5rem);color:var(--bone)}
.tv-score__blurb{margin-top:14px;color:var(--bone-dim);line-height:1.7}
.tv-prio__title,.tv-pool__title{margin:32px 0 14px;font-family:var(--ff-display);font-weight:400;
  text-transform:uppercase;font-size:1.2rem;letter-spacing:.02em}
.tv-prio,.tv-pool{display:flex;flex-direction:column;gap:12px}
.tv-card{border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 12px 12px 0;
  padding:16px 20px;background:rgba(244,241,235,.03)}
.tv-card__title{font-family:var(--ff-sans);font-weight:700;font-size:1.02rem;color:var(--bone);margin-bottom:6px}
.tv-card__action{color:var(--bone-dim);font-size:.95rem;line-height:1.65}
.tv-card__link{display:inline-block;margin-top:10px;font-size:.86rem;font-weight:600;color:var(--gold)}
.tv-card__link:hover{color:var(--gold-soft)}
/* Carte « a verifier » : ce levier n'a pas ete mesure, on ne conseille pas dessus. */
.tv-card--verif{border-left-style:dashed;border-left-color:var(--bone-dim)}
.tv-card--verif .tv-card__title{color:var(--bone-dim)}
.tv-allgood{color:var(--bone-dim);line-height:1.7}

/* ---- Sortie unique ---- */
.tv-cta{margin-top:34px;padding-top:28px;border-top:1px solid var(--line);text-align:center}
.tv-cta__txt{color:var(--bone-dim);line-height:1.7;margin-bottom:22px;max-width:56ch;margin-inline:auto}
.tv-cta__note{margin-top:14px;font-size:.78rem;color:var(--bone-dim);opacity:.8}
.tv-restart{margin-top:24px;background:none;border:none;color:var(--bone-dim);font-family:var(--ff-sans);
  font-size:.85rem;text-decoration:underline;cursor:pointer;padding:0}
.tv-restart:hover{color:var(--bone)}

/* ---- Texte de fond (indexable) ---- */
.tv-explain{max-width:720px;margin:70px auto 0;padding-top:44px;border-top:1px solid var(--line)}
.tv-explain h2{font-family:var(--ff-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.4rem,3vw,2rem);margin-bottom:18px}
.tv-explain p{font-family:var(--ff-serif);font-size:1.06rem;line-height:1.75;color:var(--bone-dim);margin-bottom:18px}
.tv-explain__gl a{color:var(--gold);font-weight:600}

@media (max-width:600px){
  .tv{padding:22px 18px;border-radius:16px}
  .tv-hero{padding-top:34px}
}
@media (prefers-reduced-motion:reduce){
  .tv-q.is-active{animation:none}
  .tv-progress__bar > b{transition:none}
  .tv-btn{transition:none}
}