/* ===========================================================================
   Modération — feuille de signalement et actions associées.
   Markup : script/js/qzr-moderation.js
   Réutilise l'ossature .mp-modal des autres bottom sheets vNext ; seul
   l'intérieur du panneau est habillé ici.
   =========================================================================== */

.qzr-mod-panel { max-height: 88vh; overflow-y: auto; }

.qzr-mod-body { padding: 4px 16px 18px; text-align: left; }

.qzr-mod-target {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: var(--qz-r-sm, 8px);
  background: color-mix(in srgb, var(--qz-surface) 82%, transparent);
  border: 1px solid var(--qz-line);
  font-size: .82rem;
  font-weight: 700;
  color: var(--qz-text);
  /* Un intitulé long ne doit pas pousser la feuille en largeur. */
  overflow-wrap: anywhere;
}

.qzr-mod-lead {
  margin: 0 0 10px;
  font-size: .86rem;
  font-weight: 800;
  color: var(--qz-text);
}

.qzr-mod-reasons {
  display: grid;
  gap: 2px;
  margin-bottom: 14px;
}

.qzr-mod-reason {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-radius: var(--qz-r-sm, 8px);
  font-size: .84rem;
  color: var(--qz-text);
  cursor: pointer;
}

.qzr-mod-reason:hover { background: color-mix(in srgb, var(--qz-accent) 7%, transparent); }

.qzr-mod-reason input { accent-color: var(--qz-accent-deep); flex: 0 0 auto; }

.qzr-mod-details-label {
  display: block;
  margin-bottom: 5px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--qz-muted, #5E8A7C);
}

.qzr-mod-details {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-sm, 8px);
  background: var(--qz-surface);
  color: var(--qz-text);
  font: inherit;
  font-size: .84rem;
  resize: vertical;
}

/* L'engagement de traitement sous 24 h est une exigence de la guideline 1.2 :
   il doit être visible à l'endroit où l'utilisateur signale, pas seulement
   enfoui dans les conditions d'utilisation. */
.qzr-mod-sla {
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 12px 0 0;
  font-size: .76rem;
  color: var(--qz-muted, #5E8A7C);
}

.qzr-mod-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.qzr-mod-actions .btn-ux { flex: 1 1 0; }

.qzr-mod-feedback {
  min-height: 18px;
  margin: 8px 0 0;
  font-size: .78rem;
  font-weight: 700;
  color: var(--qz-muted, #5E8A7C);
}

/* Lignes « Signaler » / « Bloquer » de la fiche joueur : même gabarit que les
   autres .mp-manage-row, teintées pour se lire comme des actions de retrait. */
.pp-report .mp-manage-ic,
.pp-block  .mp-manage-ic {
  color: #b3261e;
  background: color-mix(in srgb, #b3261e 8%, transparent);
}

@media (prefers-color-scheme: dark) {
  .pp-report .mp-manage-ic,
  .pp-block  .mp-manage-ic {
    color: #ff8a80;
    background: color-mix(in srgb, #ff8a80 12%, transparent);
  }
}

/* ---------------------------------------------------------------------------
   « Signaler ce quiz » — guideline 1.2.
   Markup : script/js/quizz.online.realtime.js (syncQuizReportRow), pose sur la
   feuille « Cette partie » (pendant le jeu) et sur le récapitulatif final
   (après le jeu). La ligne EST une .mp-manage-row .pp-report : elle hérite donc
   du gabarit et de la pastille rouge de « Signaler ce joueur », et ce bloc ne
   fait que la placer dans ses deux hôtes.

   Les deux sélecteurs sont préfixés par l'ID de leur modale : ui-visual-language
   .css impose des règles globales très offensives sur les <button>, et la
   feuille de session est déjà écrite ainsi (style/realtime/vnext-session.css).
   --------------------------------------------------------------------------- */
#sessionInfoModal .qzr-quiz-report {
  margin: 18px 0 0;
}

/* Au récapitulatif, la ligne se pose en bas de la zone défilante, sous les KPI
   et le podium : c'est une issue de secours, pas une action de fin de partie.
   Elle suit la largeur de la carte (460 px max) plutôt que de s'étaler. */
#scoreModal .qzr-quiz-report {
  width: 100%;
  max-width: 380px;
  margin: 20px auto 6px;
}

/* ---------------------------------------------------------------------------
   « Signaler cette question » — la maille fine.
   Markup : script/js/quizz.online.realtime.js (syncQuestionReportRow). Même
   gabarit et même pastille que la ligne quizz : c'est le même geste, à une
   autre échelle, et une seconde façon de le dire ne ferait qu'hésiter.

   Deux hôtes, complémentaires de ceux de la ligne quizz : la feuille « Cette
   partie » (où les deux cohabitent) et le classement INTER-QUESTION (où la
   ligne quizz, elle, est absente).
   --------------------------------------------------------------------------- */
#sessionInfoModal .qzr-question-report {
  margin: 18px 0 0;
}

/* Les deux mailles se suivent dans la feuille de session : la seconde se colle
   à la première plutôt que de rouvrir un écart de section. */
#sessionInfoModal .qzr-question-report + .qzr-quiz-report {
  margin-top: 6px;
}

#scoreModal .qzr-question-report {
  width: 100%;
  max-width: 380px;
  margin: 20px auto 6px;
}

.qzr-mod-toast.is-error { color: #b3261e; font-weight: 700; }

/* Réglages : liste des joueurs bloqués. */
.qzr-blocked-list { display: grid; gap: 6px; margin-top: 8px; }

.qzr-blocked-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-sm, 8px);
  font-size: .84rem;
  color: var(--qz-text);
}

.qzr-blocked-empty {
  margin: 8px 0 0;
  font-size: .8rem;
  color: var(--qz-muted, #5E8A7C);
}

/* Section « Règles, sécurité et contact » des réglages. */
.qzr-safety-lead { margin: 4px 0 10px; font-size: .84rem; line-height: 1.5; color: var(--qz-text); }

.qzr-safety-list { margin: 0 0 10px; padding-left: 18px; }
.qzr-safety-list li { font-size: .82rem; line-height: 1.55; color: var(--qz-text); }

.qzr-safety-note { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--qz-muted, #5E8A7C); }

/* L'engagement de 24 h est l'élément que la review App Store cherche : il est
   mis en avant plutôt que noyé dans le paragraphe. */
.qzr-safety-sla {
  display: flex; gap: 8px; align-items: center;
  margin: 10px 0 0; padding: 9px 11px;
  border-radius: var(--qz-r-sm, 8px);
  background: color-mix(in srgb, var(--qz-accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--qz-accent) 26%, transparent);
  font-size: .8rem; color: var(--qz-accent-ink, #0A4F40);
}

.qzr-safety-contact { margin: 0 0 6px; font-size: .9rem; font-weight: 800; overflow-wrap: anywhere; }
.qzr-safety-contact a { color: var(--qz-accent-ink, #0A4F40); }

/* ---------------------------------------------------------------------------
   « À propos et documents légaux » — section sœur de « Règles, sécurité et
   contact », dans le même accordéon des réglages.

   Ces liens sortent de l'app (nouvel onglet, ou navigateur système en natif) :
   la flèche le dit, plutôt que de laisser l'utilisateur le découvrir.
   --------------------------------------------------------------------------- */
.qzr-legal-links { list-style: none; margin: 0; padding: 0; }
.qzr-legal-links li + li { margin-top: 6px; }
.qzr-legal-links li[hidden] { display: none; }
.qzr-legal-links a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 12px;
  background: var(--qz-surface, #fff);
  border: 1px solid var(--qz-line, #DCEFE8);
  color: var(--qz-text); text-decoration: none;
  font-size: .85rem; font-weight: 600;
}
.qzr-legal-links a:hover,
.qzr-legal-links a:focus-visible { border-color: var(--qz-accent); }
.qzr-legal-links a > i:first-child { color: var(--qz-accent); width: 1.1em; text-align: center; }
/* La fleche est poussee a droite : elle signale la sortie, elle ne se lit pas. */
.qzr-legal-links__ext { margin-left: auto; font-size: .72em; opacity: .5; }

.qzr-legal-version {
  margin: 0 0 6px; font-size: .9rem; font-weight: 800;
  color: var(--qz-accent-ink, #0A4F40);
}