/* ============================================================================
   Quiz avec classement — /quiz/ et /quiz/{slug}/
   ----------------------------------------------------------------------------
   Feuille AUTONOME, chargée uniquement sur les pages de quiz par le module
   aam-core. Elle n'ajoute rien à main.css et ne redéfinit aucune classe yd-* :
   tout est préfixé aam-qz pour ne pas croiser le composant .aam-quiz des
   articles, qui vit dans main.css et garde son propre style.

   Les couleurs, espacements, rayons et durées viennent des jetons du thème.
   Aucune valeur en dur, sauf les largeurs de colonnes du classement.
   ========================================================================= */

.aam-qz {
  max-width: 46rem;
  margin-inline: auto;
}

/* ── Version sans JavaScript : la page reste complète et lisible ─────────── */

.aam-qz__intro {
  margin: 0 0 var(--space-6);
  color: var(--color-ink-muted);
}

.aam-qz__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: aam-qz;
  display: grid;
  gap: var(--space-6);
}

.aam-qz__item {
  counter-increment: aam-qz;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  padding: var(--space-5);
}

.aam-qz__item .aam-qz__enonce::before {
  content: counter(aam-qz) ". ";
  color: var(--color-ink-brand);
  font-variant-numeric: tabular-nums;
}

.aam-qz__choix-statique {
  margin: var(--space-3) 0 var(--space-4);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.aam-qz__choix-statique li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.aam-qz__lettre {
  flex: 0 0 1.4rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-ink-brand);
}

.aam-qz__correction summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-brand);
}

.aam-qz__correction summary:focus-visible {
  outline: 2px solid var(--color-line-brand);
  outline-offset: 2px;
}

.aam-qz__correction p {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-ink-brand);
  background-color: var(--color-surface-brand-subtle);
  font-size: var(--text-sm);
  line-height: 1.55;
}

/* ── Le jeu ─────────────────────────────────────────────────────────────── */

.aam-qz__jeu {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

.aam-qz__tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.aam-qz__avancee {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.aam-qz__points {
  color: var(--color-ink-subtle);
  font-variant-numeric: tabular-nums;
}

/* La jauge d'avancement est décorative : le compteur « 3 / 8 » juste au-dessus
   porte la même information en texte, lisible par un lecteur d'écran. */
.aam-qz__barre {
  margin: var(--space-3) 0 var(--space-6);
  height: 3px;
  background-color: var(--color-line);
  border-radius: 999px;
  overflow: hidden;
}

.aam-qz__jauge {
  display: block;
  height: 100%;
  width: 0;
  background-color: var(--color-primary);
  transition: width var(--duration-base) var(--ease-out-cubic);
}

.aam-qz__enonce {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.aam-qz__choix {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
}

.aam-qz__opt {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  min-height: 3rem; /* cible tactile confortable au pouce */
  margin: 0;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-ink);
  background-color: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-out-cubic),
    background-color var(--duration-fast) var(--ease-out-cubic);
}

.aam-qz__opt:hover:not(:disabled),
.aam-qz__opt:focus-visible {
  border-color: var(--color-line-brand);
  background-color: var(--color-surface-brand-subtle);
}

.aam-qz__opt:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.aam-qz__opt:disabled {
  cursor: default;
}

.aam-qz__opt-lettre {
  flex: 0 0 1.4rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-ink-brand);
  padding-top: 2px;
}

/* Juste et faux ne se distinguent pas que par la couleur : la bonne réponse
   reçoit un liseré épais à gauche, la mauvaise un texte barré. */
.aam-qz__opt.est-juste {
  border-color: var(--color-success-border);
  background-color: var(--color-success-subtle);
  color: var(--color-success-ink);
  box-shadow: inset 3px 0 0 0 var(--color-success);
}

.aam-qz__opt.est-juste .aam-qz__opt-lettre {
  color: var(--color-success-ink);
}

.aam-qz__opt.est-faux {
  border-color: var(--color-danger-border);
  background-color: var(--color-danger-subtle);
  color: var(--color-danger-ink);
}

.aam-qz__opt.est-faux .aam-qz__opt-texte {
  text-decoration: line-through;
}

.aam-qz__opt.est-faux .aam-qz__opt-lettre {
  color: var(--color-danger-ink);
}

.aam-qz__retour {
  margin: var(--space-5) 0 0;
  padding: var(--space-4);
  border-left: 3px solid var(--color-line-strong);
  background-color: var(--color-surface-sunken);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.aam-qz__retour.est-juste {
  border-left-color: var(--color-success);
  background-color: var(--color-success-subtle);
}

.aam-qz__retour.est-faux {
  border-left-color: var(--color-danger);
  background-color: var(--color-danger-subtle);
}

.aam-qz__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.aam-qz__jeu--fin {
  text-align: center;
}

.aam-qz__jeu--fin .aam-qz__actions {
  justify-content: center;
}

.aam-qz__score {
  margin: 0;
  font-size: var(--text-3xl);
  line-height: var(--text-3xl-lh);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.aam-qz__verdict {
  margin: var(--space-3) 0 0;
  color: var(--color-ink-muted);
}

/* ── Formulaire de pseudo ───────────────────────────────────────────────── */

.aam-qz__form {
  margin-top: var(--space-8);
  padding: var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-sunken);
}

.aam-qz__form h2 {
  margin: 0 0 var(--space-2);
}

.aam-qz__form p {
  margin: 0 0 var(--space-4);
}

.aam-qz__form-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.aam-qz__champ {
  flex: 1 1 14rem;
  min-width: 0;
  height: 3.5rem;
  padding-inline: var(--space-4);
  font: inherit;
  color: var(--color-ink);
  background-color: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
}

.aam-qz__champ:focus-visible {
  outline: none;
  border-color: var(--color-line-brand);
  box-shadow: var(--shadow-focus);
}

.aam-qz__form-message {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-ink-muted);
}

.aam-qz__form-message.est-erreur {
  color: var(--color-danger-ink);
}

/* ── Classement ─────────────────────────────────────────────────────────── */

.aam-qz__classement {
  margin-top: var(--space-10);
}

.aam-qz__classement h2 {
  margin: 0 0 var(--space-4);
}

/* Un tableau ne déborde jamais la page : il défile dans son propre cadre. */
.aam-qz__table-enveloppe {
  overflow-x: auto;
}

.aam-qz-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.aam-qz-table th,
.aam-qz-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-line);
  vertical-align: baseline;
}

.aam-qz-table thead th {
  font-size: var(--text-label);
  line-height: var(--text-label-lh);
  letter-spacing: var(--text-label-ls);
  text-transform: uppercase;
  color: var(--color-ink-subtle);
  background-color: var(--color-surface-sunken);
  white-space: nowrap;
}

.aam-qz-table__rang {
  width: 4rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-subtle);
}

.aam-qz-table__score {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
}

.aam-qz-table__vide td {
  color: var(--color-ink-muted);
  font-style: italic;
}

/* ── Quiz voisins ───────────────────────────────────────────────────────── */

.aam-qz-voisins__tous {
  margin-top: var(--space-6);
}

/* ── Hub /quiz/ ─────────────────────────────────────────────────────────── */

.aam-qz-hub__compte {
  color: var(--color-ink-muted);
}

.aam-qz-hub__groupe {
  margin-top: var(--space-10);
}

.aam-qz-hub__groupe h2 {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-line);
}

.aam-qz-hub__nombre {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-ink-subtle);
  font-variant-numeric: tabular-nums;
}

.aam-qz-hub__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.aam-qz-hub__liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding-block: var(--space-1);
}

.aam-qz-hub__lien {
  font-weight: 500;
}

.aam-qz-hub__meta {
  font-size: var(--text-xs);
  color: var(--color-ink-subtle);
  font-variant-numeric: tabular-nums;
}

.aam-qz-hub__semaine .aam-qz-table {
  margin-top: var(--space-2);
}

/* ── Mouvement réduit ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .aam-qz__jauge,
  .aam-qz__opt {
    transition: none;
  }
}