/* Saisie avancée (11/11/2026) : le champ à étiquettes (js/champ-etiquettes.js), la liste des questions
   (js/liste-questions.js) et l'interrupteur. Une seule feuille pour l'application (page « Votre marque ») et pour la
   page publique /scan/, comme leurs modules : chaque rôle lit le jeton de l'application (assets/tokens.css), sinon
   celui des pages publiques (rapport/jetons.css, --hv-*). Aucun littéral de couleur ici. */
:root {
  --sa-encre: var(--encre, var(--hv-encre));
  --sa-encre-2: var(--encre-2, var(--hv-encre-2));
  --sa-voile-1: var(--voile-1, var(--hv-voile-1));
  --sa-voile-2: var(--voile-2, var(--hv-voile-2));
  --sa-voile-3: var(--voile-3, var(--hv-voile-3));
  --sa-trait: var(--trait, var(--hv-trait));
  --sa-trait-fort: var(--trait-fort, var(--hv-trait-fort));
  --sa-bleu: var(--bleu, var(--hv-bleu));
  --sa-bleu-texte: var(--bleu-texte, var(--hv-bleu-texte));
  --sa-bleu-clair: var(--bleu-clair, var(--hv-bleu-clair));
  --sa-bleu-voile: var(--bleu-voile, var(--hv-bleu-fond));
  --sa-moins: var(--moins, var(--hv-moins));
  --sa-attention: var(--attention, var(--hv-attention));
  --sa-focus: var(--anneau-focus, var(--hv-focus));
  --sa-rayon-1: var(--rayon-1, var(--hv-rayon-1));
  --sa-rayon-2: var(--rayon-2, var(--hv-rayon-2));
  --sa-pilule: var(--rayon-pilule, var(--hv-rayon-pilule));
  --sa-petit: var(--taille-petit, var(--hv-taille-petit));
  --sa-etiquette: var(--taille-etiquette, var(--hv-taille-etiquette));
  --sa-moyenne: var(--graisse-moyenne, var(--hv-graisse-moyenne));
  --sa-rapide: var(--duree-rapide, var(--hv-duree-rapide));
  --sa-courbe: var(--courbe, var(--hv-courbe));
}

/* ---------- Champ à étiquettes : un champ où chaque nom validé devient une étiquette à croix ---------- */
.etiquettes {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 48px; padding: 7px 8px;
  border: 1px solid var(--sa-trait); border-radius: var(--sa-rayon-2); background: var(--sa-voile-2); cursor: text;
  transition: border-color var(--sa-rapide) var(--sa-courbe);
}
.etiquettes:hover { border-color: var(--sa-trait-fort); }
.etiquettes:focus-within { border-color: var(--sa-bleu-texte); box-shadow: var(--sa-focus); }
.etiquettes:has([aria-invalid="true"]) { border-color: var(--sa-moins); }
.etiquettes-liste { display: contents; margin: 0; padding: 0; list-style: none; }
.etiquette {
  display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-height: 32px; padding: 0 4px 0 12px;
  border: 1px solid var(--sa-trait-fort); border-radius: var(--sa-pilule); background: var(--sa-voile-3);
  font-size: var(--sa-petit); font-weight: var(--sa-moyenne); line-height: 1.2; color: var(--sa-encre);
}
.etiquette-nom { min-width: 0; overflow-wrap: anywhere; }
.etiquette button, .question-retirer {
  position: relative; display: grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--sa-encre-2); cursor: pointer;
  transition: background-color var(--sa-rapide) var(--sa-courbe), color var(--sa-rapide) var(--sa-courbe);
}
.etiquette button:hover, .question-retirer:hover { background: var(--sa-voile-3); color: var(--sa-moins); }
.etiquette button:active, .question-retirer:active { transform: scale(0.92); }
.etiquette button:focus-visible, .question-retirer:focus-visible { outline: none; border-radius: 50%; box-shadow: var(--sa-focus); }
.etiquette button .ic, .question-retirer .ic { width: 13px; height: 13px; }
/* Au doigt, la croix garde sa taille et sa zone touchable s'étend à 44 px, sans rien déplacer. */
@media (pointer: coarse) { .etiquette button::after, .question-retirer::after { content: ""; position: absolute; inset: -8px; } }
.etiquettes .etiquettes-saisie {
  flex: 1 1 150px; width: auto; min-width: 120px; height: 32px; padding: 0 6px; border: 0; border-radius: var(--sa-rayon-1);
  background: transparent; box-shadow: none; outline: none; color: var(--sa-encre); font-size: 15px;
}
.etiquettes .etiquettes-saisie:focus, .etiquettes .etiquettes-saisie:focus-visible { border: 0; box-shadow: none; outline: none; }

/* ---------- Liste des questions : une ligne par question, sa marque si elle nomme la marque, sa croix ---------- */
.questions-liste { display: grid; gap: 6px; max-height: 296px; margin: 0; padding: 0; list-style: none; overflow-y: auto; scrollbar-width: thin; }
.questions-liste:empty { display: none; }
.questions-liste li {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 6px 6px 12px;
  border: 1px solid var(--sa-trait); border-radius: var(--sa-rayon-2); background: var(--sa-voile-1);
  font-size: 14px; line-height: 1.4; color: var(--sa-encre);
}
.question-texte { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.question-marque {
  flex: none; padding: 3px 8px; border-radius: var(--sa-rayon-1); background: var(--sa-bleu-voile);
  font-size: var(--sa-etiquette); font-weight: var(--sa-moyenne); line-height: 1.3; color: var(--sa-bleu-clair); white-space: nowrap;
}
@media (max-width: 480px) {
  .questions-liste li { flex-wrap: wrap; }
  .question-texte { flex-basis: calc(100% - 40px); }
  .question-marque { order: 3; }
}

/* ---------- Interrupteur : une case à cocher (rôle switch) dessinée en glissière ---------- */
.interrupteur { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 14px; line-height: 1.35; color: var(--sa-encre); cursor: pointer; }
.interrupteur input {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 40px; height: 24px; margin: 0;
  border: 1px solid var(--sa-trait-fort); border-radius: var(--sa-pilule); background: var(--sa-voile-3); cursor: pointer;
  transition: background-color var(--sa-rapide) var(--sa-courbe), border-color var(--sa-rapide) var(--sa-courbe);
}
.interrupteur input::after {
  content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--sa-encre);
  transition: transform var(--sa-rapide) var(--sa-courbe);
}
.interrupteur input:checked { border-color: var(--sa-bleu); background: var(--sa-bleu); }
.interrupteur input:checked::after { transform: translateX(16px); }
.interrupteur input:focus-visible { outline: none; border-radius: var(--sa-pilule); box-shadow: var(--sa-focus); }
.interrupteur:has(input:disabled) { cursor: default; }
.interrupteur input:disabled { opacity: 0.55; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .etiquettes, .etiquette button, .question-retirer, .interrupteur input, .interrupteur input::after { transition: none; }
}