/*
 * REVOIR MA PARTIE (17/10/2026) — la revue question par question, en fin de partie.
 * Logique : script/js/qzr-revue-partie.js (dessin) et quizz.online.realtime-solo.js
 * (historique, ligne du menu « … », SEULE entrée : pas de bouton sur la fiche de
 * fin, demande du propriétaire du 17/10). Maquette validée par le propriétaire :
 * https://claude.ai/artifact/LTV6ftPMLeJdsd2Zdf62sj
 *
 * Jetons vNext seulement (thèmes et mode sombre suivent) : aucun hexadécimal en dur.
 * Même gabarit que la fiche de fin (#scoreModal) : une feuille montée du bas,
 * pleine largeur sur téléphone, 460 px au centre au-delà.
 */

/* ── La feuille ──────────────────────────────────────────────────────────── */
/* Pas de verrou de fond propre : la revue s'ouvre au-dessus de la fiche de fin,
   dont la page est déjà figée (body.realtime-active, verrou connu de la racine,
   cf. tests/Feature/CoqueMobileLot0Test.php). */
.qzr-revue {
  position: fixed;
  inset: 0;
  z-index: 1250;   /* au-dessus de la fiche de fin et du menu « … » (1200) */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Le body de l'application porte .text-center (Bootstrap) : la revue se lit
     de gauche à droite, comme la maquette (recette du 17/10). */
  text-align: left;
}
.qzr-revue__voile {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--qz-text) 45%, transparent);
}
.qzr-revue__feuille {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: 92vh;
  height: 92dvh;
  display: flex;
  flex-direction: column;
  background: var(--qz-screen);
  color: var(--qz-text);
  border-radius: 26px 26px 0 0;
  box-shadow: var(--qz-shadow-md, none);
  overflow: hidden;
  animation: qzrRevueMonte .28s var(--qz-ease, ease) both;
}
@keyframes qzrRevueMonte { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .qzr-revue__feuille { animation: none; } }

.qzr-revue__vue { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.qzr-revue__tete { display: flex; align-items: center; gap: 12px; padding: 14px 16px 8px; }
.qzr-revue__titres { flex: 1; min-width: 0; }
.qzr-revue__vue--detail .qzr-revue__titres { text-align: center; }
.qzr-revue__titre {
  margin: 0;
  font-family: 'Alfa Slab One', serif;
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--qz-accent-ink);
  outline: none;
}
.qzr-revue__vue--detail .qzr-revue__titre {
  font-family: inherit;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--qz-text);
}
.qzr-revue__sous {
  margin: 2px 0 0;
  font-size: .82rem;
  font-weight: 700;
  color: var(--qz-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qzr-revue__rond {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--qz-line);
  background: var(--qz-surface);
  color: var(--qz-accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
}
.qzr-revue__defil {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Couleurs de résultat : réussie · ratée · partielle · sans réponse ──── */
/* Mêmes couleurs que PENDANT la partie (demande du propriétaire, 17/10) :
   réussie = la tuile juste du solo (vnext-play.css : fond --qz-screen,
   bordure --qz-accent du thème, encre --qz-success-ink) ; ratée = l'erreur
   de la partie, orange (--qz-error*), pas le rouge des alertes.
   Les pastilles, numéros et points qui portent ces classes déclarent leur
   bordure en border-width + border-style, JAMAIS en raccourci « border: 1px
   solid » : déclaré plus bas, le raccourci remet border-color à currentColor
   et la réussie prenait l'encre verte au lieu de l'accent. */
.qzr-revue--ok { background: var(--qz-screen); border-color: var(--qz-accent); color: var(--qz-success-ink); }
.qzr-revue--ko { background: var(--qz-error-bg); border-color: var(--qz-error); color: var(--qz-error-ink); }
.qzr-revue--partiel { background: var(--qz-warning-bg); border-color: var(--qz-warning); color: var(--qz-warning-ink); }
.qzr-revue--temps { background: color-mix(in srgb, var(--qz-muted) 14%, var(--qz-surface)); border-color: color-mix(in srgb, var(--qz-muted) 60%, transparent); color: var(--qz-text); }
.qzr-revue-ink--ok { color: var(--qz-success-ink); }
.qzr-revue-ink--ko { color: var(--qz-error-ink); }
.qzr-revue-ink--partiel { color: var(--qz-warning-ink); }
.qzr-revue-ink--temps { color: var(--qz-muted); }
/* Question d'écoute passée (parcours de langues) : ni réussie ni ratée. */
.qzr-revue--passee { background: var(--qz-surface); border-color: color-mix(in srgb, var(--qz-muted) 45%, transparent); border-style: dashed; color: var(--qz-muted); }
.qzr-revue-ink--passee { color: var(--qz-muted); }
.qzr-revue__entendu { margin: 0 0 10px; font-size: .95rem; font-weight: 700; color: var(--qz-text); }

/* ── Vue d'ensemble ──────────────────────────────────────────────────────── */
.qzr-revue__bilan {
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: 20px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.qzr-revue__bilan-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.qzr-revue__score { font-size: 1.15rem; font-weight: 900; }
.qzr-revue__xp { font-size: .9rem; font-weight: 900; color: var(--qz-accent-ink); }
.qzr-revue__frise { display: flex; gap: 4px; }
.qzr-revue__segment {
  flex: 1 1 0;
  min-width: 0;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: var(--qz-r-pill, 999px);
  cursor: pointer;
}
.qzr-revue__segment.qzr-revue--ok, .qzr-revue__pastille.qzr-revue--ok { background: var(--qz-accent); }
.qzr-revue__segment.qzr-revue--ko, .qzr-revue__pastille.qzr-revue--ko { background: var(--qz-error); }
.qzr-revue__segment.qzr-revue--partiel, .qzr-revue__pastille.qzr-revue--partiel { background: var(--qz-warning); }
.qzr-revue__segment.qzr-revue--temps, .qzr-revue__pastille.qzr-revue--temps { background: color-mix(in srgb, var(--qz-muted) 55%, var(--qz-surface)); }
.qzr-revue__segment.qzr-revue--passee, .qzr-revue__pastille.qzr-revue--passee { background: color-mix(in srgb, var(--qz-muted) 25%, var(--qz-surface)); }
.qzr-revue__legende { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; font-weight: 700; color: var(--qz-muted); }
.qzr-revue__leg { display: inline-flex; align-items: center; gap: 6px; }
.qzr-revue__pastille { width: 10px; height: 10px; border-radius: 50%; }
.qzr-revue__note { margin: 0; font-size: .8rem; font-weight: 700; color: var(--qz-muted); }

.qzr-revue__filtres {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: var(--qz-r-pill, 999px);
  background: var(--qz-accent-soft);
}
.qzr-revue__filtre {
  flex: 1;
  min-height: 40px;
  border: none;
  border-radius: var(--qz-r-pill, 999px);
  background: transparent;
  color: var(--qz-accent-ink);
  font: inherit;
  font-size: .88rem;
  font-weight: 800;
  cursor: pointer;
}
.qzr-revue__filtre[aria-pressed="true"] { background: var(--qz-surface); color: var(--qz-text); box-shadow: var(--qz-shadow-sm, none); }

.qzr-revue__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.qzr-revue__ligne {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  text-align: left;
  border: 1px solid var(--qz-line);
  border-radius: 16px;
  background: var(--qz-surface);
  color: var(--qz-text);
  font: inherit;
  cursor: pointer;
}
.qzr-revue__num {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border-width: 1px; border-style: solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  font-weight: 900;
}
.qzr-revue__ligne-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qzr-revue__ligne-q {
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qzr-revue__ligne-r { font-size: .8rem; font-weight: 700; }
.qzr-revue__chev { flex: none; color: var(--qz-accent-deep); }
.qzr-revue__vide { margin: 0; text-align: center; font-weight: 700; color: var(--qz-muted); }

/* ── Une question ────────────────────────────────────────────────────────── */
.qzr-revue__points {
  display: flex;
  gap: 4px;
  justify-content: space-between;
  padding: 6px 16px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.qzr-revue__point {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border-width: 1px; border-style: solid;
  font: inherit;
  font-size: .75rem;
  font-weight: 900;
  cursor: pointer;
}
/* !important : crs__front.css pose `* { outline: none !important }` sur toute l'app. */
.qzr-revue__point[aria-current="step"] { outline: 4px solid var(--qz-100) !important; outline-offset: 1px; }
.qzr-revue__point.is-hors-filtre { opacity: .35; }

.qzr-revue__carte {
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: 20px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.qzr-revue__carte-haut { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qzr-revue__statut {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--qz-r-pill, 999px);
  border-width: 1px; border-style: solid;
  font-size: .8rem;
  font-weight: 900;
}
.qzr-revue__type { font-size: .78rem; font-weight: 800; color: var(--qz-muted); }
.qzr-revue__enonce { margin: 0; font-size: 1.12rem; font-weight: 900; line-height: 1.35; outline: none; overflow-wrap: anywhere; }

.qzr-revue__options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.qzr-revue__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--qz-line);
  background: var(--qz-surface);
}
.qzr-revue__lettre {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 900;
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
}
.qzr-revue__option-l { flex: 1; min-width: 0; font-size: .95rem; font-weight: var(--qz-fw-strong, 600); color: var(--qz-text); line-height: 1.3; overflow-wrap: anywhere; }
.qzr-revue__tag { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 900; }
/* Tuiles : celles du solo (vnext-play.css .answer-btn) — bordure 1 px, libellé
   en --qz-text dans tous les états, la lettre et l'icône portent le verdict,
   les autres propositions atténuées comme à la révélation. */
.qzr-revue__option--tienneBonne, .qzr-revue__option--bonne { background: var(--qz-screen); border-color: var(--qz-accent); }
.qzr-revue__option--tienneFausse { background: var(--qz-error-bg); border-color: var(--qz-error); }
.qzr-revue__option--neutre { opacity: .5; }
.qzr-revue__option--tienneBonne .qzr-revue__lettre, .qzr-revue__option--bonne .qzr-revue__lettre { background: var(--qz-accent); color: var(--qz-on-accent); }
.qzr-revue__option--tienneFausse .qzr-revue__lettre { background: var(--qz-error); color: white; }
.qzr-revue__option--tienneBonne .qzr-revue__option-l, .qzr-revue__option--bonne .qzr-revue__option-l,
.qzr-revue__option--tienneFausse .qzr-revue__option-l { color: var(--qz-text); font-weight: 800; }
.qzr-revue__option--tienneBonne .qzr-revue__tag, .qzr-revue__option--bonne .qzr-revue__tag { color: var(--qz-success-ink); }
.qzr-revue__option--tienneBonne .qzr-revue__tag i, .qzr-revue__option--bonne .qzr-revue__tag i { color: var(--qz-accent); }
.qzr-revue__option--tienneFausse .qzr-revue__tag { color: var(--qz-error-ink); }

/* Trous : ceux de la correction en partie (style-realtime.css .realtime-text-blank
   .is-hit / .is-miss) — succès en vert, erreur en orange, réponse fausse barrée. */
.qzr-revue__saisie { padding: 10px 14px; border-radius: 14px; border-width: 1px; border-style: solid; display: flex; flex-direction: column; gap: 2px; }
.qzr-revue__saisie--ok, .qzr-revue__saisie--attendu { background: var(--qz-success-bg); border-color: var(--qz-success); color: var(--qz-success-ink); }
.qzr-revue__saisie--ko { background: var(--qz-error-bg); border-color: var(--qz-error); color: var(--qz-error-ink); }
.qzr-revue__saisie--ko .qzr-revue__saisie-v { text-decoration: line-through; text-decoration-color: var(--qz-error); }
.qzr-revue__saisie-k { font-size: .75rem; font-weight: 900; }
.qzr-revue__saisie--ok .qzr-revue__saisie-k, .qzr-revue__saisie--attendu .qzr-revue__saisie-k { color: var(--qz-success-ink); }
.qzr-revue__saisie--ko .qzr-revue__saisie-k { color: var(--qz-error-ink); }
.qzr-revue__saisie-v { font-size: 1.05rem; font-weight: 900; overflow-wrap: anywhere; }
.qzr-revue__etiquettes { margin: 0; font-size: .8rem; font-weight: 700; color: var(--qz-muted); }
/* Exercice de langue (socle S3) : le « presque » compte juste, avec la
   remarque ; les ecarts sont marques dans la reponse attendue. */
.qzr-revue__presque { margin: 2px 0 0; font-size: .8rem; font-weight: 800; color: var(--qz-success-ink); }
.qzr-revue__ecart { padding: 0 1px; background: var(--qz-warning-bg); border-bottom: 2px solid var(--qz-warning); border-radius: 3px; }

.qzr-revue__paires, .qzr-revue__etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.qzr-revue__paire, .qzr-revue__etape { padding: 10px 12px; border-radius: 14px; border-width: 1px; border-style: solid; }
.qzr-revue__paire--ok, .qzr-revue__etape--ok { background: var(--qz-success-bg); border-color: var(--qz-success); color: var(--qz-success-ink); }
.qzr-revue__paire--ko, .qzr-revue__etape--ko { background: var(--qz-error-bg); border-color: var(--qz-error); color: var(--qz-error-ink); }
.qzr-revue__etape--attendu { background: var(--qz-surface); border-color: var(--qz-line); }
.qzr-revue__paire-haut { display: flex; align-items: center; gap: 8px; }
.qzr-revue__gauche {
  flex: none;
  max-width: 45%;
  padding: 3px 8px;
  border-radius: 8px;
  border: 1px solid var(--qz-line);
  background: var(--qz-surface);
  font-size: .82rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.qzr-revue__fleche { flex: none; color: var(--qz-muted); }
.qzr-revue__droite { flex: 1; min-width: 0; font-size: .88rem; font-weight: 800; overflow-wrap: anywhere; }
.qzr-revue__paire--ok .qzr-revue__paire-ic, .qzr-revue__etape-ic { color: var(--qz-success-ink); }
.qzr-revue__paire--ko .qzr-revue__paire-ic { color: var(--qz-error-ink); }
.qzr-revue__bonne { margin-top: 4px; font-size: .8rem; font-weight: 800; color: var(--qz-success-ink); }
.qzr-revue__etape { display: flex; align-items: center; gap: 10px; }
.qzr-revue__rang {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--qz-line);
  background: var(--qz-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 900;
}
.qzr-revue__etape-l { flex: 1; min-width: 0; font-size: .88rem; font-weight: 800; overflow-wrap: anywhere; }
.qzr-revue__etape-place { flex: none; font-size: .75rem; font-weight: 900; color: var(--qz-error-ink); }
.qzr-revue__sous-titre { margin: 4px 0 0; font-size: .8rem; font-weight: 900; color: var(--qz-success-ink); }

.qzr-revue__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--qz-line);
}
.qzr-revue__temps { font-size: .82rem; font-weight: 700; color: var(--qz-muted); }
.qzr-revue__gain {
  flex: none;
  padding: 4px 10px;
  border-radius: var(--qz-r-pill, 999px);
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
  font-size: .82rem;
  font-weight: 900;
}
.qzr-revue__gain.is-nul { background: color-mix(in srgb, var(--qz-muted) 14%, var(--qz-surface)); color: var(--qz-text); }

.qzr-revue__explication {
  background: var(--qz-accent-soft);
  border: 1px solid var(--qz-line);
  border-radius: 20px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qzr-revue__expl-tete { display: flex; align-items: center; gap: 8px; color: var(--qz-accent-ink); font-size: 1rem; font-weight: 900; }
.qzr-revue__expl-texte { margin: 0; font-size: .95rem; font-weight: 600; line-height: 1.5; color: var(--qz-text); overflow-wrap: anywhere; }
.qzr-revue__expl-texte.is-vide { color: var(--qz-muted); font-style: italic; }
.qzr-revue__source { align-self: flex-start; padding: 6px 0; font-size: .85rem; font-weight: 800; color: var(--qz-accent-ink); }
.qzr-revue__signaler {
  align-self: center;
  min-height: 44px;
  padding: 0 14px;
  border: none;
  background: transparent;
  color: var(--qz-muted);
  font: inherit;
  font-size: .85rem;
  font-weight: 800;
  cursor: pointer;
}

.qzr-revue__pied {
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--qz-surface);
  border-top: 1px solid var(--qz-line);
}
.qzr-revue__nav {
  flex: 1;
  min-height: 50px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-size: .95rem;
  font-weight: 900;
  cursor: pointer;
}
.qzr-revue__nav--prec { border: 2px solid var(--qz-line); background: var(--qz-surface); color: var(--qz-accent-ink); }
.qzr-revue__nav--suiv { border: none; border-bottom: 3px solid var(--qz-accent-deep); background: var(--qz-accent); color: var(--qz-on-accent); }
.qzr-revue__nav:disabled { opacity: .4; cursor: default; }
.qzr-revue :focus-visible { outline: 3px solid var(--qz-accent-mid); outline-offset: 2px; }