/* Onima V5 : page « Démo gratuite » d'onima.ch. Chargé après landing.css et contact.css, dont il reprend les jetons,
   l'ouverture courte, la carte du formulaire et le bloc à côté ; ici : les choix multiples en puces (métiers, régions).
   Thème clair seulement, comme l'accueil. Aucun style en ligne (CSP). */

/* Groupes de choix : un fieldset sans cadre, les cases en puces qui passent à la ligne. */
.choix { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.choix[hidden] { display: none; }
.choix > legend { padding: 0; }
.choix__aide { margin: -2px 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.choix__facultatif { font-weight: 500; color: var(--ink-soft); }
.choix__liste { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.choix__liste li { margin: 0; min-width: 0; }

.choix__puce { position: relative; display: inline-flex; align-items: center; max-width: 100%; cursor: pointer; }
/* La case reste dans l'arbre d'accessibilité et au clavier ; seule la puce se voit. */
.choix__puce input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.choix__puce span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px 8px 12px;
  border: 1.5px solid #d0d5dd; border-radius: 999px; background: #fff;
  font-size: 14.5px; font-weight: 500; line-height: 1.3; color: var(--ink-2);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
/* Le petit carré de la case, dessiné en CSS : vide, puis coché. */
.choix__puce span::before {
  content: ""; flex: 0 0 auto; width: 16px; height: 16px; border: 1.5px solid #98a2b3; border-radius: 4px; background: #fff;
  background-repeat: no-repeat; background-position: center; background-size: 12px 12px;
}
.choix__puce:hover span { border-color: #98a2b3; }
.choix__puce input:checked + span { border-color: var(--green-deep); background: var(--green-tint); color: var(--green-deep); font-weight: 600; }
.choix__puce input:checked + span::before {
  border-color: var(--green-deep); background-color: var(--green-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5 9-10' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.choix__puce input:focus-visible + span { outline: 3px solid var(--green-deep); outline-offset: 2px; }
.choix[aria-invalid="true"] .choix__puce span { border-color: var(--erreur); }

.champ__texte--court { min-height: 112px; }

/* Bloc « Pendant la démo » : la liste d'abord, l'e-mail ensuite. */
.demo__points { margin-top: 16px; }
.demo__direct { margin-top: 24px; }

@media (max-width: 640px) {
  .choix__puce span { font-size: 14px; padding: 8px 12px 8px 10px; }
}