/* =========================================================
   Sitero — questionnaire « quelle formule est faite pour moi ? »
   Toutes les classes commencent par qz : aucune ne peut écraser
   une classe existante du site (vérifié : « qz » n'apparaît nulle
   part ailleurs dans assets/ ni dans les pages).

   Rien ici n'invente de couleur : tout vient des variables de
   style.css (--tint, --ink, --line, --r-m, --e-out…). C'est ce qui
   fait que l'outil a l'air d'appartenir au site.
   ========================================================= */

.qz{padding:var(--pad-s) 0}
.qz__in{max-width:880px;margin-inline:auto}

/* ---------- en-tête de la section ---------- */
.qz__head{text-align:center;margin-bottom:clamp(30px,4vw,48px)}
.qz__head .eyebrow{justify-content:center}
.qz__head .lead{margin:20px auto 0}

/* ---------- la scène : c'est là que le script écrit ----------
   Sans script, elle reste vide et ne prend aucune place :
   c'est le bloc de repli, plus bas, qui s'affiche. */
.qz__stage{position:relative}

/* La hauteur est animée d'une question à l'autre pour éviter le
   sursaut. Le script pose une hauteur en pixels le temps du
   passage, puis la relâche. */
.qz__stage{transition:height .45s var(--e-out)}
.qz__stage[data-anim="off"]{transition:none}

/* ---------- la carte ---------- */
.qz__card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:clamp(26px,3.6vw,44px);
  box-shadow:0 2px 5px rgba(0,0,0,.03),0 30px 60px -40px rgba(0,0,0,.32);
}
.sec--paper .qz__card{border-color:rgba(0,0,0,.06)}

/* Passage d'une question à l'autre : la sortante s'efface en se
   décalant, l'entrante arrive du côté opposé. Les deux sont
   superposées le temps du croisement. */
.qz__card--sort{position:absolute;inset:0 0 auto;width:100%;pointer-events:none}
.qz__card--anim{animation:qz-entre .42s var(--e-out) both}
.qz__card--anim.qz__card--retour{animation-name:qz-entre-retour}
.qz__card--sort{animation:qz-sort .3s var(--e) both}
.qz__card--sort.qz__card--retour{animation-name:qz-sort-retour}

@keyframes qz-entre{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes qz-entre-retour{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes qz-sort{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-26px)}}
@keyframes qz-sort-retour{from{opacity:1;transform:none}to{opacity:0;transform:translateX(26px)}}

/* ---------- barre d'avancement ---------- */
.qz__top{display:flex;align-items:center;gap:16px;margin-bottom:clamp(22px,3vw,32px)}
.qz__etape{
  font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);white-space:nowrap;
}
.qz__jauge{
  flex:1;height:4px;border-radius:999px;background:var(--line);overflow:hidden;
}
.qz__jauge i{
  display:block;height:100%;width:0;border-radius:999px;
  background-image:var(--tint-grad);background-color:var(--tint);
  transition:width .5s var(--e-out);
}

/* ---------- la question ---------- */
.qz__fs{border:0;padding:0;margin:0;min-width:0}
.qz__q{
  font-size:clamp(1.35rem,3vw,2rem);line-height:1.14;font-weight:640;
  letter-spacing:-.03em;text-wrap:balance;padding:0;color:var(--ink);
}
.qz__aide{margin-top:12px;color:var(--ink-2);font-size:.99rem;line-height:1.5;max-width:56ch}

/* le titre reçoit le focus au changement d'écran : pas de contour
   permanent, mais un contour au clavier grâce à :focus-visible */
.qz__q:focus{outline:none}

/* ---------- les réponses ---------- */
.qz__opts{display:grid;gap:11px;margin-top:clamp(22px,3vw,30px)}
.qz__opt{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--white);color:var(--ink);
  border:1.5px solid var(--line);border-radius:var(--r-m);
  padding:16px 18px;cursor:pointer;
  font-size:1rem;font-weight:500;letter-spacing:-.012em;line-height:1.4;
  transition:border-color .25s var(--e),background .25s var(--e),
             transform .35s var(--e-out),box-shadow .35s var(--e-out);
}
.qz__opt:hover{border-color:var(--ink-3);transform:translateY(-2px);
  box-shadow:0 14px 30px -22px rgba(0,0,0,.5)}
.qz__opt:active{transform:translateY(0) scale(.995)}

/* la pastille de gauche : vide au repos, pleine quand la réponse
   est celle déjà choisie (utile au retour en arrière) */
.qz__puce{
  flex:none;width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--line);position:relative;
  transition:border-color .25s var(--e),background .25s var(--e);
}
.qz__puce::after{
  content:'';position:absolute;inset:4px;border-radius:50%;background:var(--tint);
  transform:scale(0);transition:transform .3s var(--e-out);
}
.qz__opt[aria-pressed="true"]{border-color:var(--tint);background:rgba(0,146,181,.05)}
.qz__opt[aria-pressed="true"] .qz__puce{border-color:var(--tint)}
.qz__opt[aria-pressed="true"] .qz__puce::after{transform:scale(1)}

.qz__txt{flex:1;min-width:0}
.qz__txt b{display:block;font-weight:560}
/* --ink-2 et non --ink-3 : à cette taille, le gris le plus clair du site
   passe sous le contraste recommandé. */
.qz__txt span{display:block;margin-top:3px;color:var(--ink-2);font-size:.87rem;
  font-weight:400;line-height:1.4}

/* ---------- bas de carte ---------- */
.qz__bas{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:clamp(22px,3vw,30px);flex-wrap:wrap}
.qz__retour{
  display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:8px 2px;
  color:var(--ink-2);font-size:.92rem;font-weight:500;cursor:pointer;
  transition:color .25s var(--e);
}
.qz__retour:hover{color:var(--ink)}
.qz__retour .ic{font-size:1.05em;transform:rotate(180deg)}
.qz__rappel{color:var(--ink-3);font-size:.84rem;line-height:1.4;margin-left:auto;text-align:right}

/* ---------- le résultat ---------- */
.qz__res{display:grid;gap:0}
.qz__kicker{
  font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tint);display:flex;align-items:center;gap:10px;
}
.qz__kicker::before{content:'';width:24px;height:3px;border-radius:2px;background:currentColor;flex:none}

.qz__nom{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:16px}
.qz__nom h3{font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.06;font-weight:660;
  letter-spacing:-.035em;color:var(--ink)}
.qz__prix{display:flex;align-items:baseline;gap:4px;color:var(--ink)}
.qz__prix b{font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1;font-weight:640;letter-spacing:-.05em}
.qz__prix em{font-style:normal;font-size:1.2rem;font-weight:560;color:var(--ink-3)}
.qz__sous{margin-top:10px;color:var(--ink-2);font-size:1.02rem;line-height:1.5;max-width:58ch}

/* le « pourquoi » : les réponses qui ont conduit là */
.qz__pq{margin-top:clamp(22px,3vw,30px);background:var(--paper);border-radius:var(--r-m);
  padding:22px 24px}
.qz__pq h4{font-size:.94rem;font-weight:620;letter-spacing:-.015em;color:var(--ink);margin-bottom:14px}
.qz__pq ul{display:grid;gap:10px}
.qz__pq li{display:flex;gap:11px;align-items:flex-start;font-size:.94rem;line-height:1.45;color:var(--ink-2)}
.qz__pq .ic{color:var(--tint);font-size:1.02em;margin-top:.22em;stroke-width:2.6;flex:none}

/* l'avertissement franc : hors périmètre, ou contenus manquants */
.qz__note{
  margin-top:16px;border:1px solid var(--line);border-left:3px solid var(--red);
  border-radius:var(--r-s);padding:18px 20px;
  color:var(--ink-2);font-size:.94rem;line-height:1.55;
}
.qz__note b{color:var(--ink);font-weight:600}
.qz__note--info{border-left-color:var(--tint)}
.qz__note a{color:var(--ink);border-bottom:1px solid var(--line)}
.qz__note a:hover{border-bottom-color:var(--ink)}
.qz__note+.qz__note{margin-top:10px}

.qz__go{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(24px,3vw,32px)}
.qz__go .btn{flex:1 1 auto}
.qz__refaire{
  display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:10px 2px;
  margin-top:14px;color:var(--ink-3);font-size:.88rem;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);
  transition:color .25s var(--e);
}
.qz__refaire:hover{color:var(--ink)}

/* Cette phrase-là est une information de confidentialité : elle doit se
   lire, donc pas dans le gris le plus clair. */
.qz__rgpd{margin-top:18px;color:var(--ink-2);font-size:.82rem;line-height:1.5;max-width:70ch}

/* ---------- le repli, sans JavaScript ----------
   Affiché par défaut. Le script ajoute la classe qz--on sur la
   section, ce qui le remplace par le questionnaire. Si le script
   ne se charge pas, le visiteur garde les trois formules et le
   lien vers la page qui les détaille. */
.qz__repli{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(26px,3.6vw,44px);
}
.qz--on .qz__repli{display:none}
.qz__repli h3{font-size:1.16rem;font-weight:620;letter-spacing:-.024em;margin-bottom:8px}
.qz__repli>p{color:var(--ink-2);font-size:.99rem;line-height:1.5;max-width:60ch}
.qz__trois{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0 24px}
.qz__une{border:1px solid var(--line);border-radius:var(--r-m);padding:20px}
.qz__une b{display:block;font-size:1rem;font-weight:620;letter-spacing:-.02em}
.qz__une span{display:block;color:var(--tint);font-size:1.05rem;font-weight:640;margin:6px 0 10px}
.qz__une p{color:var(--ink-2);font-size:.86rem;line-height:1.45}

/* ---------- le mot posé en haut du formulaire de contact ----------
   Inséré par le script quand il a rempli des champs. Il n'existe pas
   dans le HTML du formulaire : rien n'a été modifié là-bas. */
.qz__pre{
  display:flex;align-items:flex-start;gap:11px;
  background:rgba(0,146,181,.07);border:1px solid rgba(0,146,181,.22);
  border-radius:var(--r-s);padding:14px 16px;margin-bottom:22px;
  color:var(--ink-2);font-size:.88rem;line-height:1.45;
}
.qz__pre .ic{color:var(--tint);font-size:1.05em;margin-top:.18em;stroke-width:2.6;flex:none}

/* ---------- écrans étroits ---------- */
@media (max-width:760px){
  .qz__trois{grid-template-columns:1fr}
  .qz__top{gap:12px}
  .qz__rappel{display:none}
  .qz__go .btn{flex:1 1 100%}
  .qz__opt{padding:15px 16px;font-size:.97rem}
}

/* ---------- mouvement réduit ----------
   Réglage système « limiter les animations » : plus rien ne bouge,
   ni le croisement des cartes, ni la hauteur, ni la jauge. Le
   questionnaire reste entièrement utilisable. */
@media (prefers-reduced-motion:reduce){
  .qz__stage{transition:none}
  .qz__card--anim,.qz__card--sort{animation:none!important}
  .qz__card--sort{display:none}
  .qz__jauge i{transition:none}
  .qz__opt,.qz__puce,.qz__puce::after{transition:none}
  .qz__opt:hover{transform:none;box-shadow:none}
}

/* ---------- impression ---------- */
@media print{
  .qz__stage{display:none}
  .qz--on .qz__repli{display:block}
}