/* ==========================================================================
   Jeu « La scène en 3D » — théâtre à l'italienne en CSS 3D, zéro dépendance.
   Chargé uniquement sur la page du jeu. La géométrie (transform de chaque
   plan) est posée en style inline par assets/js/jeu-scene-3d.js ; ici, tout
   l'habillage : matières, lumières, états, interface.
   ========================================================================== */

.s3d { max-width: 64rem; margin: 0 auto; }

/* ------------------------------------------------------------ Viewport -- */

.s3d-viewport {
  position: relative;
  height: clamp(300px, 56vw, 520px);
  border-radius: var(--r-carte, 14px);
  overflow: hidden;
  background:
    radial-gradient(120% 95% at 50% 10%, #4a4456 0%, #2a2634 60%, #16131d 100%);
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.s3d-viewport.est-saisi { cursor: grabbing; }

/* Douce lumière d'ambiance sur l'ensemble du plateau. */
.s3d-viewport::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 50% 45%, rgba(255, 240, 210, .10), transparent 75%);
  pointer-events: none;
  z-index: 1;
}

/* Léger plancher de salle en bas du cadre, pour asseoir la scène. */
.s3d-viewport::after {
  content: '';
  position: absolute; inset: auto 0 0 0; height: 18%;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
  pointer-events: none;
}

.s3d-scale {
  position: absolute; left: 50%; top: 60%;
  transform: translate(-50%, -50%) scale(var(--s3d-echelle, 1));
  perspective: 1150px;
  perspective-origin: 50% 28%;
}
.s3d-monde {
  position: relative; width: 0; height: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--s3d-rx, -12deg)) rotateY(var(--s3d-ry, 0deg));
  transition: transform .45s var(--ease-stage, ease);
}
.s3d-viewport.est-saisi .s3d-monde { transition: none; }
@media (prefers-reduced-motion: reduce) { .s3d-monde { transition: none; } }

/* Tout plan du monde : centré sur l'origine, puis déplacé par style inline. */
.s3d-plan {
  position: absolute; left: 0; top: 0;
  transform-style: preserve-3d;
  backface-visibility: visible;
}

/* Zone cliquable : un vrai bouton, nu, par-dessus sa matière. */
button.s3d-plan {
  border: 0; padding: 0; margin: 0; font: inherit;
  background: transparent; color: inherit; cursor: pointer;
  outline-offset: 3px;
}
button.s3d-plan:focus-visible { outline: 2px solid #9ecbff; }
@media (hover: hover) {
  button.s3d-plan:hover { filter: brightness(1.18); }
}

/* --------------------------------------------------------- Les matières -- */

/* Sol du plateau (conteneur 2D une fois basculé à plat). */
.s3d-sol {
  background: linear-gradient(#5c5568, #453f50);
  box-shadow: inset 0 0 90px rgba(0,0,0,.45);
}
.s3d-sol > * { position: absolute; }

.s3d-tapis {
  background:
    radial-gradient(28% 22% at 28% 62%, rgba(255, 235, 200, .16), transparent 70%),
    radial-gradient(28% 22% at 72% 38%, rgba(255, 235, 200, .13), transparent 70%),
    radial-gradient(75% 60% at 50% 45%, rgba(255, 240, 210, .30), transparent 72%),
    repeating-linear-gradient(90deg, #322f3b 0 118px, #413e4c 118px 120px);
  box-shadow: inset 0 0 40px rgba(0,0,0,.35);
}
.s3d-avantscene {
  background: repeating-linear-gradient(90deg, #8a6d54 0 70px, #9a7d64 70px 72px);
  box-shadow: inset 0 6px 14px rgba(0,0,0,.55);
}
.s3d-lointain { background: #3a3644; }
.s3d-lateral  { background: #5a5368; }

.s3d-cyclo {
  background:
    radial-gradient(90% 130% at 50% 100%, rgba(195, 228, 255, .6), transparent 72%),
    linear-gradient(#3a62a0 0%, #6d9cd4 45%, #ddebfb 100%);
  box-shadow: inset 0 0 60px rgba(0,0,0,.35);
}

.s3d-pendrillon,
.s3d-frise {
  background: repeating-linear-gradient(90deg, #262631 0px, #45455a 16px, #262631 32px);
  box-shadow: inset 0 0 26px rgba(0,0,0,.5);
}
.s3d-frise { background: repeating-linear-gradient(90deg, #222230 0px, #3a3a4c 24px, #222230 48px); }

.s3d-coulisse {
  background: linear-gradient(#3a3648, #241f30);
  box-shadow: inset 0 0 50px rgba(0,0,0,.55);
}

.s3d-rideau {
  background:
    linear-gradient(to bottom, rgba(0,0,0,.28), transparent 25%, transparent 70%, rgba(0,0,0,.38) 96%),
    repeating-linear-gradient(90deg, #8e1f2d 0px, #c94a58 20px, #e06a78 28px, #c94a58 36px, #8e1f2d 56px);
  box-shadow: inset 0 -30px 50px rgba(0,0,0,.45), inset 0 18px 26px rgba(255,255,255,.08);
  border-radius: 0 0 14px 14px;
}
.s3d-manteau {
  background: repeating-linear-gradient(90deg, #6b1420 0 12px, #8e1f2d 12px 26px);
  box-shadow: inset 0 0 24px rgba(0,0,0,.6);
}
.s3d-manteau--bandeau { border-bottom: 3px solid #b9924d; }

.s3d-cadre {
  background: linear-gradient(#231f28, #0f0d14);
  box-shadow: inset 0 0 0 2px rgba(185, 146, 77, .3), inset 0 0 30px rgba(0,0,0,.8);
}

.s3d-lambrequin {
  background: repeating-linear-gradient(90deg, #8e1f2d 0px, #c94a58 22px, #8e1f2d 44px);
  border-bottom: 3px solid #b9924d;
  border-radius: 0 0 45% 45% / 0 0 26px 26px;
  box-shadow: inset 0 -14px 20px rgba(0,0,0,.35);
}

/* Face avant du plateau : la scène est surélevée au-dessus de la salle. */
.s3d-nez { background: linear-gradient(#211d28, #08060c); }

.s3d-perche { background: linear-gradient(#7c7f88, #43454c); border-radius: 4px; }
.s3d-projo {
  background: linear-gradient(#2c2e34, #101115);
  border-radius: 4px 4px 6px 6px;
}
.s3d-rampe {
  background: linear-gradient(#41444d, #14151a);
  border-radius: 4px 4px 0 0;
}
.s3d-rampe::after {
  content: '';
  position: absolute; left: 50%; bottom: 100%;
  width: 320%; height: 1500%;
  transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 100%, rgba(255, 225, 170, .18), transparent 70%);
  pointer-events: none;
}

/* Faisceau doux sous chaque projecteur. */
.s3d-projo::after {
  content: '';
  position: absolute; left: 50%; top: 100%;
  width: 260%; height: 900%;
  transform: translateX(-50%);
  background: linear-gradient(rgba(255, 236, 190, .28), transparent 75%);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  pointer-events: none;
  animation: s3d-scintille 5s ease-in-out infinite;
}
@keyframes s3d-scintille {
  0%, 100% { opacity: 1; }
  50% { opacity: .8; }
}

/* ------------------------------------------------------------- États -- */

.s3d-el--bon      { box-shadow: 0 0 0 3px #57d98f, 0 0 26px rgba(87, 217, 143, .8) !important; }
.s3d-el--mauvais  { box-shadow: 0 0 0 3px #e05b5b, 0 0 26px rgba(224, 91, 91, .8) !important; }
.s3d-el--focus    { box-shadow: 0 0 0 3px #ffd97a, 0 0 26px rgba(255, 217, 122, .75) !important; }
.s3d-el--trouve   { box-shadow: inset 0 0 0 2px rgba(87, 217, 143, .5); }

/* « Voir les zones » : toutes les zones cliquables scintillent un instant. */
.s3d-el--reperes {
  box-shadow: 0 0 0 2px rgba(255, 217, 122, .85), 0 0 16px rgba(255, 217, 122, .45) !important;
  animation: s3d-repere .9s ease-in-out 2;
}
@keyframes s3d-repere {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { .s3d-el--reperes { animation: none; } }

/* --------------------------------------------------------- Interface -- */

.s3d-barre {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  justify-content: space-between; margin: var(--e-2, 1rem) 0;
}
.s3d-vues { display: flex; gap: .5rem; flex-wrap: wrap; }
.s3d-vue {
  font: inherit; font-size: var(--t-14, .9rem);
  padding: .45rem .9rem; border-radius: 999px;
  border: 1px solid var(--line, #ddd); background: var(--paper, #fff);
  color: var(--fg, #111); cursor: pointer;
  transition: border-color .2s, background .2s;
}
.s3d-vue:hover { border-color: var(--fg, #111); }
.s3d-vue[aria-pressed="true"] { background: var(--ink, #050505); color: #fff; border-color: var(--ink, #050505); }
.s3d-aide { font-size: var(--t-14, .9rem); color: var(--fg-dim, #666); margin: 0; }

.s3d-progres { height: 4px; background: var(--line, #ddd); border-radius: 999px; overflow: hidden; margin: 0 0 .7rem; }
.s3d-progres span { display: block; height: 100%; background: var(--ink, #050505); transition: width .35s var(--ease-stage, ease); }
@media (prefers-reduced-motion: reduce) { .s3d-progres span { transition: none; } }

.s3d-consigne {
  border: 1px solid var(--line, #ddd); border-radius: var(--r-carte, 14px);
  padding: var(--e-3, 1.25rem);
  margin-top: var(--e-2, 1rem);
}
.s3d-consigne .jeu__compteur { margin-bottom: .35rem; }
.s3d-cible {
  font-family: var(--titre, serif); font-weight: 600;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem); margin: 0;
}
.s3d-verdict { font-weight: 600; margin: .6rem 0 0; }
.s3d-verdict--ko { color: #a33; }
.s3d-verdict--ok { color: #1d7a4b; }
.s3d-def { color: var(--fg-dim, #666); line-height: 1.55; margin: .35rem 0 0; }

@media (prefers-reduced-motion: reduce) {
  .s3d-projo::after, .s3d-rampe::after { animation: none; }
}