/* ============================================================
   FORMULAIRE QUI QUALIFIE
   Jamais un champ message nu : on demande ce dont on a besoin
   pour rappeler utilement, et rien de plus.
   ============================================================ */

.qualif{ display:grid; gap:var(--e-10) }
@media (min-width:960px){
  .qualif{ grid-template-columns:minmax(0,1fr) minmax(0,380px); gap:var(--e-16) }
}

.champs{ display:flex; flex-direction:column; gap:var(--e-8) }

.champ__titre{
  display:block;
  font-family:var(--font-mono);
  font-size:var(--fs-nano);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--ink-3);
  margin-block-end:var(--e-4);
}

/* Choix multiples : des pastilles, pas une liste déroulante. */
.choix{ display:flex; flex-wrap:wrap; gap:var(--e-2) }
.choix__opt{
  min-block-size:var(--tap-min);
  padding-inline:var(--e-4);
  display:inline-flex; align-items:center;
  border:var(--trait) solid var(--rule-fort);
  border-radius:var(--r-rond);
  background:var(--bg-leve);
  font-size:var(--fs-small);
  transition:transform var(--t-reaction) var(--courbe);
}
@media (hover:hover){ .choix__opt:hover{ transform:translateY(-1px) } }
.choix__opt[aria-pressed="true"]{
  background:var(--ink); color:var(--bg); border-color:var(--ink);
}

/* Champ de saisie */
.saisie{
  inline-size:100%;
  min-block-size:calc(var(--tap-min) + var(--e-2));
  padding-inline:var(--e-4);
  background:var(--bg-leve);
  border:var(--trait) solid var(--rule-fort);
  border-radius:var(--r-2);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:var(--fs-body);
  font-variant-numeric:tabular-nums;
}
.saisie::placeholder{ color:var(--ink-3) }
.champ__aide{
  margin-block-start:var(--e-2);
  font-size:var(--fs-nano);
  color:var(--ink-3);
}

/* ---------- Le récapitulatif ---------- */
.recap{
  align-self:start;
  padding:var(--e-6);
  background:var(--bg-leve);
  border:var(--trait) solid var(--rule);
  border-radius:var(--r-3);
  display:flex; flex-direction:column; gap:var(--e-5);
  position:sticky;
  inset-block-start:calc(var(--entete-h) + var(--e-4));
}
.recap__titre{
  font-family:var(--font-mono);
  font-size:var(--fs-nano);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--ink-3);
}
.recap__lignes{ display:flex; flex-direction:column; gap:0 }
.recap__ligne{
  display:flex; flex-direction:column; gap:var(--e-1);
  padding-block:var(--e-3);
  border-block-start:var(--trait) solid var(--rule);
}
.recap__ligne:first-child{ border-block-start:0; padding-block-start:0 }
.recap__k{
  font-family:var(--font-mono);
  font-size:var(--fs-nano);
  color:var(--ink-3);
}
.recap__v{ font-size:var(--fs-small) }
.recap__v[data-vide]{ color:var(--ink-3) }

.recap__actions{ display:flex; flex-direction:column; gap:var(--e-3) }
.recap__note{ font-size:var(--fs-nano); color:var(--ink-3) }

/* Le bouton d'envoi ne s'active que si le rappel est possible. */
.recap__actions .bouton[aria-disabled="true"]{
  opacity:.4; pointer-events:none;
}

/* La mention « plusieurs réponses possibles », dans la légende. */
.champ__note{
  display:block;
  margin-block-start:var(--e-1);
  text-transform:none;
  letter-spacing:0;
  color:var(--ink-3);
  font-size:var(--fs-nano);
}

/* Une case cochée se distingue d'un choix unique par sa marque. */
.choix__opt[aria-checked="true"]{
  background:var(--ink); color:var(--bg); border-color:var(--ink);
}
.choix__opt[role="checkbox"]::before{
  content:"";
  inline-size:14px; block-size:14px; flex:none;
  margin-inline-end:var(--e-2);
  border:var(--trait) solid var(--rule-fort);
  border-radius:var(--r-1);
  transition:background-color var(--t-reaction) var(--courbe);
}
.choix__opt[aria-checked="true"]::before{
  background:var(--bg);
  border-color:var(--bg);
}