/* LIRE ET ÉCRIRE UN SÉLECTEUR
   Le HTML à gauche, la règle à droite. Sur téléphone, l'un sous l'autre. */

.sel-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 800px) {
  .sel-grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 12px;
  white-space: nowrap;
}

.ligne[role="checkbox"] {
  cursor: pointer;
  user-select: none;
}

.ligne[role="checkbox"]:hover,
.ligne.is-survol {
  background: rgba(0, 0, 0, 0.04);
}

.ligne:focus-visible {
  outline: 2px solid var(--brand, #c07c1f);
  outline-offset: -2px;
}

/* Le code a déjà son filet : une ligne cochée ou surlignée ne se
   distingue que par son fond. */

/* Lire : les lignes que l'élève a cochées. */
.ligne.is-coche,
.ligne.is-coche:hover {
  background: rgba(192, 124, 31, 0.22);
}

/* Écrire : les lignes à cibler, surlignées comme le ferait la règle
   « background: yellow ». */
.ligne.is-surligne {
  background: #fff3a6;
}

.ligne__verdict {
  margin-left: auto;
  padding: 0 8px;
  border-radius: 4px;
  font: 700 12px/1.7 'Open Sans', Arial, sans-serif;
  color: white;
}

.is-juste .ligne__verdict { background: var(--jeu-juste); }
.is-oubli .ligne__verdict { background: var(--jeu-oubli); }
.is-trop .ligne__verdict { background: var(--jeu-rate); }

.sel-code {
  padding: 14px 16px;
  font-size: 18px;
  line-height: 1.8;
  white-space: pre;
}

.sel-saisie {
  min-width: calc(12ch + 12px);
  max-width: 100%;
  padding: 0 6px;
  border: 0;
  border-bottom: 2px solid var(--brand, #c07c1f);
  border-radius: 3px 3px 0 0;
  background: var(--jeu-papier);
  color: #a0522d;
  font: inherit;
}

.sel-saisie:focus {
  outline: none;
  background: var(--brand-pale, #fbeedb);
}

.sel-saisie::placeholder {
  color: var(--jeu-discret);
  opacity: 0.6;
}