/*
 * « Activer le son » / « Tester mon son » des questions d'écoute
 * (script/js/qzr-test-son.js) — parcours de langues, lot « son » du 01/11.
 * Aussi : la puce « Son activé · Couper », les badges « Écoute prête »,
 * la carte « Test du son » de la salle d'attente et ses pastilles, l'avis du
 * détail d'une compétition.
 *
 * LA CHROME N'EST PAS REDÉFINIE ICI : .mp-modal (fond, panneau, poignée,
 * entrée par le bas) vient de vnext-groupes-detail.css, chargée globalement,
 * comme pour la feuille « voix absente » (vnext-voix-absente.css), dont on
 * reprend les deux écarts : AU-DESSUS du jeu (10150), panneau sur --qz-surface.
 * STYLES PLEINS : panneau, puce, carte et pastilles sont opaques — ils restent
 * lisibles sur les décors de l'habillage solo. Cibles d'au moins 44 px.
 * Toutes les couleurs sont des jetons (thèmes, mode sombre), sans hexadécimal
 * de repli : le plafond de UiVisualLanguageTest ne bouge pas.
 */

.mp-modal.qzr-son-sheet { z-index: 10150; }
.mp-modal.qzr-son-sheet[hidden] { display: none; }

.qzr-son-sheet .mp-modal__panel {
  background: var(--qz-surface) !important;
  color: var(--qz-text);
  padding: 0 20px max(18px, var(--qzr-safe-bottom, 18px));
  text-align: center;
  box-shadow: 0 -14px 44px rgba(6, 52, 42, .20);
}

.qzr-son-sheet__pastille {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 18px auto 14px;
  border-radius: 50%;
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
  font-size: 1.55rem;
}
.qzr-son-sheet[data-ecran="aide"] .qzr-son-sheet__pastille {
  background: var(--qz-warning-bg);
  color: var(--qz-warning-ink);
}

.qzr-son-sheet__titre {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--qz-text);
}

.qzr-son-sheet__texte {
  margin: 0 0 16px;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--qz-muted);
}

/* Écran 2 : l'échantillon et l'onde. */
.qzr-son-onde {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  margin: 22px auto 10px;
}
.qzr-son-onde span {
  display: block;
  width: 6px;
  height: 10px;
  border-radius: 3px;
  background: var(--qz-accent);
  opacity: .45;
  transition: height .2s ease, opacity .2s ease;
}
.qzr-son-sheet.is-lecture .qzr-son-onde span {
  opacity: 1;
  animation: qzrSonOnde .9s ease-in-out infinite;
}
.qzr-son-sheet.is-lecture .qzr-son-onde span:nth-child(2) { animation-delay: .12s; }
.qzr-son-sheet.is-lecture .qzr-son-onde span:nth-child(3) { animation-delay: .24s; }
.qzr-son-sheet.is-lecture .qzr-son-onde span:nth-child(4) { animation-delay: .36s; }
.qzr-son-sheet.is-lecture .qzr-son-onde span:nth-child(5) { animation-delay: .48s; }
@keyframes qzrSonOnde {
  0%, 100% { height: 10px; }
  50% { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .qzr-son-sheet.is-lecture .qzr-son-onde span { animation: none; height: 26px; }
}

.qzr-son-sheet__echantillon {
  margin: 0 0 4px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--qz-text);
}
.qzr-son-sheet__etat {
  min-height: 1.2em;
  margin: -8px 0 10px;
  font-size: .8rem;
  color: var(--qz-accent-ink);
}

/* Écran « Rien entendu ? » : les conseils. */
.qzr-son-sheet__aide {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--qz-screen);
  border-radius: var(--qz-r-card, 16px);
  text-align: left;
}
.qzr-son-sheet__aide li {
  position: relative;
  padding-left: 22px;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--qz-text);
}
.qzr-son-sheet__aide li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--qz-accent);
}

.qzr-son-sheet__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qzr-son-sheet__actions .btn-ux {
  width: 100%;
  min-height: 48px;
}
.qzr-son-sheet__actions .qzr-son-sheet__secondaire {
  background: transparent !important;
  border-color: var(--qz-line-strong) !important;
}
/* « Jouer sans le son » : un lien, mais une vraie cible de 44 px. */
.qzr-son-sheet__lien {
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--qz-muted);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.qzr-son-sheet button:focus-visible,
.qzr-son-puce button:focus-visible,
.qzr-son-carte button:focus-visible,
.qzr-son-action:focus-visible {
  outline: 3px solid var(--qz-accent) !important;
  outline-offset: 2px !important;
}

.qzr-son-sheet__note {
  margin: 12px 0 0;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--qz-muted);
}

/* ---- puce « Son activé · Couper » (3 s, en haut, au-dessus du jeu) ---- */
.qzr-son-puce {
  position: fixed;
  z-index: 10150;
  top: calc(var(--qzr-safe-top, 0px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 32px);
  min-height: 44px;
  padding: 0 4px 0 14px;
  border-radius: var(--qz-r-pill, 999px);
  background: var(--qz-accent-ink);
  color: white;
  font-size: .9rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(6, 52, 42, .28);
  animation: qzrSonPuce .22s ease;
}
.qzr-son-puce__texte { white-space: nowrap; }
.qzr-son-puce__couper {
  min-height: 36px;
  min-width: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--qz-r-pill, 999px);
  background: rgba(255, 255, 255, .18);
  color: white;
  font-weight: 800;
  cursor: pointer;
}
/* La zone touchable dépasse le dessin : 44 px de haut, comme la puce. */
.qzr-son-puce__couper { position: relative; }
.qzr-son-puce__couper::after { content: ""; position: absolute; inset: -4px 0; }
@keyframes qzrSonPuce {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---- badge « Écoute prête · anglais » ---- */
.qzr-son-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--qz-r-pill, 999px);
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.4;
}
.qzr-son-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--qz-accent);
}
.qzr-son-badge[hidden] { display: none; }

/* Bouton « Tester mon son » hors du jeu (profil, parcours, compétition). */
.qzr-son-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--qz-line-strong);
  border-radius: var(--qz-r-pill, 999px);
  background: var(--qz-surface);
  color: var(--qz-accent-ink);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
}
.qzr-son-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

/* ---- salle d'attente : la carte « Test du son » ---- */
.qzr-son-carte {
  margin: 10px 0;
  padding: 12px 14px;
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card, 16px);
  background: var(--qz-surface);
  color: var(--qz-text);
  text-align: left;
}
.qzr-son-carte__tete {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: .95rem;
}
.qzr-son-carte__tete .qzr-son-pastille { margin-left: auto; }

/* La carte de la salle est une GRILLE À ZONES NOMMÉES : sans zone, la carte
   tombait tout en bas, après le pied (recette du 01/11, 375 px). La maquette
   validée la met AU-DESSUS de la liste des joueurs. Le gabarit ne change que
   si la carte est là (:has) : les autres salles ne prennent pas d'écart vide. */
#quizRealTimeContainer.qzr-live-hd .qzr-lobby__card:has(> #lobbySonCard) {
  grid-template-areas: "head" "quiz" "launch" "son" "players" "mascot" "foot";
}
#quizRealTimeContainer.qzr-live-hd .qzr-lobby__card > #lobbySonCard { grid-area: son; margin: 0; }
@container (min-width: 720px) {
  #quizRealTimeContainer.qzr-live-hd .qzr-lobby__card:has(> #lobbySonCard) {
    grid-template-rows: auto auto auto auto 1fr auto;
    grid-template-areas:
      "head    head"
      "quiz    players"
      "launch  players"
      "son     players"
      "mascot  players"
      "foot    players";
  }
}
.qzr-son-carte__texte {
  margin: 6px 0 10px;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--qz-muted);
}

/* Pastille de statut, sur chaque ligne de joueur (salle joueur ET spectateur). */
.qzr-son-pastille {
  flex: 0 0 auto;
  align-self: center;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--qz-screen);
  color: var(--qz-muted);
}
.qzr-son-pastille--pret {
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
}
.qzr-son-pastille--sans_voix {
  background: var(--qz-warning-bg);
  color: var(--qz-warning-ink);
}
.qzr-son-pastille--sans_son {
  background: var(--qz-screen);
  color: var(--qz-text);
}
@media (max-width: 400px) {
  .qzr-son-pastille { padding: 2px 6px; font-size: .68rem; }
}
/* Tuile de la grille à deux colonnes (téléphone, ~150 px) : avatar, nom et
   pastille ne tiennent pas sur une ligne, et le nom tombait à « (t » (recette
   du 01/11, 375 px). La tuile passe à la ligne : la pastille va dessous, à
   droite, le nom garde sa largeur. La base de 3,5rem du bloc nom décide du
   retour : sur une ligne large (liste du bureau), tout tient sur une ligne. */
.qzr-spec__player:has(> .qzr-son-pastille) { flex-wrap: wrap; row-gap: 6px; }
.qzr-spec__player:has(> .qzr-son-pastille) > .qzr-spec__pinfo { flex: 1 1 3.5rem; }
.qzr-spec__player > .qzr-son-pastille { margin-left: auto; }

/* ---- détail d'une compétition : l'avis d'écoute / de mise à jour ---- */
.qzr-son-compet .cf-note { margin-bottom: 10px; }
.qzr-son-compet--maj {
  border-color: var(--qz-warning-ink) !important;
}
.qzr-son-compet--maj .cf-label { color: var(--qz-warning-ink); }

/* ---- page d'un parcours de langue : « Tester mon son » dans le héros ----
   Même dessin que « Classement » (lien blanc souligné, vnext-parcours.css),
   remis à zéro pour un <button> ; badge translucide sur le fond teal. */
.qzr-path-hero__son {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--qz-fs-sm, .875rem);
  cursor: pointer;
}
.qzr-path-hero .qzr-son-badge {
  background: rgba(255, 255, 255, .18);
  color: white;
}
.qzr-path-hero .qzr-son-badge::before { background: var(--qz-energy); }