/* Projection v3 (PC de classe = scène, D24, D34) : page, écrans hors question, surimpressions.
   La scène elle-même : css/scene.css (commune avec l'éditeur) ; ses états : css/projection-etats.css et
   css/projection-bilan.css ; médias : css/projection-medias.css ; menu et panneaux : css/projection-panneaux.css.
   L'écran (#ecran) est un conteneur : tailles en cqh / cqw. */

html,
body.projection {
  height: 100%;
}

body.projection {
  margin: 0;
  overflow: hidden;
  background: #1b252b;
  color: #f4f4f2;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 500;
  cursor: none;
}

body.projection.souris-active {
  cursor: default;
}

.ecran {
  position: fixed;
  inset: 0;
  container-type: size;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #34474f 0%, #253339 55%, #1b252b 100%), #1f2b31;
}

/* La scène occupe tout l'écran projeté (16:9 sur un projecteur courant ; sinon elle suit la fenêtre). */
.projection #scene.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.btn-grand {
  min-height: 64px;
  padding: 0.8rem 1.6rem;
  font-size: 1.3rem;
}

.btn-principal {
  background: var(--agir);
  color: var(--agir-texte);
}

.btn-principal:hover:not(:disabled) {
  background: #1a5fb8;
}

/* ---------- Sans classe, attente ---------- */

.ecran-message,
.ecran-attente {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2cqh;
  padding: 6cqh 6cqw;
  text-align: center;
}

.ecran-message h1 {
  margin: 0;
  font-size: 6cqh;
}

.ecran-message p {
  margin: 0;
  color: #b9c4cb;
  font-size: 3.4cqh;
}

.attente-classe {
  margin: 0;
  font-size: 12cqh;
  font-weight: 600;
  line-height: 1.05;
}

.attente-cartes {
  margin: 0;
  color: #b9c4cb;
  font-size: 4.4cqh;
}

.attente-heure {
  position: absolute;
  right: 3cqw;
  bottom: 3cqh;
  margin: 0;
  color: rgba(244, 244, 242, 0.45);
  font-size: 4cqh;
  font-variant-numeric: tabular-nums;
}

/* ---------- Numéros de cartes (montrer numeros) ---------- */

.ecran-numeros {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 2cqh;
  padding: 3cqh 3cqw;
  background: radial-gradient(120% 90% at 50% 0%, #34474f 0%, #253339 55%, #1b252b 100%), #1f2b31;
}

.numeros-titre {
  margin: 0;
  font-size: 6cqh;
  font-weight: 600;
  text-align: center;
}

.numeros-grille {
  display: grid;
  grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
  grid-template-rows: repeat(var(--lignes), minmax(0, 1fr));
  gap: 1.4cqh 1.2cqw;
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: 0;
}

.numero-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 1.6cqh;
  background: #fdf6e3;
  color: #1f2933;
}

.numero-carte-n {
  font-size: 9cqh;
  font-weight: 700;
  line-height: 1;
}

.numero-carte-nom {
  max-width: 96%;
  overflow: hidden;
  font-size: var(--t-nom, 3.6cqh);
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Tirage au sort ---------- */

.tirage {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(16, 24, 28, 0.82);
}

.tirage-carte {
  min-width: 50cqw;
  max-width: 90cqw;
  padding: 5cqh 5cqw;
  border-radius: 3cqh;
  background: #fdf6e3;
  color: #1f2933;
  text-align: center;
  box-shadow: 0 2cqh 6cqh rgba(0, 0, 0, 0.45);
}

.tirage.nouveau .tirage-carte {
  animation: tirage-entree 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes tirage-entree {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.tirage-titre {
  margin: 0 0 1cqh;
  color: #5b6770;
  font-size: 4cqh;
}

.tirage-nom {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 18cqh;
  font-weight: 700;
  line-height: 1.05;
}

.tirage-numero {
  margin: 1.5cqh 0 0;
  color: #5b6770;
  font-size: 5cqh;
}

/* ---------- Confettis (100 %) ---------- */

.confettis {
  position: absolute;
  inset: 0;
  z-index: 35;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- Réseau ---------- */

.alerte-reseau {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  margin: 0;
  padding: 6px 14px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.55);
  color: #ffd9a0;
  font-size: 16px;
}