/* Projection v3 : états de la scène (js/projection-scene.js, js/projection-pied.js, minuteur, récompenses).
   Rien ne change de place d'un état à l'autre : seules les couleurs, les nombres et les jauges changent.
   Couleurs (D34) : --agir = qui a répondu, identités A–D = répartition, --juste / --faux = bonne réponse, certitude. */

.projection :focus-visible {
  outline-color: #f7c948;
}

/* ---------- Badges de l'entête ---------- */

.sc-badge-tour {
  background: var(--agir);
  color: var(--agir-texte);
}

.sc-badge-fige {
  background: rgba(255, 255, 255, 0.08);
  color: var(--craie-douce);
}

.sc-badge-multiple {
  border: 0.3cqh solid rgba(255, 255, 255, 0.35);
  background: transparent;
}

.sc-son[data-etat='lecture'] .sc-son-ondes i {
  animation: sc-onde 0.9s ease-in-out infinite alternate;
}

.sc-son[data-etat='lecture'] .sc-son-ondes i:nth-child(2) { animation-delay: -0.3s; }
.sc-son[data-etat='lecture'] .sc-son-ondes i:nth-child(3) { animation-delay: -0.6s; }
.sc-son[data-etat='lecture'] .sc-son-ondes i:nth-child(4) { animation-delay: -0.15s; }

.sc-son[data-etat='lecture'] {
  background: var(--agir);
  color: var(--agir-texte);
}

.sc-son[data-etat='erreur'] {
  color: var(--craie-douce);
}

.sc-son[data-etat='erreur'] .sc-son-ondes {
  display: none;
}

@keyframes sc-onde {
  from { height: 25%; }
  to { height: 100%; }
}

.sc-question-rappel {
  margin: 0.4em 0 0;
  color: var(--craie-douce);
  font-size: 0.42em;
  font-weight: 500;
}

/* ---------- Qui a répondu (grille du pied) : allumage neutre, sans agrandissement ---------- */

.sc-case.repondu {
  border-color: var(--agir);
  background: var(--agir);
  color: var(--agir-texte);
}

.sc-case-marques {
  position: absolute;
  right: 0.5cqh;
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: 0.35cqh;
  transform: translateY(-50%);
}

/* Place réservée aux marques (points d'une question à plusieurs réponses, pastilles « qui a répondu quoi ») :
   les prénoms sont ajustés en tenant compte de cette place, rien ne se chevauche. */
.sc-grille.marques .sc-case {
  padding-right: 2.8cqh;
}

.sc-point {
  display: block;
  width: 1cqh;
  height: 1cqh;
  border-radius: 50%;
  background: currentColor;
}

/* « Qui a répondu quoi » : la case passe sur papier pour que les pastilles gardent leurs couleurs. */
.sc-case.repondu.avec-pastilles {
  border-color: var(--papier);
  background: var(--papier);
  color: var(--encre);
}

.sc-case-marques .pastille-rep {
  display: block;
  width: 2.2cqh;
  height: 2.2cqh;
}

/* ---------- Compteur ---------- */

.scene[data-compteur='justes'] .sc-compteur-nombre {
  color: #7fdcaa;
}

/* ---------- Répartition (D25) : même traitement pour chaque réponse ---------- */

.scene[data-repartition='1'] .sc-rep-jauge {
  background: rgba(31, 41, 51, 0.12);
}

.sc-rep-jauge-rempli {
  background: var(--rep);
  transition: width 0.7s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.sc-rep-jauge-avant {
  background: transparent;
  transition: width 0.7s;
}

/* 1er vote : contour pointillé sombre PAR-DESSUS la jauge du 2e vote (lisible sur la couleur comme sur le fond). */
.scene[data-comparaison='1'] .sc-rep-jauge-avant {
  z-index: 1;
  border: 0.4cqh dashed rgba(31, 41, 51, 0.75);
}

.sc-compte-n {
  color: var(--encre);
  font-size: min(6.5cqh, var(--h-contenu));
  font-weight: 700;
}

.sc-compte-p,
.sc-compte-avant {
  margin-top: 0.4cqh;
  color: var(--encre);
  font-size: 4cqh;
  font-weight: 600;
}

.sc-compte-avant {
  color: #3d4952;
  font-size: 3.4cqh;
}

.scene[data-repartition='1'] .sc-rep-compte {
  animation: sc-apparait 0.4s ease-out;
}

@keyframes sc-apparait {
  from { opacity: 0; transform: translateY(0.8cqh); }
  to { opacity: 1; transform: none; }
}

/* ---------- Bonne réponse : en --juste, les autres atténuées ---------- */

.scene[data-bonne='1'] .sc-rep.juste {
  outline: 0.7cqh solid var(--juste);
  outline-offset: 0.2cqh;
  box-shadow: 0 0 0 1.4cqh rgba(30, 133, 80, 0.3), 0 0.4cqh 1.2cqh rgba(0, 0, 0, 0.3);
}

.scene[data-bonne='1'] .sc-rep.juste::after {
  content: '✓';
  position: absolute;
  right: -1.4cqh;
  top: -1.6cqh;
  display: grid;
  place-items: center;
  width: 5cqh;
  height: 5cqh;
  border-radius: 50%;
  background: var(--juste);
  color: var(--juste-texte);
  font-size: 3.4cqh;
  font-weight: 700;
  line-height: 1;
  animation: sc-coche 0.45s cubic-bezier(0.2, 1.5, 0.4, 1);
}

.scene[data-bonne='1'] .sc-rep:not(.juste) {
  opacity: 0.38;
  filter: saturate(0.5);
}

@keyframes sc-coche {
  from { transform: scale(0); }
  to { transform: scale(1); }
}