.sucrette-oracle{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:auto;
  padding:110px max(6vw,calc((100vw - 1180px)/2)) 0;
  text-align:center;
}
.oracle-scene{
  order:1;
  align-self:center;
  width:min(520px,82vw);
  height:600px;
  margin:0 auto;
}
.oracle-scene img{max-height:585px}
.oracle-table{height:155px}
.crystal-glow{bottom:165px}
.oracle-copy{
  order:2;
  width:min(900px,100%);
  padding:65px 0 95px;
  text-align:center;
}
.oracle-copy .back-link{margin-bottom:28px}
.oracle-copy h1{max-width:900px;margin:12px auto 25px}
.oracle-copy>p:last-of-type{max-width:760px;margin:0 auto}

.synopsis-section{
  position:relative;
  grid-template-columns:.36fr 1fr;
  align-items:center;
  gap:55px;
  background:linear-gradient(135deg,#fff2c7 0%,#fffaf0 48%,#eaf5ff 100%);
  border-top:9px solid var(--mister-gold);
  border-bottom:9px solid var(--mister-blue);
}
.synopsis-copy{
  position:relative;
  padding:46px 52px;
  border:2px solid rgba(8,75,155,.14);
  border-radius:28px;
  background:rgba(255,255,255,.9);
  box-shadow:0 25px 60px rgba(4,41,88,.13);
}
.synopsis-copy:before{
  content:"«";
  position:absolute;
  top:-42px;
  right:28px;
  color:rgba(211,38,47,.12);
  font:700 10rem/1 "Playfair Display",serif;
}
.synopsis-copy .eyebrow{
  color:var(--mister-red);
  font-size:.9rem;
  letter-spacing:.16em;
}
.synopsis-copy h2{
  margin:.1em 0 .05em;
  color:var(--mister-red);
  font-size:clamp(3rem,5vw,5.7rem);
  line-height:.95;
}
.synopsis-copy h3{
  margin:18px 0 22px;
  color:var(--mister-blue-dark);
  font-size:clamp(1.55rem,2.4vw,2.35rem);
}
.synopsis-copy p:not(.eyebrow){font-size:1.16rem;line-height:1.82}

@media(max-width:1000px){
  .sucrette-oracle{padding-top:105px}
  .oracle-scene{width:min(470px,88vw);height:540px}
  .oracle-scene img{max-height:525px}
  .oracle-copy{padding-top:55px}
  .synopsis-section{grid-template-columns:.28fr 1fr;gap:35px}
  .synopsis-copy{padding:38px}
}
@media(max-width:620px){
  .sucrette-oracle{padding:100px 20px 0}
  .oracle-scene{width:94vw;height:455px}
  .oracle-scene img{max-height:445px}
  .oracle-table{height:120px}
  .crystal-glow{bottom:125px}
  .oracle-copy{padding:48px 0 70px}
  .oracle-copy h1{font-size:2.65rem}
  .synopsis-section{grid-template-columns:1fr;padding:70px 20px}
  .synopsis-figure{display:none}
  .synopsis-copy{padding:32px 24px}
  .synopsis-copy:before{top:-25px;font-size:7rem}
}

/* Chaque pose occupe exactement tout le cadre : aucune image voisine ne peut apparaître. */
.figure{
  width:248px;
  max-width:100%;
  margin-inline:auto;
  background-repeat:no-repeat;
  background-position:0 center;
  background-size:800% 100%;
}
.figure.sprite-active{
  background-image:var(--sprite-image);
}
.figure.sprite-active img{
  opacity:0;
}
.figure.sprite-playing{
  animation:spriteFramesClean 2s steps(7,end) forwards;
}
.figure.sprite-finished{background-position:100% center}
@keyframes spriteFramesClean{
  from{background-position:0 center}
  to{background-position:100% center}
}
.show-credits{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin:46px auto 0;
}
.show-credits p{
  min-width:260px;
  margin:0;
  padding:17px 26px;
  border:1px solid #dbe6f1;
  border-radius:18px;
  background:#fff;
  text-align:center;
  box-shadow:0 12px 32px rgba(4,41,88,.07);
}
.show-credits span,
.show-credits strong{display:block}
.show-credits span{
  color:#67788d;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.show-credits strong{
  margin-top:5px;
  color:var(--mister-blue-dark);
  font:700 1.2rem "Fredoka",sans-serif;
}
@media(max-width:620px){
  .figure{width:225px}
  .show-credits p{width:100%;min-width:0}
}
@media(prefers-reduced-motion:reduce){
  .figure.sprite-playing{animation:none}
}