/* ------------------------------------------------------------
   forms-extra.css — chips, upload d'images, sélecteur d'avatar,
   liste d'arguments (lot 01)
   Référence : handoffs/01-composants/screenshots/06-formulaire.png
   ------------------------------------------------------------ */

/* Une chip est un <label class="chip"><input type="radio" class="sr-only">
   <span>…</span></label> : la vraie sélection reste un input natif
   (accessible, pas de JS pour gérer l'état), seul le <span> est stylé. */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--field);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 15px;
}
.chip input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.chip input:focus-visible + span {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Upload d'images ---------- */
.upload-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
}

.upload-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-2);
}
.upload-tile img { width: 100%; height: 100%; object-fit: cover; }
.upload-tile__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--scrim);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.upload-tile__remove::before {
  content: "";
  position: absolute;
  inset: -10px;
}

.upload-add {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  border: 1px dashed var(--field);
  color: var(--accent);
  background: transparent;
  display: grid;
  place-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- Sélecteur d'avatar ---------- */
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
}
.avatar-option { position: relative; display: grid; gap: 6px; text-align: center; cursor: pointer; }
.avatar-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.avatar-option__pic {
  aspect-ratio: 3 / 4;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--muted);
}
.avatar-option input:checked ~ .avatar-option__pic {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  background: var(--tint);
}
.avatar-option__name { font-size: 12px; color: var(--muted); }

/* ---------- Liste d'arguments ---------- */
.arg-list { display: grid; gap: var(--sp-2); }
.arg-row { display: flex; gap: var(--sp-2); align-items: center; }
.arg-row .input { flex: 1; }
.arg-row__remove {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
}