/* Projection v3 : certitude (justes / faux à la question d'avant), bilan du pied (objectif de la classe, défi
   des équipes), minuteur du coin et récompense à 80 %. */

/* ---------- Certitude : justes / faux à la question d'avant ---------- */

.sc-certitude {
  display: flex;
  gap: 0.8cqw;
}

.sc-certitude-juste,
.sc-certitude-faux {
  display: flex;
  align-items: baseline;
  gap: 0.5cqw;
  padding: 0.6cqh 1cqw;
  border-radius: 1cqh;
  font-size: min(3.2cqh, calc(var(--h-carte) * 0.26));
  font-weight: 600;
}

.sc-certitude-juste { background: var(--juste); color: var(--juste-texte); }
.sc-certitude-faux { background: var(--faux); color: var(--faux-texte); }
.sc-certitude .zero { opacity: 0.35; }

.scene[data-certitude='1'] .sc-rep-jauge {
  background: transparent;
}

.sc-certitude strong {
  font-size: 1.7em;
}

.sc-alerte {
  margin: 0;
  font-size: 3.4cqh;
  line-height: 1.2;
}

.sc-alerte strong {
  color: #ffb4a6;
}

.sc-alerte.aucune {
  color: var(--craie-douce);
}

.sc-alerte-noms {
  display: block;
  margin-top: 0.6cqh;
  font-size: 2.8cqh;
}

/* ---------- Bilan du pied : objectif de la classe, défi des équipes ---------- */

.sc-pied-bilan {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.2cqh;
  width: 100%;
  height: 100%;
  min-width: 0;
  animation: sc-apparait 0.4s ease-out;
}

.sc-objectif {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.6cqw;
  font-size: 3.2cqh;
  font-weight: 600;
}

.sc-objectif-titre {
  white-space: nowrap;
}

.sc-objectif-jauge {
  position: relative;
  height: 2.6cqh;
  border-radius: 99cqh;
  background: rgba(255, 255, 255, 0.14);
}

.sc-objectif-rempli {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 99cqh;
  background: var(--agir);
  transition: width 0.8s;
}

.sc-objectif-cible {
  position: absolute;
  top: -0.8cqh;
  bottom: -0.8cqh;
  width: 0.5cqh;
  border-radius: 0.3cqh;
  background: #f7c948;
  transform: translateX(-50%);
}

.sc-objectif.atteint .sc-objectif-titre {
  color: #f7c948;
}

.sc-defi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8cqh 1cqw;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Équipe : sa couleur (tons « terre » de equipes.js) en fond, toujours avec son nom, encre contrastée. */
.sc-equipe {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7cqw;
  padding: 0.6cqh 1.3cqw;
  border-radius: 99cqh;
  background: var(--equipe);
  color: var(--equipe-encre, #1f2933);
  font-size: 3cqh;
  font-weight: 600;
  white-space: nowrap;
}

.sc-equipe-total {
  font-size: 1.15em;
}

.sc-equipe-plus {
  font-size: 0.85em;
  opacity: 0.85;
}

/* ---------- Minuteur (coin réservé, seulement pendant le scan) et récompense à 80 % ---------- */

.sc-minuteur {
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  height: 100%;
  padding: 0 1.6cqw 0 0.7cqh;
  border-radius: 99cqh;
  background: rgba(0, 0, 0, 0.28);
}

.sc-minuteur-svg {
  flex: none;
  width: 4.6cqh;
  height: 4.6cqh;
  transform: rotate(-90deg);
}

.sc-minuteur-fond {
  fill: rgba(0, 0, 0, 0.25);
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 9;
}

.sc-minuteur-anneau {
  fill: none;
  stroke: #f4f4f2;
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s linear;
}

.sc-minuteur-secondes {
  min-width: 2ch;
  font-size: 4.6cqh;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sc-minuteur.bientot .sc-minuteur-anneau,
.sc-minuteur.fini .sc-minuteur-anneau {
  stroke: #f7c948;
}

.sc-minuteur.fini .sc-minuteur-secondes {
  color: #f7c948;
}

/* Récompense (D27) : dans la case de grille de la question (par-dessus), jamais sur les réponses. */
.sc-recompense {
  grid-row: 2;
  grid-column: 1;
  z-index: 2;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  margin: 0;
  overflow: hidden;               /* rien ne déborde de la zone de la question */
  border-radius: 2cqh;
  background: #fdf6e3;
  color: #1f2933;
  font-size: 6.5cqh;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1cqh 3cqh rgba(0, 0, 0, 0.35);
  animation: sc-recompense 0.5s cubic-bezier(0.2, 1.5, 0.4, 1);
}

.sc-recompense[data-palier='90'] { font-size: 7.5cqh; }
.sc-recompense[data-palier='100'] { font-size: 8.5cqh; }

.sc-recompense-etoiles {
  color: #e0a800;
}

@keyframes sc-recompense {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: none; opacity: 1; }
}