/* ===========================================================
   LE THÉÂTRE DES RÔLES — rideaux rouges, projecteur, machine à scénarios
   =========================================================== */
body.roles {
  --theme: #b3122e;
  --theme-2: #ff5a5f;
  --or: #f2c46b;
  --panneau: rgba(30, 6, 8, 0.88);
  background: #120304;
}
.roles .marque h1 { font-family: 'Playfair Display SC', var(--serif); font-size: clamp(2rem, 9vw, 3rem); }
.roles .marque h1 em { font-style: normal; color: var(--or); text-shadow: 0 0 20px rgba(242, 196, 107, 0.5); }
.masques { font-size: 3.4rem; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6)); animation: balance 4s ease-in-out infinite; }
@keyframes balance { 50% { transform: rotate(-8deg); } }

/* ---------- Le théâtre ---------- */
.theatre { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(600px 500px at 50% 45%, #3a0a10, #120304 75%); }
.rideau-cote {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18vw;
  max-width: 150px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0 5px, rgba(255, 120, 120, 0.12) 12px, rgba(0, 0, 0, 0.4) 22px),
    linear-gradient(180deg, #a3121f, #6a0a14 70%, #3a0509);
  box-shadow: inset -20px 0 40px rgba(0, 0, 0, 0.5);
  transition: transform 1.2s cubic-bezier(.6, 0, .3, 1);
}
.rideau-cote.gauche { left: 0; border-radius: 0 0 60% 0 / 0 0 10% 0; }
.rideau-cote.droite { right: 0; border-radius: 0 0 0 60% / 0 0 0 10%; transform: scaleX(-1); }
.lambrequin {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 70px;
  z-index: 2;
  background:
    radial-gradient(60px 40px at 30px 0, transparent 60%, transparent 61%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0 4px, transparent 4px 30px),
    linear-gradient(180deg, #8c0f1c, #5a0710);
  border-bottom: 6px solid var(--or);
  -webkit-mask-image: radial-gradient(40px 30px at 50% 100%, transparent 98%, #000 100%);
  -webkit-mask-size: 80px 100%;
  mask-image: radial-gradient(40px 30px at 50% 100%, transparent 98%, #000 100%);
  mask-size: 80px 100%;
}
.projecteur { position: absolute; left: 50%; top: -10vh; width: 80vmin; height: 110vh; transform: translateX(-50%); background: linear-gradient(180deg, rgba(255, 230, 180, 0.22), rgba(255, 230, 180, 0) 85%); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); filter: blur(4px); animation: projecteur 6s ease-in-out infinite alternate; }
@keyframes projecteur { to { opacity: 0.7; } }
.planches { position: absolute; left: 0; right: 0; bottom: 0; height: 18vh; background: repeating-linear-gradient(90deg, #3a1d0e 0 46px, #2a140a 46px 48px), linear-gradient(180deg, #4a2612, #1a0b05); transform: perspective(400px) rotateX(35deg); transform-origin: 50% 100%; opacity: 0.8; }

/* ---------- Machine ---------- */
.machine-ecran, .scene-ecran { gap: 10px; }
.machine { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 0 2vw; }
.ligne { display: flex; flex-direction: column; gap: 4px; }
.ligne-titre { font-family: 'Playfair Display SC', serif; font-size: 0.78rem; color: var(--or); letter-spacing: 0.08em; padding-left: 6px; }
.fenetre {
  position: relative;
  height: clamp(54px, 10.5dvh, 84px);
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff9ec, #f2e2c4 50%, #fff9ec);
  border: 3px solid var(--or);
  box-shadow: 0 0 0 3px #5a0710, 0 10px 24px rgba(0, 0, 0, 0.5), inset 0 8px 14px rgba(0, 0, 0, 0.25), inset 0 -8px 14px rgba(0, 0, 0, 0.25);
}
.rouleau { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.case {
  height: calc(clamp(54px, 10.5dvh, 84px) - 6px);
  display: grid;
  place-items: center;
  padding: 4px 12px;
  text-align: center;
  color: #3a0a10;
  font-weight: 700;
  font-size: clamp(0.82rem, min(3.8vw, 2.1dvh), 1rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.ligne.arretee .fenetre { animation: tilt 0.3s ease; }
@keyframes tilt { 40% { transform: scale(1.03); box-shadow: 0 0 0 3px #5a0710, 0 0 30px var(--or), inset 0 8px 14px rgba(0, 0, 0, 0.25); } }
.actions-machine { display: flex; gap: 10px; flex: none; }
.actions-machine .btn { flex: 1; }
.actions-machine #relancer { flex: 0 0 auto; }
#jouer { background: linear-gradient(180deg, #ffe08a, #e0a52c); color: #3a0a10; box-shadow: 0 5px 0 #8a5a10, 0 12px 26px rgba(242, 196, 107, 0.35); }

/* ---------- Scène ---------- */
.scene { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 6px; height: clamp(130px, 27dvh, 220px); flex: none; }
.acteur { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; min-width: 0; }
.acteur .perso { height: 78%; aspect-ratio: 100 / 130; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6)); }
.role { margin-top: 4px; padding: 4px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; text-align: center; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(242, 196, 107, 0.5); color: #ffe7c0; max-width: 100%; overflow-wrap: anywhere; }
.chrono-scene { position: relative; width: clamp(84px, 18dvh, 130px); align-self: center; }
.chrono-scene svg { width: 100%; display: block; transform: rotate(-90deg); }
.chrono-scene circle { fill: rgba(0, 0, 0, 0.35); stroke-width: 7; }
.chrono-scene .piste { stroke: rgba(242, 196, 107, 0.2); }
.chrono-scene .reste { fill: none; stroke: var(--or); stroke-linecap: round; stroke-dasharray: 100 100; filter: drop-shadow(0 0 6px var(--or)); }
.chrono-scene b { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Playfair Display SC', serif; font-size: clamp(1.1rem, 3.8dvh, 1.7rem); color: #fff; font-variant-numeric: tabular-nums; }
.script { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 20px; background: rgba(255, 249, 236, 0.95); color: #3a0a10; box-shadow: 0 0 0 3px var(--or), 0 14px 30px rgba(0, 0, 0, 0.5); }
.replique { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: clamp(1.15rem, 5vw, 1.4rem); line-height: 1.25; }
.replique b { font-style: normal; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: #b3122e; display: block; margin-bottom: 4px; }
.situation-txt { margin: 0; font-size: 0.95rem; line-height: 1.45; }
.twist-annonce { padding: 10px 12px; border-radius: 14px; background: #3a0a10; color: #fff; animation: twist 0.6s cubic-bezier(.2, 1.4, .4, 1); }
.twist-annonce span { font-family: 'Playfair Display SC', serif; color: var(--or); font-size: 0.9rem; }
.twist-annonce p { margin: 4px 0 0; font-size: 0.95rem; line-height: 1.4; }
@keyframes twist { from { transform: scale(0.6) rotate(-4deg); opacity: 0; } }
#rideau { flex: none; }

@media (prefers-reduced-motion: reduce) {
  .masques, .projecteur { animation: none; }
}