/* ===========================================================================
 * « Réviser mes erreurs (N) » — parcours de langues, MVP lot 3
 * (script/js/qzr-revision-erreurs.js, slices/revision.erreurs.php).
 *
 * Deux places :
 *   - le héros d'un parcours de langue (fond teal) : une pastille translucide,
 *     entre le bouton principal et les liens « Classement » / « Tester mon son » ;
 *   - la page du thème de la langue (ANGL, FRAN) : une carte sous « Reprendre »,
 *     même dessin que les lignes « Aussi en cours » (surface, filet, rayon de carte).
 * Posés CACHÉS ([hidden]) : rien ne s'affiche tant que le vivier est vide.
 * Couleurs : jetons --qz-* seulement (plafond hexadécimal du banc UiVisualLanguage).
 * ======================================================================== */

.qzr-revision-btn[hidden],
.qzr-revision-carte[hidden] {
  display: none !important;
}

.qzr-revision-btn.is-loading {
  opacity: .75;
  cursor: progress;
}

/* ---- dans le héros du chemin ---- */
[data-qz-skin="parcours"] .qzr-path-hero .qzr-revision-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: var(--qz-r-pill);
  background: rgba(255, 255, 255, .16);
  color: white;
  font: inherit;
  font-size: var(--qz-fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  cursor: pointer;
}
[data-qz-skin="parcours"] .qzr-path-hero .qzr-revision-btn:focus-visible {
  outline: 2px solid white !important;
  outline-offset: 2px;
}

/* ---- sur la page du thème ---- */
[data-qz-skin="parcours"] .qzr-revision-carte {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 12px;
  padding: 12px;
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
  color: var(--qz-text);
  text-align: left;
}
[data-qz-skin="parcours"] .qzr-revision-carte__ic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--qz-accent-soft);
  color: var(--qz-accent);
  font-size: 1.05rem;
}
[data-qz-skin="parcours"] .qzr-revision-carte__txt {
  display: grid;
  gap: 1px;
  min-width: 0;
}
[data-qz-skin="parcours"] .qzr-revision-carte__txt strong {
  font-size: var(--qz-fs-body);
  font-weight: var(--qz-fw-strong);
}
[data-qz-skin="parcours"] .qzr-revision-carte__txt small {
  font-size: var(--qz-fs-sm);
  color: var(--qz-muted);
  font-variant-numeric: tabular-nums;
}
[data-qz-skin="parcours"] .qzr-revision-carte .qzr-revision-btn {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 44px;
  font-variant-numeric: tabular-nums;
}
[data-qz-skin="parcours"] .qzr-revision-carte .qzr-revision-btn:focus-visible {
  outline: none !important;
  box-shadow: var(--qz-focus-ring);
}
/* Assez large : le bouton revient à droite du texte. */
@media (min-width: 560px) {
  [data-qz-skin="parcours"] .qzr-revision-carte {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  [data-qz-skin="parcours"] .qzr-revision-carte .qzr-revision-btn {
    grid-column: auto;
    width: auto;
  }
}