/* Scène de question (v3, D34) — js/scene.js. Partagée par la projection (PC de classe) et l'aperçu de l'éditeur.
   Toutes les tailles sont en unités de conteneur (cqh, cqw), jamais en vh : la même scène se rend en 1920 × 1080
   et dans une vignette de 480 × 270 avec les mêmes proportions. La racine (.scene) est le conteneur ; le plateau
   (.sc-plateau) porte la grille à zones réservées : entête (badges, coin) · question · corps (média, réponses) · pied
   (compteur, cartes). Les états de la séance (répartition, bonne réponse…) : css/projection-etats.css.
   Les cartes de réponse et le pied sont dans css/scene-cartes.css, importé ici : une page ne charge que scene.css. */

@import url('scene-cartes.css');

.scene {
  --pad-y: 2.4cqh;
  --pad-x: 2.4cqw;
  --gap: 1.6cqh;
  --gap-x: 1.6cqw;
  --h-entete: 6cqh;
  --h-question: 19cqh;            /* réglé par js/scene.js (ajuster) selon le texte */
  --h-pied: 17cqh;
  --h-corps: calc(100cqh - 2 * var(--pad-y) - var(--h-entete) - var(--h-question) - var(--h-pied) - 3 * var(--gap));
  --l-corps: calc(100cqw - 2 * var(--pad-x));
  --l-media: calc((var(--l-corps) - var(--gap-x)) * 0.42);
  --gap-rep: 1.4cqh;
  --lignes: 2;                    /* lignes de réponses, posé par js/scene.js */
  --h-carte: calc((var(--h-corps) - (var(--lignes) - 1) * var(--gap-rep)) / var(--lignes));
  --pad-carte: min(1.3cqh, calc(var(--h-carte) * 0.09));
  --h-jauge: 3cqh;                /* jauge de répartition : épaisse, lisible du fond (réservée à tous les états) */
  --l-compte: 10cqw;              /* compte réservé : nombre au-dessus du % (grille, deux) */
  --t-reponse: 5cqh;              /* réglé par js/scene.js */
  --papier: #fdf6e3;
  --encre: #1f2933;
  --craie: #f4f4f2;
  --craie-douce: #b9c4cb;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  container-type: size;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #34474f 0%, #253339 55%, #1b252b 100%), #1f2b31;
  color: var(--craie);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.12;
  text-align: left;
  user-select: none;
}

.scene *,
.scene *::before,
.scene *::after {
  box-sizing: border-box;
}

.sc-plateau {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: var(--h-entete) var(--h-question) var(--h-corps) var(--h-pied);
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--gap);
  padding: var(--pad-y) var(--pad-x);
}

/* Zones placées explicitement : une surimpression (récompense) peut partager une case sans rien décaler. */
.sc-entete { grid-area: 1 / 1; }
.sc-question { grid-area: 2 / 1; }
.sc-corps { grid-area: 3 / 1; }
.sc-pied { grid-area: 4 / 1; }

/* ---------- Entête : badges à gauche, coin à droite (minuteur, récompense) ---------- */

.sc-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2cqw;
  min-width: 0;
}

.sc-badges {
  display: flex;
  align-items: center;
  gap: 1cqw;
  min-width: 0;
  overflow: hidden;
}

.sc-coin {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1cqw;
  height: 100%;
}

.sc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  flex: none;
  height: 5.2cqh;
  padding: 0 1.2cqw;
  border-radius: 99cqh;
  background: rgba(255, 255, 255, 0.12);
  color: var(--craie);
  font-size: 3cqh;
  font-weight: 600;
  white-space: nowrap;
}

.sc-son-note {
  font-size: 1.6em;
  line-height: 1;
}

.sc-son-ondes {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.25cqh;
  height: 1em;
}

.sc-son-ondes i {
  display: block;
  width: 0.5cqh;
  height: 35%;
  border-radius: 0.3cqh;
  background: currentColor;
  opacity: 0.6;
}

/* ---------- Question ---------- */

.sc-question {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0.4cqh 0;
  font-size: 7cqh;                /* réglé par js/scene.js */
  font-weight: 600;
  line-height: 1.12;
}

.sc-question-texte {
  margin: auto 0;                 /* centré, mais jamais coupé en haut (marges auto = 0 si ça déborde) */
  overflow-wrap: break-word;
  hyphens: auto;
}

.sc-question.inconnue {
  color: var(--craie-douce);
  font-style: italic;
}

/* ---------- Corps : média (gauche, taille fixe) et réponses ---------- */

.sc-corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: var(--gap-x);
  min-width: 0;
  min-height: 0;
}

.scene[data-media='image'] .sc-corps,
.scene[data-media='video'] .sc-corps,
.scene[data-media='son'] .sc-corps {
  grid-template-columns: var(--l-media) minmax(0, 1fr);
}

/* Avec un média, réponses en colonne : le compte se lit sur une ligne (nombre puis %), plus large.
   Certitude : « n justes · n faux » (projection) ; réservé dès l'état prêt, aperçu compris. */
.scene[data-disposition='colonne'] {
  --l-compte: 14cqw;
}

.scene[data-type='certitude'] {
  --l-compte: 26cqw;
}

/* Son seul : grand visuel « ♪ Écoute », colonne plus étroite qu'une image. */
.scene[data-media='son'] {
  --l-media: calc((var(--l-corps) - var(--gap-x)) * 0.28);
}

.sc-son-grand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6cqh;
  width: 100%;
  height: 100%;
  border: 0.4cqh solid rgba(255, 255, 255, 0.25);
  border-radius: 2cqh;
  background: rgba(255, 255, 255, 0.07);
  color: var(--craie);
}

.sc-son-grand .sc-son-note {
  font-size: min(22cqh, 11cqw);
  line-height: 0.9;
}

.sc-son-grand .sc-son-texte {
  font-size: min(6cqh, 3.4cqw);
  font-weight: 600;
  white-space: nowrap;
}

.sc-son-grand .sc-son-ondes {
  gap: 0.8cqh;
  height: 5cqh;
}

.sc-son-grand .sc-son-ondes i {
  width: 1.4cqh;
  border-radius: 0.7cqh;
}

.sc-media {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

.sc-media-cadre {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.sc-image-boite {
  position: relative;
  overflow: hidden;
  border-radius: 1.2cqh;
  background: #ffffff;
  box-shadow: 0 0.4cqh 1.4cqh rgba(0, 0, 0, 0.35);
}

.sc-image-boite > .media-image {
  display: block;
  width: min(var(--l-media), calc(var(--h-corps) * var(--ratio, 1.333)));
  background: #ffffff;
  transform-origin: 0 0;
}

.sc-video {
  position: relative;
  width: min(var(--l-media), calc(var(--h-corps) * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 1.2cqh;
  background: #000000;
  box-shadow: 0 0.4cqh 1.4cqh rgba(0, 0, 0, 0.35);
}

.sc-video-apercu img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sc-video-lecture {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 12cqh;
  height: 12cqh;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-size: 5cqh;
  transform: translate(-50%, -50%);
}