/* ============================================================================
   KIT — parts/champ.css        Dépend de : tokens.css, motion.css

   Un champ est un CREUX dans la table, pas une carte posée dessus : fond
   enfoncé, ombre interne légère, jamais d'ombre portée.

   Balisage attendu :
     <label class="champ">
       <span class="etiquette">Identifiant</span>
       <input class="saisie" ...>
       <span class="aide">Visible par les autres joueurs.</span>
     </label>
   ========================================================================= */

.champ {
  display: flex;
  flex-direction: column;
  gap: var(--pas-2);
}

.etiquette {
  font-size: var(--t-300);
  font-weight: 550;
  color: var(--encre-2);
}
.etiquette .requis { color: var(--danger); margin-left: 0.15em; }

.saisie,
input[type="text"], input[type="search"], input[type="password"],
input[type="email"], input[type="number"], input[type="datetime-local"],
select, textarea {
  width: 100%;
  font-family: var(--f-texte);
  font-size: var(--t-500);
  line-height: 1.4;
  color: var(--encre);
  background: var(--fond-creux);
  border: 1px solid var(--trait);
  border-radius: var(--r-sm);
  padding: 0.65rem 0.85rem;
  box-shadow: inset 0 1px 2px rgba(22, 33, 28, .04);
  transition:
    border-color var(--vif) var(--doux),
    background-color var(--vif) var(--doux),
    box-shadow var(--pose) var(--doux);
}

.saisie::placeholder, input::placeholder, textarea::placeholder {
  color: var(--encre-3);
  opacity: 1;
}

.saisie:hover, input:hover, select:hover, textarea:hover { border-color: var(--trait-fort); }

/* Le focus : le creux s'éclaire et l'anneau laiton se pose. */
.saisie:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--laiton);
  box-shadow: 0 0 0 3px var(--laiton-voile);
}

textarea { resize: vertical; min-height: 6rem; line-height: 1.55; }

select {
  appearance: none;
  padding-right: 2.4rem;
  /* Le chevron est dessiné en CSS : aucun asset, et il suit la couleur. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--encre-3) 50%),
    linear-gradient(135deg, var(--encre-3) 50%, transparent 50%);
  background-position: right 1.05rem center, right 0.75rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Les codes de salon et les PIN se lisent chiffre par chiffre. */
.saisie.code {
  font-family: var(--f-mono);
  font-size: var(--t-800);
  letter-spacing: 0.32em;
  text-align: center;
  text-transform: uppercase;
  padding-inline: 0.5rem;
}

/* ── Aide et erreur ──────────────────────────────────────────────────────── */
.aide {
  font-size: var(--t-300);
  color: var(--encre-3);
  line-height: 1.45;
}

.champ[data-etat="erreur"] .saisie,
.champ[data-etat="erreur"] input,
.champ[data-etat="erreur"] select,
.champ[data-etat="erreur"] textarea {
  border-color: var(--danger);
  background: var(--danger-voile);
}
.champ[data-etat="erreur"] .saisie:focus,
.champ[data-etat="erreur"] input:focus { box-shadow: 0 0 0 3px var(--danger-voile); }
.champ[data-etat="erreur"] .aide { color: var(--danger); }

/* Un champ refusé se signale une fois, brièvement. */
.champ[data-etat="erreur"] { animation: secouer var(--ample) var(--doux); }

/* ── Case à cocher et interrupteur ───────────────────────────────────────── */
.case {
  display: inline-flex;
  align-items: center;
  gap: var(--pas-2);
  cursor: pointer;
  font-size: var(--t-400);
  color: var(--encre);
  user-select: none;
}
.case input[type="checkbox"],
.case input[type="radio"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--feutre);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  box-shadow: none;
}

/* L'interrupteur : marche/arrêt d'un jeu, affichage d'un bandeau. */
.interrupteur {
  display: inline-flex;
  align-items: center;
  gap: var(--pas-3);
  cursor: pointer;
  font-size: var(--t-400);
  user-select: none;
}
.interrupteur input { position: absolute; opacity: 0; width: 0; height: 0; }
.interrupteur .piste {
  position: relative;
  width: 2.6rem;
  height: 1.5rem;
  flex-shrink: 0;
  border-radius: var(--r-pilule);
  background: var(--trait-fort);
  border: 1px solid var(--trait-fort);
  transition: background-color var(--pose) var(--doux), border-color var(--pose) var(--doux);
}
.interrupteur .piste::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--pose-1);
  transform: translateY(-50%);
  transition: transform var(--pose) var(--rebond);
}
.interrupteur input:checked + .piste { background: var(--feutre); border-color: var(--feutre-fonce); }
.interrupteur input:checked + .piste::after { transform: translateY(-50%) translateX(1.08rem); }
.interrupteur input:focus-visible + .piste { box-shadow: 0 0 0 3px var(--laiton-trait); }

/* ── Groupes ─────────────────────────────────────────────────────────────── */
.champs {
  display: grid;
  gap: var(--pas-4);
}
@media (min-width: 640px) {
  .champs.deux { grid-template-columns: repeat(2, 1fr); }
}

/* La ligne de boutons qui clôt un formulaire. */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pas-2);
  align-items: center;
  margin-top: var(--pas-2);
}
.actions .pousse { margin-left: auto; }