/* cine.css — Cinématiques (timeline DOM, overlay vidéo, écran Cinémathèque / H5P). Toujours en nuit : c'est du cinéma. */

.cine { position: relative; aspect-ratio: 16 / 9; width: 100%; background: #04090e; overflow: hidden; isolation: isolate; color: #fff; font-family: var(--font-body, 'Lexend', sans-serif); }
.cine__stage { position: absolute; inset: 0; overflow: hidden; }
.cine__shot { position: absolute; inset: -6%; transform-origin: 50% 50%; will-change: transform, opacity; }
.cine__decor, .cine__decor .decor { position: absolute; inset: 0; width: 100%; height: 100%; }
.cine__decor[data-tension="1"] { filter: saturate(.85) brightness(.9); }
.cine__decor[data-tension="2"] { filter: saturate(.6) brightness(.72) contrast(1.08); }
.cine__chars { position: absolute; inset: 0; }
.cine__char { position: absolute; width: 11%; transform: translateX(-50%) scale(var(--s, 1)); transform-origin: 50% 100%; opacity: 0; filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)); }
.cine__char .av { width: 100%; height: auto; display: block; }
.cine__bubble { position: absolute; bottom: 104%; left: 50%; max-width: min(260px, 48vw); transform: translateX(-50%); background: rgba(255,255,255,.94); color: #0b1a1c; border-radius: 14px; padding: .5em .9em; font-size: clamp(11px, 1.5vw, 18px); line-height: 1.3; text-align: center; white-space: normal; overflow-wrap: anywhere; box-shadow: 0 10px 24px -10px rgba(0,0,0,.7); }
.cine__bubble::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.cine__pills { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); width: min(46%, 420px); display: flex; flex-direction: column; gap: 3%; }
.cine__pill { opacity: 0; background: rgba(226,238,255,.94); color: #0b1420; border-radius: 14px; padding: .55em .9em; font-size: clamp(11px, 1.6vw, 19px); display: flex; flex-direction: column; gap: 2px; box-shadow: 0 14px 30px -14px rgba(0,0,0,.8); transform-origin: 50% 0; }
.cine__pill-who { font-size: .72em; font-weight: 700; color: #1f6e68; }
.cine__pill--me { align-self: flex-end; background: #1f6e68; color: #eafffb; }
.cine__pill--me .cine__pill-who { color: #bafff6; }
.cine__vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(0,0,0,.72) 100%); pointer-events: none; }
.cine[data-tension="2"] .cine__vignette { background: radial-gradient(110% 80% at 50% 45%, transparent 35%, rgba(0,0,0,.86) 100%); }
.cine__grain { position: absolute; inset: 0; background-image: var(--grain); opacity: .09; mix-blend-mode: overlay; pointer-events: none; }
.cine__bars::before, .cine__bars::after { content: ''; position: absolute; left: 0; right: 0; height: 7%; background: #000; z-index: 3; }
.cine__bars::before { top: 0; } .cine__bars::after { bottom: 0; }
.cine__title { position: absolute; left: 6%; bottom: 16%; z-index: 4; display: flex; flex-direction: column; gap: .2em; opacity: 0; text-shadow: 0 4px 30px rgba(0,0,0,.8); }
.cine__eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: clamp(10px, 1.4vw, 15px); color: #4FC3B8; font-weight: 700; }
.cine__name { font-family: var(--font-display, 'Fraunces', Georgia, serif); font-weight: 900; font-size: clamp(22px, 4.6vw, 60px); line-height: 1; letter-spacing: -0.02em; }
.cine__sub { position: absolute; left: 50%; bottom: 9.5%; transform: translateX(-50%); z-index: 4; max-width: 84%; text-align: center; font-size: clamp(13px, 2.3vw, 28px); line-height: 1.3; font-weight: 500; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.9), 0 0 24px rgba(0,0,0,.8); opacity: 0; }
.cine__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 5; background: rgba(255,255,255,.12); }
.cine__progress i { display: block; height: 100%; width: 0; background: #00A99D; }

/* Overlay en jeu */
.cine-overlay { position: fixed; inset: 0; z-index: 90; width: 100%; max-width: 100%; min-height: 100vh; min-height: 100dvh; background: #000; display: grid; place-items: center; opacity: 0; overflow: hidden; transition: opacity 420ms var(--tr, ease); }
.cine-overlay.is-in { opacity: 1; }
.cine-overlay.is-leaving { opacity: 0; }
.cine-overlay__frame { width: min(100vw, calc(100vh * 16 / 9)); aspect-ratio: 16 / 9; position: relative; background: #000; }
.cine-overlay__video { width: 100%; height: 100%; display: block; object-fit: cover; }
.cine-overlay__dom { position: absolute; inset: 0; }
.cine-overlay__skip { position: absolute; right: 22px; bottom: 22px; z-index: 5; max-width: calc(100vw - 24px); color: #fff; border-color: rgba(255,255,255,.35); background: rgba(0,0,0,.45); backdrop-filter: blur(8px); }
.cine-overlay__skip kbd { font-family: inherit; font-size: .8em; opacity: .7; margin-left: 6px; border: 1px solid rgba(255,255,255,.4); border-radius: 5px; padding: 1px 6px; }
.cine-overlay.has-interaction .cine-overlay__frame { filter: brightness(.48) saturate(.72) blur(1px); transform: scale(1.015); transition: filter 300ms ease, transform 500ms ease; }
.cine-overlay.has-interaction .cine-overlay__skip { opacity: .72; }
.cine-interaction {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: clamp(18px, 5vh, 56px);
  width: min(860px, calc(100vw - 32px));
  max-height: min(78vh, 680px);
  overflow-y: auto;
  padding: clamp(20px, 3vw, 34px);
  color: #eaf7f5;
  background: linear-gradient(145deg, rgba(7,20,23,.96), rgba(12,40,42,.94));
  border: 1px solid rgba(79,195,184,.5);
  border-radius: 26px;
  box-shadow: 0 32px 100px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter: blur(24px) saturate(1.2);
  opacity: 0;
  transform: translate(-50%, 22px) scale(.985);
  transition: opacity 280ms ease, transform 320ms var(--tr, ease);
}
.cine-interaction.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.cine-interaction__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: #8ee9df;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.cine-interaction__pulse { width: 10px; height: 10px; border-radius: 50%; background: #e07a5f; box-shadow: 0 0 0 7px rgba(224,122,95,.14), 0 0 22px rgba(224,122,95,.7); }
.cine-interaction h2 { margin: 0 0 7px; color: #fff; font-size: clamp(1.65rem, 3vw, 2.65rem); }
.cine-interaction__context { max-width: 68ch; margin: 0 0 18px; color: #c6dcda; font-size: 1rem; }
.cine-interaction__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cine-interaction__choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 12px 15px;
  color: #eefaf8;
  font: inherit;
  font-size: 1rem;
  text-align: left;
  line-height: 1.4;
  overflow-wrap: anywhere;
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(143,210,203,.24);
  border-radius: 15px;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.cine-interaction__choice span { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 10px; color: #032826; background: #31cabc; font-weight: 800; }
.cine-interaction__choice:hover,
.cine-interaction__choice:focus-visible { transform: translateY(-2px); border-color: #4fc3b8; background: rgba(79,195,184,.14); }
.cine-interaction__choice.is-selected { border-color: #4fc3b8; background: rgba(0,169,157,.24); }
.cine-interaction__choice:disabled:not(.is-selected) { opacity: .42; }
.cine-interaction__hint { margin: 14px 0 0; color: #8faeab; font-size: .82rem; }
@media (max-width: 650px) {
  .cine-overlay__skip { top: 12px; right: 12px; bottom: auto; }
  .cine-interaction { bottom: 12px; width: calc(100vw - 20px); max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); padding: 20px 16px; border-radius: 20px; }
  .cine-interaction__choices { grid-template-columns: 1fr; }
  .cine-interaction__context { font-size: 1rem; }
  .cine__title { right: 6%; }
  .cine__name { overflow-wrap: anywhere; }
  .cine__sub { max-width: 90%; font-size: clamp(.8125rem, 4vw, 1.05rem); }
  .cine__bubble { max-width: 42vw; }
}

/* Scène narrative propre à chaque carte : 4 actes puis décision */
.cine-overlay--story {
  --story-accent: #4fc3b8;
  --story-warm: #e8be69;
  overflow: hidden;
  place-items: stretch;
  color: #fff;
  background: #02090b;
}
.cine-overlay--story[data-role="harcele"] { --story-accent: #68d8ff; --story-warm: #a9c9ff; }
.cine-overlay--story[data-role="harceleur"] { --story-accent: #ff947a; --story-warm: #ffd36e; }
.cine-overlay--story[data-role="temoin"] { --story-accent: #61dfbd; --story-warm: #b6ef74; }
.cine-overlay--story[data-role="parent"] { --story-accent: #d9adff; --story-warm: #ffc98f; }
.cine-overlay--story[data-role="enseignant"] { --story-accent: #f6ce67; --story-warm: #8ee4dc; }
.story-cine__media,
.story-cine__media video,
.story-cine__media img,
.story-cine__scrim,
.story-cine__grain { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-cine__media { overflow: hidden; background: #061416; }
.story-cine__media video,
.story-cine__media img {
  display: block;
  object-fit: cover;
  filter: brightness(.48) saturate(.7) contrast(1.08);
  transform: scale(1.035);
  animation: storyCamera 20s cubic-bezier(.2,.65,.28,1) both;
}
.story-cine__media img[hidden] { display: none; }
.story-cine__scrim {
  background:
    radial-gradient(ellipse at 68% 42%, transparent 0 20%, rgba(1,8,10,.18) 58%, rgba(1,8,10,.72) 100%),
    linear-gradient(90deg, rgba(1,8,10,.96) 0%, rgba(1,8,10,.68) 44%, rgba(1,8,10,.18) 80%),
    linear-gradient(to top, rgba(1,8,10,.92), transparent 40%);
}
.story-cine__grain {
  pointer-events: none;
  opacity: .12;
  background-image: var(--grain);
  mix-blend-mode: soft-light;
  animation: storyGrain .28s steps(2) infinite;
}
.cine-overlay--story::before,
.cine-overlay--story::after {
  content: '';
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  height: clamp(18px, 4.4vh, 56px);
  pointer-events: none;
  background: #010607;
  transition: transform 700ms cubic-bezier(.2,.75,.2,1);
}
.cine-overlay--story::before { top: 0; transform: translateY(-100%); }
.cine-overlay--story::after { bottom: 0; transform: translateY(100%); }
.cine-overlay--story.is-in::before,
.cine-overlay--story.is-in::after { transform: none; }
@keyframes storyCamera {
  0% { transform: scale(1.035) translate3d(0, 0, 0); }
  45% { transform: scale(1.11) translate3d(-1.4%, -.8%, 0); }
  100% { transform: scale(1.17) translate3d(1.2%, -.4%, 0); }
}
@keyframes storyGrain {
  0% { transform: translate(0); }
  25% { transform: translate(-.7%, .6%); }
  50% { transform: translate(.5%, -.7%); }
  75% { transform: translate(.8%, .3%); }
}
.story-cine__hud {
  position: absolute;
  z-index: 5;
  top: clamp(28px, 6.5vh, 76px);
  left: clamp(22px, 5vw, 76px);
  right: clamp(22px, 5vw, 76px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  color: rgba(235,250,247,.72);
  font-size: clamp(.72rem, 1vw, .9rem);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.story-cine__hud::after {
  content: '';
  grid-column: 1 / -1;
  height: 1px;
  margin-top: 2px;
  background: linear-gradient(90deg, var(--story-accent), rgba(255,255,255,.13) 32%, rgba(255,255,255,.13) 68%, var(--story-warm));
}
.story-cine__hud span:nth-child(2) { text-align: center; color: var(--story-accent); }
.story-cine__hud span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.story-cine__beats {
  position: absolute;
  z-index: 4;
  inset: clamp(88px, 15vh, 150px) clamp(22px, 7vw, 110px) clamp(96px, 17vh, 150px);
  display: grid;
  align-items: center;
}
.story-beat {
  position: absolute;
  width: min(820px, 78vw);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 22px, 0);
  transition: opacity 520ms ease, transform 700ms cubic-bezier(.2,.76,.2,1), visibility 0s linear 700ms;
}
.story-beat.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 90ms, 0s, 0s;
}
.story-beat > p:first-child,
.story-beat--opening > p {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  color: var(--story-accent);
  font-size: clamp(.76rem, 1.2vw, .95rem);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.story-beat > p:first-child::before,
.story-beat--opening > p::before { content: ''; width: 34px; height: 3px; border-radius: 999px; background: currentColor; }
.story-beat--opening h2 {
  max-width: 12ch;
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(3.2rem, 8vw, 8.8rem);
  font-weight: 900;
  line-height: .86;
  letter-spacing: -.055em;
  text-wrap: balance;
  text-shadow: 0 10px 50px rgba(0,0,0,.64);
}
.story-beat--opening > span {
  display: block;
  margin-top: 24px;
  color: rgba(232,246,244,.74);
  font-size: clamp(1rem, 1.7vw, 1.3rem);
}
.story-beat--situation blockquote {
  max-width: 35ch;
  margin: 0;
  padding: 0;
  color: #fff;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2rem, 4.4vw, 4.4rem);
  font-weight: 720;
  line-height: 1.06;
  letter-spacing: -.035em;
  text-shadow: 0 6px 36px rgba(0,0,0,.8);
}
.story-beat--voices { width: min(980px, 86vw); }
.story-beat--voices > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2.2vw, 26px); }
.story-voice,
.story-perspective {
  min-height: 140px;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid rgba(255,255,255,.19);
  border-radius: 4px 24px 24px 24px;
  background: linear-gradient(145deg, rgba(9,31,34,.91), rgba(5,17,20,.74));
  box-shadow: 0 28px 70px rgba(0,0,0,.46);
  backdrop-filter: blur(18px) saturate(1.08);
}
.story-voice--right,
.story-perspective--right { margin-top: clamp(18px, 4vh, 42px); border-radius: 24px 4px 24px 24px; }
.story-voice span,
.story-perspective span {
  display: block;
  margin-bottom: 9px;
  color: var(--story-accent);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.story-voice blockquote,
.story-perspective p { margin: 0; color: #f0faf8; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.58; }
.story-beat--dual .story-perspective p { font-size: clamp(.96rem, 1.32vw, 1.12rem); }
.story-beat--stakes h3 {
  max-width: 25ch;
  margin: 0 0 20px;
  color: #fff;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2.1rem, 4.8vw, 4.9rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.story-beat--stakes > span {
  display: block;
  max-width: 62ch;
  padding-left: 18px;
  color: rgba(235,250,247,.78);
  border-left: 3px solid var(--story-warm);
  font-size: clamp(1rem, 1.45vw, 1.2rem);
  line-height: 1.55;
}
.story-cine__timeline {
  position: absolute;
  z-index: 5;
  left: clamp(22px, 5vw, 76px);
  right: clamp(22px, 5vw, 76px);
  bottom: clamp(27px, 6.2vh, 70px);
  display: grid;
  grid-template-columns: minmax(190px, .7fr) minmax(180px, 1fr) auto;
  gap: 20px;
  align-items: center;
  color: rgba(236,250,248,.7);
  font-size: clamp(.7rem, .95vw, .84rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.story-cine__timeline > div { height: 3px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.17); }
.story-cine__timeline i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--story-accent), var(--story-warm)); box-shadow: 0 0 16px var(--story-accent); }
.story-cine__timeline time { min-width: 104px; text-align: right; font-variant-numeric: tabular-nums; }
.story-cine__skip {
  position: absolute;
  z-index: 7;
  right: clamp(22px, 5vw, 76px);
  top: clamp(76px, 11.5vh, 118px);
  min-height: 38px;
  padding: 7px 12px;
  font: inherit;
  font-size: .875rem;
  line-height: 1.3;
  color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(3,14,16,.52);
  backdrop-filter: blur(12px);
}
.story-cine__skip kbd { margin-left: 6px; padding: 1px 6px; color: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.25); border-radius: 5px; font: inherit; font-size: .72em; }
.story-cine__skip:hover,
.story-cine__skip:focus-visible { color: #fff; border-color: var(--story-accent); background: rgba(3,14,16,.8); }
.cine-overlay--story.has-interaction .story-cine__media { filter: blur(2px); transform: scale(1.02); }
.cine-overlay--story.has-interaction .story-cine__beats { opacity: .08; transition: opacity 300ms ease; }
.cine-overlay--story.has-interaction .story-cine__hud { opacity: .25; }
.cine-overlay--story.has-interaction .story-cine__timeline { opacity: .34; }
.cine-overlay--story .cine-interaction--story { bottom: clamp(22px, 6vh, 68px); }
.cine-interaction__preview {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 11px 14px;
  border: 1px solid rgba(143,210,203,.24);
  border-radius: 15px;
  background: rgba(255,255,255,.06);
}
.cine-interaction__preview span { display: grid; place-items: center; width: 34px; height: 34px; color: #032826; border-radius: 10px; background: #31cabc; font-weight: 900; }
.cine-interaction__preview p { margin: 0; color: #eefaf8; line-height: 1.42; }
.cine-interaction__vote { width: 100%; min-height: 52px; margin-top: 14px; color: #032826; background: #35cfc0; }

@media (max-width: 760px) {
  .story-cine__hud { top: 26px; left: 18px; right: 18px; grid-template-columns: minmax(0, 1fr) auto; font-size: .75rem; letter-spacing: .06em; }
  .story-cine__hud span { min-width: 0; overflow-wrap: anywhere; }
  .story-cine__hud span:nth-child(2) { text-align: right; }
  .story-cine__hud span:nth-child(3) { display: none; }
  .story-cine__hud::after { margin-top: -2px; }
  .story-cine__beats { inset: 92px 16px 116px; align-items: center; }
  .story-beat { width: 100%; max-height: calc(100vh - 220px); max-height: calc(100dvh - 220px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .story-beat--opening h2 { max-width: 100%; font-size: clamp(2.25rem, 11vw, 4.2rem); line-height: .94; overflow-wrap: anywhere; }
  .story-beat--opening > span { margin-top: 16px; }
  .story-beat--situation blockquote { max-width: 100%; font-size: clamp(1.7rem, 7vw, 2.8rem); overflow-wrap: anywhere; }
  .story-beat--voices { width: 100%; }
  .story-beat--voices > div { grid-template-columns: 1fr; gap: 9px; }
  .story-voice,
  .story-perspective { min-height: 0; padding: 15px 16px; border-radius: 3px 18px 18px 18px; }
  .story-voice--right,
  .story-perspective--right { margin-top: 0; border-radius: 18px 3px 18px 18px; }
  .story-voice blockquote,
  .story-perspective p,
  .story-beat--dual .story-perspective p { font-size: 1rem; line-height: 1.48; }
  .story-beat--stakes h3 { font-size: clamp(1.75rem, 7.6vw, 3rem); overflow-wrap: anywhere; }
  .story-beat--stakes > span { font-size: 1rem; line-height: 1.48; }
  .story-cine__timeline { left: 16px; right: 16px; bottom: 22px; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; font-size: .75rem; letter-spacing: .045em; }
  .story-cine__timeline > span { grid-column: 1 / -1; }
  .story-cine__timeline > span { min-width: 0; overflow-wrap: anywhere; }
  .story-cine__timeline time { min-width: 80px; }
  .story-cine__skip { top: 70px; right: 16px; max-width: calc(100vw - 32px); font: inherit; font-size: .875rem; line-height: 1.25; }
  .cine-overlay--story .cine-interaction--story { bottom: 10px; width: calc(100vw - 20px); max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
}

@media (max-width: 430px) {
  .story-cine__hud { grid-template-columns: minmax(0, 1fr); }
  .story-cine__hud span:nth-child(2) { display: none; }
  .story-cine__beats { inset-inline: 12px; }
  .story-cine__timeline { left: 12px; right: 12px; }
  .story-cine__skip kbd,
  .turn-reveal__skip kbd,
  .cine-overlay__skip kbd { display: none; }
  .cine-interaction__head { align-items: flex-start; letter-spacing: .07em; }
  .cine-interaction h2 { font-size: clamp(1.5rem, 7.5vw, 2rem); overflow-wrap: anywhere; }
  .cine-interaction__choice { align-items: flex-start; padding: 12px; }
}

@media (max-height: 620px) and (min-width: 761px) {
  .story-cine__hud { top: 24px; }
  .story-cine__skip { top: 64px; }
  .story-cine__beats { inset-block: 76px 70px; }
  .story-beat--opening h2 { font-size: clamp(3rem, 7vw, 5.8rem); }
  .story-beat--situation blockquote { font-size: clamp(2rem, 4vw, 3.6rem); }
  .story-voice,
  .story-perspective { min-height: 100px; padding: 16px 20px; }
  .story-cine__timeline { bottom: 18px; }
}

/* Passage cinématique : le dé sélectionne réellement une carte du paquet */
.cine-overlay--draw { overflow: hidden; background: #02090b; }
.turn-reveal__backdrop { position: absolute; inset: 0; }
.turn-reveal__backdrop img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.25) saturate(.55) blur(2px); transform: scale(1.07); }
.turn-reveal__backdrop div { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, rgba(0,169,157,.17), transparent 30rem), linear-gradient(to bottom, rgba(2,9,11,.36), #02090b 92%); }
.turn-reveal__skip {
  position: absolute;
  z-index: 5;
  top: 18px;
  right: 20px;
  min-height: 40px;
  padding: 7px 12px;
  font: inherit;
  font-size: .875rem;
  line-height: 1.3;
  color: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
}
.turn-reveal__skip kbd { margin-left: 5px; padding: 1px 5px; border: 1px solid rgba(255,255,255,.25); border-radius: 5px; font: inherit; font-size: .72em; }
.turn-reveal__stage {
  position: relative;
  z-index: 2;
  width: min(960px, calc(100vw - 32px));
  margin: auto;
  color: #eaf4f2;
}
.turn-reveal__topline {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  color: #8fd6cf;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.turn-reveal__topline span { color: #819996; font-weight: 500; letter-spacing: .04em; }
.turn-reveal__mechanics { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(18px, 4vw, 52px); align-items: center; }
.turn-die {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 30px;
  background: rgba(7,20,23,.74);
  box-shadow: 0 30px 80px rgba(0,0,0,.48), 0 1px 0 rgba(255,255,255,.06) inset;
  backdrop-filter: blur(18px);
}
.turn-die__label { color: #9cb8b4; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.turn-die__viewport {
  --die-size: 118px;
  --die-depth: 59px;
  position: relative;
  width: var(--die-size);
  height: var(--die-size);
  display: block;
  margin: 16px 0;
  perspective: 720px;
}
.turn-die__cube {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  transition: transform .58s cubic-bezier(.2,.76,.24,1.15);
}
.turn-die__side {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 6px;
  padding: 17px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 25px;
  background: linear-gradient(145deg, #d7fffa, #47d4c7);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.72), inset 0 -9px 18px rgba(6,76,70,.2);
  backface-visibility: hidden;
}
.turn-die__side b {
  grid-row: var(--pip-row);
  grid-column: var(--pip-column);
  align-self: center;
  justify-self: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #063531;
  box-shadow: inset 0 2px 2px rgba(0,0,0,.38), 0 1px 0 rgba(255,255,255,.36);
}
.turn-die__side--1 { transform: translateZ(var(--die-depth)); }
.turn-die__side--2 { transform: rotateY(90deg) translateZ(var(--die-depth)); }
.turn-die__side--3 { transform: rotateY(180deg) translateZ(var(--die-depth)); }
.turn-die__side--4 { transform: rotateY(-90deg) translateZ(var(--die-depth)); }
.turn-die__side--5 { transform: rotateX(90deg) translateZ(var(--die-depth)); }
.turn-die__side--6 { transform: rotateX(-90deg) translateZ(var(--die-depth)); }
.turn-die__cube[data-roll="1"] { transform: rotateX(-8deg) rotateY(8deg); }
.turn-die__cube[data-roll="2"] { transform: rotateX(-8deg) rotateY(-82deg); }
.turn-die__cube[data-roll="3"] { transform: rotateX(-8deg) rotateY(-172deg); }
.turn-die__cube[data-roll="4"] { transform: rotateX(-8deg) rotateY(98deg); }
.turn-die__cube[data-roll="5"] { transform: rotateX(-98deg) rotateY(8deg); }
.turn-die__cube[data-roll="6"] { transform: rotateX(82deg) rotateY(8deg); }
.turn-die.is-rolling .turn-die__cube { animation: dieThrow 1s cubic-bezier(.18,.72,.22,1) both; }
.turn-die.is-landed .turn-die__viewport { animation: dieImpact .55s cubic-bezier(.22,.8,.25,1.24) both; filter: drop-shadow(0 24px 24px rgba(0,169,157,.38)); }
@keyframes dieThrow {
  0% { transform: translate3d(-34px, 36px, -80px) rotateX(12deg) rotateY(-24deg) rotateZ(-8deg) scale(.72); }
  48% { transform: translate3d(12px, -42px, 60px) rotateX(410deg) rotateY(520deg) rotateZ(190deg) scale(1.08); }
  100% { transform: translate3d(0, 0, 0) rotateX(760deg) rotateY(940deg) rotateZ(360deg) scale(1); }
}
@keyframes dieImpact { 0% { transform: translateY(-18px) scale(1.08); } 55% { transform: translateY(5px) scale(.97); } 100% { transform: none; } }
.turn-die__result { color: #9cb8b4; text-align: center; font-size: .78rem; }
.turn-card { min-height: 360px; perspective: 1200px; }
.turn-card__inner { position: relative; width: 100%; min-height: 360px; transform-style: preserve-3d; transition: transform .88s cubic-bezier(.2,.72,.22,1); }
.turn-card.is-revealed .turn-card__inner { transform: rotateY(180deg); }
.turn-card__side {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border: 1px solid rgba(79,195,184,.4);
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 36px 100px rgba(0,0,0,.58);
}
.turn-card__back {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: #dbfffb;
  background:
    linear-gradient(135deg, transparent 46%, rgba(79,195,184,.12) 46% 54%, transparent 54%) 0 0 / 34px 34px,
    linear-gradient(145deg, #0d3838, #061a1d);
}
.turn-card__back::before { content: ''; position: absolute; inset: 18px; border: 1px solid rgba(79,195,184,.3); border-radius: 20px; }
.turn-card__back span { font-family: var(--font-display); font-size: clamp(3rem, 7vw, 6rem); font-weight: 900; letter-spacing: -.05em; }
.turn-card__back i { color: #8fd6cf; font-style: normal; font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.turn-card__front {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(28px, 5vw, 56px);
  color: #eaf4f2;
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 85% 12%, rgba(201,161,74,.22), transparent 15rem),
    linear-gradient(145deg, rgba(14,57,58,.98), rgba(4,20,23,.99));
}
.turn-card__front::before { content: ''; position: absolute; top: 0; left: 0; width: 38%; height: 6px; border-radius: 0 0 999px; background: linear-gradient(90deg, #00a99d, #c9a14a); }
.turn-card__eyebrow { margin-bottom: 12px; color: #75ddd3; font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.turn-card__front h2 { max-width: 11ch; margin: 0 0 12px; color: #fff; font-size: clamp(2.3rem, 5vw, 5rem); line-height: .93; }
.turn-card__front p { max-width: 44ch; margin: 0; color: #9cb8b4; }
.turn-reveal__enter {
  display: flex;
  width: fit-content;
  min-height: 52px;
  margin: 24px 0 0 auto;
  padding-inline: 1.6rem;
  color: #04211f;
  border-color: rgba(255,255,255,.34);
  background: #38d2c4;
  box-shadow: 0 16px 38px -18px #00a99d;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, filter .2s ease;
}
.turn-reveal__enter.is-ready { opacity: 1; transform: none; pointer-events: auto; }
.turn-reveal__enter:hover { filter: brightness(1.08); }

@media (max-width: 680px) {
  .turn-reveal__stage { align-self: end; width: calc(100vw - 16px); max-height: calc(100vh - 8px); max-height: calc(100dvh - 8px); overflow-y: auto; padding: 58px 8px 8px; }
  .turn-reveal__topline { margin-bottom: 10px; }
  .turn-reveal__topline span { display: none; }
  .turn-reveal__mechanics { grid-template-columns: 1fr; gap: 12px; }
  .turn-die { min-height: 124px; flex-direction: row; flex-wrap: wrap; gap: 10px 14px; border-radius: 20px; padding: 12px 14px; }
  .turn-die__label { max-width: 72px; font-size: .75rem; }
  .turn-die__viewport { --die-size: 74px; --die-depth: 37px; flex: none; margin: 0; }
  .turn-die__side { gap: 3px; padding: 10px; border-radius: 17px; }
  .turn-die__side b { width: 9px; height: 9px; }
  .turn-die__result { flex: 1; text-align: left; }
  .turn-card, .turn-card__inner { min-height: 300px; }
  .turn-card__side { border-radius: 22px; }
  .turn-card__front { padding: 28px 24px; }
  .turn-card__front h2 { max-width: 100%; font-size: clamp(2rem, 10vw, 3.3rem); overflow-wrap: anywhere; }
  .turn-reveal__enter { width: 100%; margin-top: 12px; }
}

@media (max-width: 360px) {
  .turn-die__label { max-width: none; flex: 1 1 calc(100% - 92px); }
  .turn-die__result { flex-basis: 100%; text-align: center; }
  .turn-card__front { padding: 24px 18px; }
  .turn-card__back span { font-size: 2.6rem; }
}

/* Conséquence en micro-cinématique : image en mouvement + résultat du choix */
.cine-overlay--consequence {
  place-items: stretch;
  background: #02090b;
  overflow: hidden;
}
.cine-consequence__media { position: absolute; inset: 0; overflow: hidden; }
.cine-consequence__media video,
.cine-consequence__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.48) saturate(.68) contrast(1.08); transform: scale(1.04); }
.cine-consequence__media img { display: block; }
.cine-consequence__media img[hidden] { display: none; }
.cine-consequence__wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2,9,11,.95) 0%, rgba(2,9,11,.74) 52%, rgba(2,9,11,.34) 100%),
    linear-gradient(to top, rgba(2,9,11,.94), transparent 62%);
}
.cine-overlay--consequence[data-tone="positive"] .cine-consequence__wash { box-shadow: inset 8px 0 0 #35cfc0; }
.cine-overlay--consequence[data-tone="mixed"] .cine-consequence__wash { box-shadow: inset 8px 0 0 #c9a14a; }
.cine-overlay--consequence[data-tone="negative"] .cine-consequence__wash { box-shadow: inset 8px 0 0 #e07a5f; }
.cine-consequence__panel {
  position: relative;
  z-index: 2;
  align-self: center;
  width: min(720px, calc(100vw - 48px));
  margin-left: clamp(28px, 8vw, 120px);
  padding: clamp(26px, 4vw, 48px);
  color: #eaf4f2;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(7,20,23,.86), rgba(7,20,23,.58));
  box-shadow: 0 34px 100px rgba(0,0,0,.55);
  backdrop-filter: blur(18px) saturate(1.15);
  animation: consequenceEnter 620ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes consequenceEnter { from { opacity: 0; transform: translateX(-24px) scale(.985); } to { opacity: 1; transform: none; } }
.cine-consequence__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: #a9c7c3;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cine-consequence__kicker span { width: 30px; height: 3px; border-radius: 999px; background: #4fc3b8; }
[data-tone="mixed"] .cine-consequence__kicker span { background: #c9a14a; }
[data-tone="negative"] .cine-consequence__kicker span { background: #e07a5f; }
.cine-consequence__panel h2 { margin: 0 0 12px; color: #fff; font-size: clamp(2rem, 4.5vw, 4.3rem); line-height: .98; }
.cine-consequence__choice { margin-bottom: 12px; color: #a9c7c3; font-size: .9rem; }
.cine-consequence__choice strong { color: #fff; }
.cine-consequence__text { max-width: 60ch; margin-bottom: 18px; color: #e4f0ee; font-size: clamp(1rem, 1.1vw, 1.15rem); line-height: 1.6; }
.cine-consequence__deltas { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 24px; }
.cine-consequence__delta { padding: 5px 10px; border: 1px solid transparent; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.cine-consequence__delta--pos { color: #9bf4ea; border-color: rgba(79,195,184,.3); background: rgba(0,169,157,.18); }
.cine-consequence__delta--neg { color: #ffc1ae; border-color: rgba(224,122,95,.34); background: rgba(224,122,95,.17); }
.cine-consequence__continue {
  min-height: 50px;
  color: #032826;
  border: 1px solid rgba(255,255,255,.28);
  background: #35cfc0;
  box-shadow: 0 14px 34px -18px #35cfc0;
}
[data-tone="mixed"] .cine-consequence__continue { color: #241a05; background: #d9b45d; box-shadow: 0 14px 34px -18px #d9b45d; }
[data-tone="negative"] .cine-consequence__continue { color: #2a120b; background: #ef967b; box-shadow: 0 14px 34px -18px #ef967b; }
.cine-consequence__continue:hover { filter: brightness(1.08); transform: translateY(-1px); }

@media (max-width: 700px) {
  .cine-consequence__media video,
  .cine-consequence__media img { filter: brightness(.34) saturate(.6); }
  .cine-consequence__media { inset: 0; }
  .cine-consequence__wash { background: linear-gradient(to top, rgba(2,9,11,.98) 12%, rgba(2,9,11,.72) 72%, rgba(2,9,11,.5)); }
  .cine-consequence__panel { align-self: end; width: calc(100vw - 20px); max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); overflow-y: auto; margin: 10px; padding: 22px 17px; border-radius: 22px; }
  .cine-consequence__panel h2 { font-size: clamp(1.85rem, 9vw, 3rem); overflow-wrap: anywhere; }
  .cine-consequence__continue { width: 100%; white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .cine-overlay { transition: none; } }
@media (prefers-reduced-motion: reduce) {
  .story-cine__media video,
  .story-cine__media img,
  .story-cine__grain { animation: none; }
  .story-beat,
  .cine-interaction { transition: none; }
}

/* Écran Cinémathèque / H5P */
.cinema-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; margin: 18px 0 28px; }
.cine-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 46px -36px rgba(0,0,0,.85); transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr); }
.cine-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 24px 54px -34px var(--accent); }
.cine-card__thumb { position: relative; aspect-ratio: 16 / 9; background: var(--night-800); overflow: hidden; }
.cine-card__thumb .loc-thumb { width: 100%; height: 100%; display: block; }
.cine-card__play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(transparent 40%, rgba(0,0,0,.7)); color: #fff; border: 0; cursor: pointer; padding: 0; }
.cine-card__play svg { width: 54px; height: 54px; filter: drop-shadow(0 8px 16px rgba(0,0,0,.6)); transition: transform var(--tr); }
.cine-card__play:hover svg { transform: scale(1.1); }
.cine-card__dur { position: absolute; right: 10px; top: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.cine-card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.cine-card__eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--accent-soft); font-weight: 700; }
.cine-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--heading); }
.cine-card__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.h5p-panel { margin-top: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: 16px; }
.h5p-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.h5p-panel__pick { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.h5p-frame { min-height: 200px; border-radius: var(--radius-sm); overflow: hidden; background: #fff; color: #222; }
.h5p-frame:empty { display: grid; place-items: center; color: var(--muted); }
.offline-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding: 12px 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); color: var(--body); }
.offline-bar__prog { flex: 1; min-width: 120px; height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.offline-bar__prog i { display: block; height: 100%; width: 0; background: var(--glow); transition: width 200ms linear; }