/* Projection v3 : médias pilotés (D30, D31) — faux plein écran, zoom, pointeur, lien mort, lecteur caché. */

/* Faux plein écran : la zone média couvre toute la scène (même élément : le lecteur YouTube ne se recharge pas). */
.sc-media.plein {
  position: absolute;
  inset: 0;
  grid-area: auto / auto / auto / auto; /* sinon la zone de grille du plateau sert de bloc conteneur */
  z-index: 20;
  padding: 2cqh 2cqw;
  background: #10181c;
  animation: sc-plein 0.35s ease-out;
}

@keyframes sc-plein {
  from { opacity: 0.4; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}

.sc-media.plein .sc-image-boite > .media-image {
  width: min(96cqw, calc(96cqh * var(--ratio, 1.333)));
}

.sc-media.plein .sc-video {
  width: min(96cqw, calc(96cqh * 16 / 9));
}

/* Zoom : l'image est agrandie dans sa boîte (qui découpe), le point visé amené au centre. */
.sc-image-boite > .media-image {
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.sc-image-boite.zoomee {
  outline: 0.4cqh solid rgba(247, 201, 72, 0.7);
}

/* Pointeur : anneau jaune qui pulse (et traînée des deux précédents), au-dessus de l'image. */
.sc-pointeur {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.sc-pointeur-anneau {
  position: absolute;
  width: 12cqh;
  height: 12cqh;
  transform: translate(-50%, -50%);
  transition: left 0.3s, top 0.3s, opacity 0.3s;
}

.sc-pointeur-halo {
  position: absolute;
  inset: 0;
  border: 1.1cqh solid #f7c948;
  border-radius: 50%;
  box-shadow: 0 0 0 0.4cqh rgba(0, 0, 0, 0.45), inset 0 0 0 0.4cqh rgba(0, 0, 0, 0.45);
  animation: sc-pulse 1.2s ease-in-out infinite;
}

.sc-pointeur-point {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.8cqh;
  height: 1.8cqh;
  border: 0.3cqh solid rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  background: #f7c948;
  transform: translate(-50%, -50%);
}

.sc-pointeur-anneau[data-age='1'] { opacity: 0.45; }
.sc-pointeur-anneau[data-age='2'] { opacity: 0.2; }

.sc-pointeur-anneau:not([data-age='0']) .sc-pointeur-halo {
  animation: none;
}

@keyframes sc-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

/* Lien mort ou lecteur muet : message discret, jamais d'écran cassé (pas de rouge : ce n'est pas « faux »). */
.scene .media-image.media-erreur {
  outline: none;
  background: rgba(255, 255, 255, 0.06);
}

.sc-media-mort .sc-image-boite {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.sc-media-mort .sc-image-boite > .media-image {
  min-height: 20cqh;
}

.sc-media-message {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1cqh;
  max-width: 90%;
  margin: 0;
  padding: 1.4cqh 2cqw;
  border-radius: 1.4cqh;
  background: rgba(16, 24, 28, 0.85);
  color: var(--craie-douce);
  font-size: 2.8cqh;
  text-align: center;
  transform: translate(-50%, -50%);
}

.sc-media-lien {
  color: #f7c948;
  font-size: 2.4cqh;
}

.sc-video .media-repli {
  position: absolute;
  left: 50%;
  bottom: 1cqh;
  color: #f7c948;
  font-size: 2.4cqh;
  transform: translateX(-50%);
}

/* Vidéo « son seul » (D30) : le lecteur vit, invisible, dans le bandeau « ♪ Écoute ». */
.sc-lecteur-cache {
  position: relative;
  display: inline-block;
  width: 2px;
  height: 2px;
  overflow: hidden;
}

.sc-lecteur-cache .media-repli {
  display: none;
}