/* La Quête du Cavalier — transitions de chapitre : l'ouverture (ciel du chapitre, carte
   illustrée qui se retourne, bannière à hisser) et le rappel bref d'un chapitre déjà vu.
   Les instants des animations sont ceux de js/ui/interlude.js (TIMING). Les couleurs
   suivent la teinte du chapitre (--chapter-h, fixée par data-chapter, voir base.css). */

/* ---------- Fenêtre plein écran ---------- */

.interlude {
  /* Couleurs dérivées de la teinte du chapitre : déclarées ici, où data-chapter la fixe. */
  --il-accent: hsl(var(--chapter-h) 75% 27%); /* petits textes : contraste d'au moins 4,5:1 */
  --il-bright: hsl(var(--chapter-h) 92% 72%);
  --il-deep: hsl(var(--chapter-h) 64% 36%);
  --il-sky-1: hsl(var(--chapter-h) 92% 82%);
  --il-sky-2: hsl(var(--chapter-h) 62% 54%);
  --il-sky-3: hsl(var(--chapter-h) 58% 29%);
  --il-gold: #e3ad3c;
  --il-gold-light: #fbe3a4;
  --card-w: min(84vw, 336px);
  --mast: clamp(96px, 17vh, 160px);
  --flag-w: min(var(--card-w) * 0.44, var(--mast) * 1.05);
  /* Bannière pliée au pied du mât, presque toute cachée derrière la carte : sa distance au
     sommet, c'est-à-dire toute la course du hissage. */
  --drop: calc(var(--mast) - 28px);
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  background: transparent;
  color: var(--ink);
}

.interlude[open] {
  display: flex;
  flex-direction: column;
}

.interlude::backdrop { background: transparent; }

@media (prefers-color-scheme: dark) {
  .interlude {
    --il-accent: hsl(var(--chapter-h) 80% 70%);
    --il-deep: hsl(var(--chapter-h) 60% 46%);
    --il-sky-1: hsl(var(--chapter-h) 52% 34%);
    --il-sky-2: hsl(var(--chapter-h) 50% 17%);
    --il-sky-3: hsl(var(--chapter-h) 46% 7%);
  }
}

/* Le ciel du chapitre se répand depuis le bouton touché (--ox, --oy). */
.interlude__sky {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(120% 85% at 50% 38%, var(--il-sky-1), var(--il-sky-2) 56%, var(--il-sky-3));
  clip-path: circle(150vmax at var(--ox, 50%) var(--oy, 42%));
}

.interlude.is-playing .interlude__sky { animation: il-sky 0.75s cubic-bezier(0.55, 0, 0.25, 1) both; }

@keyframes il-sky {
  from { clip-path: circle(0 at var(--ox, 50%) var(--oy, 42%)); }
  to { clip-path: circle(150vmax at var(--ox, 50%) var(--oy, 42%)); }
}

/* Rayons de lumière qui tournent lentement derrière la carte. */
.interlude__rays {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 180vmax;
  height: 180vmax;
  margin: -90vmax 0 0 -90vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.17) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 10%, transparent 70%);
  mask: radial-gradient(closest-side, #000 10%, transparent 70%);
  opacity: 0;
}

.interlude.is-playing .interlude__rays { animation: spin 90s linear infinite, il-fade-in 1.4s ease 0.35s both; }

/* Poussières dorées qui montent. */
.interlude__motes {
  position: absolute;
  inset: 0;
}

.interlude__mote {
  position: absolute;
  bottom: -10px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  background: #fff3cf;
  box-shadow: 0 0 10px 2px rgba(255, 226, 150, 0.6);
  opacity: 0;
  animation: il-mote var(--dur) linear var(--delay) infinite;
}

.interlude__mote--round { border-radius: 50%; }

@keyframes il-mote {
  0% { opacity: 0; transform: translate(0, 0) rotate(45deg) scale(0.6); }
  12% { opacity: 0.95; }
  80% { opacity: 0.7; }
  100% { opacity: 0; transform: translate(var(--sway), -105vh) rotate(225deg) scale(1); }
}

/* « Passer » : toujours à portée, en haut à droite. */
.interlude__skip {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 3;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: hsl(var(--chapter-h) 45% 14% / 0.55);
  color: #fff;
  font-weight: 650;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.interlude.is-playing .interlude__skip { animation: il-fade-in 0.4s ease 0.5s both; }
.interlude.is-hoisting .interlude__skip { visibility: hidden; }

/* ---------- Scène : mât, carte, bouton ---------- */

.interlude__stage {
  position: relative;
  display: grid;
  grid-template-areas: "standard" "card" "action";
  justify-items: center;
  margin: auto; /* centrée, ou défilante depuis le haut si l'écran est trop bas */
  padding: max(58px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom));
  perspective: 1400px;
}

.interlude__standard {
  grid-area: standard;
  position: relative;
  width: var(--card-w);
  height: var(--mast);
}

/* Le mât se dresse derrière la carte, où il est planté. */
.interlude__mast {
  position: absolute;
  left: calc(50% - 3px);
  bottom: -30px;
  width: 6px;
  height: calc(100% + 30px);
  border-radius: 3px;
  background: linear-gradient(90deg, #7a5a2e, #e7cd94 45%, #6e4f25);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transform-origin: 50% 100%;
}

.interlude__finial {
  position: absolute;
  left: calc(50% - 8px);
  top: -13px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d0, var(--il-gold) 48%, #8a5a06);
  box-shadow: 0 0 14px rgba(255, 214, 120, 0.8);
}

.interlude.is-playing .interlude__mast { animation: il-mast 0.55s var(--ease) 1.5s both; }
.interlude.is-playing .interlude__finial { animation: pop 0.45s var(--ease-bounce) 1.95s both; }

@keyframes il-mast {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* La bannière : pliée au pied du mât, puis hissée en trois tractions et déployée au sommet. */
.interlude__flag {
  position: absolute;
  left: calc(50% + 2px);
  top: 0;
  width: var(--flag-w);
  aspect-ratio: 120 / 84;
  transform: translateY(var(--drop)) scaleX(0.2);
  transform-origin: 0 50%;
  cursor: pointer;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.3));
}

.interlude.is-playing .interlude__flag { animation: il-fade-in 0.35s ease 1.9s both; }
.interlude.is-hoisting .interlude__flag { animation: il-hoist 1.05s linear both; }
.interlude.is-hoisted .interlude__flag { animation: il-unfurl 0.85s var(--ease-bounce) both; }

@keyframes il-hoist {
  0% { transform: translateY(var(--drop)) scaleX(0.2); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  24% { transform: translateY(calc(var(--drop) * 0.6)) scaleX(0.25); }
  31% { transform: translateY(calc(var(--drop) * 0.65)) scaleX(0.25); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  55% { transform: translateY(calc(var(--drop) * 0.25)) scaleX(0.3); }
  63% { transform: translateY(calc(var(--drop) * 0.3)) scaleX(0.3); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  88%, 100% { transform: translateY(0) scaleX(0.36); }
}

@keyframes il-unfurl {
  from { transform: translateY(0) scaleX(0.36); }
  to { transform: translateY(0) scaleX(1); }
}

.standard-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.st-cloth-1 { stop-color: hsl(var(--chapter-h) 72% 43%); }
.st-cloth-2 { stop-color: hsl(var(--chapter-h) 72% 25%); }

@media (prefers-color-scheme: dark) {
  .st-cloth-1 { stop-color: hsl(var(--chapter-h) 72% 54%); }
  .st-cloth-2 { stop-color: hsl(var(--chapter-h) 66% 36%); }
}

.st-hem {
  fill: none;
  stroke: var(--il-gold);
  stroke-width: 3;
  stroke-linejoin: round;
}

.st-emblem { color: var(--il-gold-light); }

/* Étincelles au sommet du mât, quand la bannière y arrive. */
.interlude__burst {
  position: absolute;
  left: calc(50% + var(--flag-w) * 0.45);
  top: calc(var(--flag-w) * 0.3);
  width: 0;
  height: 0;
}

.interlude__spark {
  position: absolute;
  width: 9px;
  height: 5px;
  border-radius: 2px;
  background: var(--c);
  box-shadow: 0 0 6px rgba(255, 230, 160, 0.7);
  opacity: 0;
  animation: il-spark 0.95s cubic-bezier(0.2, 0.7, 0.3, 1) var(--delay) both;
}

.interlude__spark--round {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

@keyframes il-spark {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.4); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rot)); }
}

/* ---------- La carte : tombée face cachée, elle se retourne ---------- */

/* Deux étages : la carte tombe en place (opacité, position), puis se retourne. Une opacité
   inférieure à 1 aplatirait la 3D : le retournement vit donc sur l'élément intérieur. */
.interlude__card {
  grid-area: card;
  position: relative;
  z-index: 1;
  width: var(--card-w);
  perspective: 1400px;
}

.interlude.is-playing .interlude__card { animation: il-card-in 0.6s var(--ease) 0.2s both; }

@keyframes il-card-in {
  from { opacity: 0; transform: translateY(80px) scale(0.7) rotate(-7deg); }
  to { opacity: 1; transform: none; }
}

.interlude__flip {
  position: relative;
  transform-style: preserve-3d;
}

.interlude.is-playing .interlude__flip { animation: il-flip 1.15s var(--ease) 0.65s both; }

@keyframes il-flip {
  0% { transform: rotateY(180deg); }
  18% { transform: translateY(-8px) scale(1.03) rotateY(180deg); }
  70% { transform: rotateY(-12deg); }
  100% { transform: none; }
}

.interlude__face {
  border-radius: 24px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.interlude__face--front {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 16px 16px 18px;
  overflow: hidden;
  border: 2px solid hsl(var(--chapter-h) 50% 55% / 0.5);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: 0 26px 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 6px hsl(var(--chapter-h) 80% 94% / 0.3);
  text-align: center;
  transition: box-shadow 0.5s var(--ease);
}

/* Liseré doré intérieur, et reflet qui balaie la carte une fois retournée. */
.interlude__face--front::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(214, 160, 50, 0.55);
  border-radius: 18px;
  pointer-events: none;
}

.interlude__face--front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, 0.55) 50%, transparent 64%);
  transform: translateX(-130%);
  pointer-events: none;
}

.interlude.is-playing .interlude__face--front::after { animation: il-shine 0.95s ease-in-out 1.85s both; }

@keyframes il-shine {
  from { transform: translateX(-130%); }
  to { transform: translateX(130%); }
}

/* Dos de la carte : damier en biais aux couleurs du chapitre, sceau doré à l'emblème. */
.interlude__face--back {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  border: 2px solid var(--il-gold);
  /* Treillis de fils d'or sur l'étoffe du chapitre, éclairé en son centre. */
  background:
    radial-gradient(circle at 50% 44%, hsl(var(--chapter-h) 78% 62% / 0.9), transparent 60%),
    repeating-linear-gradient(45deg, transparent 0 15px, rgba(255, 214, 130, 0.3) 15px 16.5px),
    repeating-linear-gradient(-45deg, transparent 0 15px, rgba(255, 214, 130, 0.3) 15px 16.5px),
    linear-gradient(180deg, hsl(var(--chapter-h) 60% 38%), hsl(var(--chapter-h) 62% 28%));
  box-shadow: inset 0 0 0 7px hsl(var(--chapter-h) 55% 26%), inset 0 0 0 8px rgba(227, 173, 60, 0.75),
    0 26px 60px -20px rgba(0, 0, 0, 0.6);
  transform: rotateY(180deg);
}

.interlude__seal {
  display: grid;
  place-items: center;
  width: calc(var(--card-w) * 0.4);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c8, var(--il-gold) 55%, #9a6508);
  color: hsl(var(--chapter-h) 55% 24%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), inset 0 0 0 4px rgba(255, 255, 255, 0.35);
}

.interlude__seal-art {
  width: 60%;
  height: 60%;
}

.interlude__seal-number {
  color: var(--il-gold-light);
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Face : numéro, scène sous une arche, titre, fleuron, règle, contenu du chapitre. */
.interlude__number {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 4px 0 0;
  color: var(--il-accent);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.interlude__number::before,
.interlude__number::after {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--il-gold);
  transform: rotate(45deg);
}

.interlude__window {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 48% 48% 12px 12px / 38% 38% 12px 12px;
  background: hsl(var(--chapter-h) 60% 80%);
}

.interlude__window::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(214, 160, 50, 0.8), inset 0 -24px 30px -24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.interlude__title {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 7.4vw, 2.1rem);
  font-weight: 600;
  line-height: 1.1;
}

.interlude__flourish {
  width: 62%;
  height: 12px;
  overflow: visible;
}

.interlude__flourish-line {
  fill: none;
  stroke: var(--il-gold);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 72;
}

.interlude__flourish-gem { fill: var(--il-gold); }

.interlude__teaser {
  max-width: 32ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.45;
}

.interlude__span {
  margin: 0;
  color: var(--il-accent);
  font-size: 0.78rem;
  font-weight: 650;
}

/* Le texte de la face apparaît une fois la carte retournée. */
.interlude.is-playing .interlude__number { animation: il-rise 0.5s var(--ease) 1.55s both; }
.interlude.is-playing .interlude__title { animation: il-title 0.6s var(--ease) 1.7s both; }
.interlude.is-playing .interlude__flourish { animation: il-fade-in 0.3s ease 1.9s both; }
.interlude.is-playing .interlude__flourish-line { animation: il-draw 0.6s var(--ease) 1.9s both; }
.interlude.is-playing .interlude__teaser { animation: il-rise 0.55s var(--ease) 2.05s both; }
.interlude.is-playing .interlude__span { animation: il-rise 0.55s var(--ease) 2.2s both; }

@keyframes il-title {
  from { opacity: 0; clip-path: inset(0 50% 0 50%); letter-spacing: 0.08em; }
  to { opacity: 1; clip-path: inset(0 0 0 0); letter-spacing: normal; }
}

@keyframes il-draw {
  from { stroke-dashoffset: 72; }
  to { stroke-dashoffset: 0; }
}

@keyframes il-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes il-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Bannière au sommet : la carte s'illumine. */
.interlude.is-hoisted .interlude__face--front {
  box-shadow: 0 26px 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 3px var(--il-gold), 0 0 48px 8px rgba(255, 214, 120, 0.55);
}

/* ---------- « Hisser la bannière » ---------- */

.interlude__hoist {
  grid-area: action;
  margin-top: 20px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 1.02rem;
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(255, 223, 150, 0.4);
  opacity: 0;
  transform: translateY(14px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.45s var(--ease-bounce);
}

.interlude__hoist .icon {
  width: 20px;
  height: 20px;
}

.interlude.is-ready .interlude__hoist {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  animation: il-beckon 2.2s ease-in-out 0.8s infinite;
}

.interlude.is-hoisting .interlude__hoist {
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  pointer-events: none;
  animation: none;
}

@keyframes il-beckon {
  0%, 100% { box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(255, 223, 150, 0.45); }
  50% { box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.55), 0 0 0 12px rgba(255, 223, 150, 0); }
}

/* Focus au clavier : un anneau blanc, lisible sur le ciel et sur l'or du bouton. */
.interlude__hoist:focus-visible,
.interlude__skip:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Toucher le fond pendant que la carte se dévoile : tout s'achève d'un coup (pas le hissage). */
.interlude.is-instant:not(.is-hoisting) .il-in,
.interlude.is-instant:not(.is-hoisting) .il-in::after,
.interlude.is-instant:not(.is-hoisting) .interlude__flourish-line,
.interlude.is-instant:not(.is-hoisting) .sc-sunrise {
  animation-delay: 0s !important;
  animation-duration: 1ms !important;
}

/* ---------- Sortie : la fenêtre s'efface sur le niveau ---------- */

.interlude.is-leaving .interlude__stage { animation: il-stage-out 0.65s var(--ease) both; }
.interlude.is-leaving .interlude__sky { animation: il-fade-out 0.65s ease both; }
.interlude.is-leaving .interlude__skip { animation: il-fade-out 0.3s ease both; }

@keyframes il-stage-out {
  to { opacity: 0; transform: translateY(-30px) scale(1.04); }
}

@keyframes il-fade-out {
  to { opacity: 0; }
}

/* ---------- Scènes illustrées (js/ui/chapter-art.js) ---------- */

.scene {
  display: block;
  width: 100%;
  height: 100%;
  --sky-1: hsl(var(--chapter-h) 78% 88%);
  --sky-2: hsl(calc(var(--chapter-h) - 10) 90% 80%);
  --sun: hsl(calc(var(--chapter-h) + 10) 100% 72%);
  --halo: hsl(calc(var(--chapter-h) + 10) 100% 86%);
  --far: hsl(calc(var(--chapter-h) - 8) 30% 72%);
  --mid: hsl(calc(var(--chapter-h) + 30) 28% 54%);
  --near: hsl(calc(var(--chapter-h) + 40) 30% 34%);
  --wall: hsl(calc(var(--chapter-h) - 8) 18% 62%);
  --wall-dark: hsl(calc(var(--chapter-h) - 8) 24% 34%);
}

.sc-sky-1 { stop-color: var(--sky-1); }
.sc-sky-2 { stop-color: var(--sky-2); }
.sc-halo-1 { stop-color: var(--halo); stop-opacity: 0.95; }
.sc-halo-2 { stop-color: var(--halo); stop-opacity: 0; }
.sc-sun { fill: var(--sun); }
.sc-far { fill: var(--far); }
.sc-mid { fill: var(--mid); }
.sc-near { fill: var(--near); }
.sc-cloud { fill: rgba(255, 255, 255, 0.78); }
.sc-castle path,
.sc-tower path { fill: var(--wall); }
.sc-gate,
.sc-window { fill: var(--wall-dark); }

.sc-pole {
  fill: none;
  stroke: var(--wall-dark);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.sc-pennant {
  fill: hsl(var(--chapter-h) 72% 46%);
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: flag 2.4s ease-in-out infinite;
}

.sc-pennant--dark { fill: #17131d; }

.sc-bird {
  fill: none;
  stroke: hsl(var(--chapter-h) 30% 30%);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.sc-road,
.sc-road-dash {
  fill: none;
  stroke-width: 12;
  stroke-linecap: butt;
}

.sc-road { stroke: #efe4ce; }
.sc-road-dash { stroke: #d8c39c; stroke-dasharray: 7 7; }

/* Mouvements des scènes : nuages, oiseaux, soleil levant, cavalier qui bondit. */
.sc-drift { animation: sc-drift 14s ease-in-out infinite alternate; }
.sc-drift--slow { animation-duration: 22s; animation-direction: alternate-reverse; }
.sc-birds { animation: sc-birds 16s linear infinite; }
.sc-sunrise { animation: sc-sunrise 2.4s var(--ease) 1.3s both; }

.sc-hop {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sc-hop 2.8s var(--ease) 1.6s infinite;
}

.sc-hop--left { animation-name: sc-hop-left; }

@keyframes sc-drift {
  from { transform: translateX(-10px); }
  to { transform: translateX(14px); }
}

@keyframes sc-birds {
  0% { transform: translate(-60px, 6px); }
  50% { transform: translate(40px, -4px); }
  100% { transform: translate(150px, 4px); }
}

@keyframes sc-sunrise {
  from { transform: translateY(22px); opacity: 0.6; }
  to { transform: none; opacity: 1; }
}

@keyframes sc-hop {
  0%, 52%, 100% { transform: none; }
  60% { transform: scale(1.06, 0.9); }
  72% { transform: translateY(-15px) rotate(6deg); }
  84% { transform: translateY(0) scale(1.07, 0.9); }
  92% { transform: none; }
}

@keyframes sc-hop-left {
  0%, 52%, 100% { transform: none; }
  60% { transform: scale(1.06, 0.9); }
  72% { transform: translateY(-15px) rotate(-6deg); }
  84% { transform: translateY(0) scale(1.07, 0.9); }
  92% { transform: none; }
}

/* II · Les jalons : lagon, tour de l'horloge, pierres numérotées. */
.scene--2 {
  --sky-1: hsl(172 58% 88%);
  --sky-2: hsl(190 70% 80%);
  --sun: hsl(52 100% 82%);
  --halo: hsl(52 100% 92%);
  --far: hsl(170 26% 64%);
  --wall: hsl(34 24% 74%);
  --wall-dark: hsl(30 30% 32%);
}

.sc-tower .sc-roof { fill: hsl(12 50% 46%); }

.sc-dial {
  fill: #fbf5e6;
  stroke: hsl(32 40% 38%);
  stroke-width: 1.6;
}

.sc-ticks {
  fill: none;
  stroke: #3a3140;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.sc-hand path {
  stroke: #2a2230;
  stroke-width: 1.9;
  stroke-linecap: round;
}

.sc-hand { transform-origin: 216px 84px; }
.sc-hand--minute { animation: spin 6s linear infinite; }
.sc-hand--hour { animation: spin 72s linear infinite; }
.sc-pin { fill: #2a2230; }
.sc-water { fill: hsl(188 52% 52%); }

.sc-waves path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 1.6;
  stroke-linecap: round;
  animation: sc-wave 3.2s ease-in-out infinite alternate;
}

.sc-waves path:nth-child(2n) { animation-delay: -1.6s; }

@keyframes sc-wave {
  from { transform: translateX(-4px); }
  to { transform: translateX(5px); }
}

.sc-causeway {
  fill: none;
  stroke: hsl(34 22% 68%);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 11 3;
}

.sc-stone { fill: hsl(200 30% 25% / 0.3); }

.sc-milestone-ring {
  fill: #fffbf4;
  stroke: #d99a1e;
  stroke-width: 2.4;
}

.sc-milestone-num {
  fill: #1b2130;
  font-family: var(--font-display);
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}

/* Les jalons s'allument l'un après l'autre, dans l'ordre du passage. */
.sc-milestone {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: sc-milestone 2.4s ease-in-out infinite;
  animation-delay: calc(1.8s + var(--i) * 0.55s);
}

@keyframes sc-milestone {
  0%, 34%, 100% { transform: none; }
  14% { transform: translateY(-3px) scale(1.14); }
}

.sc-milestone .sc-milestone-ring { animation: sc-milestone-ring 2.4s ease-in-out infinite; animation-delay: inherit; }

@keyframes sc-milestone-ring {
  0%, 34%, 100% { fill: #fffbf4; }
  14% { fill: #efbc4c; }
}

/* III · La garde noire : crépuscule, forteresse, sentinelles, cases menacées. */
.scene--3 {
  --sky-1: hsl(292 28% 42%);
  --sky-2: hsl(14 80% 72%);
  --sun: hsl(28 100% 80%);
  --halo: hsl(24 100% 76%);
  --far: hsl(330 22% 36%);
  --mid: hsl(338 20% 26%);
  --near: hsl(330 24% 13%);
}

.sc-fortress path { fill: hsl(300 16% 16%); }

.sc-slit {
  fill: none;
  stroke: hsl(38 100% 68%);
  stroke-width: 2.2;
  stroke-linecap: round;
  animation: sc-flicker 2.6s ease-in-out infinite;
}

.sc-birds--crows .sc-bird { stroke: #1a1420; }

.sc-tile { fill: hsl(34 30% 70%); }
.sc-tile--dark { fill: hsl(32 26% 56%); }

.sc-threat {
  fill: url(#kq-hatch-3);
  stroke: hsl(2 72% 52% / 0.8);
  stroke-width: 1.2;
  animation: sc-threat 2.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.14s);
}

.sc-hatch { fill: hsl(2 76% 48% / 0.78); }

@keyframes sc-threat {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes sc-flicker {
  0%, 100% { opacity: 1; }
  40% { opacity: 0.55; }
  55% { opacity: 0.9; }
}

/* IV · Les rondes : nuit, lune, étoiles ; la ronde et sa silhouette sur le rempart. */
.scene--4 {
  --sky-1: hsl(248 48% 13%);
  --sky-2: hsl(266 36% 36%);
  --halo: hsl(50 100% 88%);
  --far: hsl(256 26% 25%);
  --mid: hsl(256 22% 14%);
  --near: hsl(256 26% 9%);
}

.sc-star {
  fill: #fff8e6;
  animation: sc-twinkle 3s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.37s);
}

@keyframes sc-twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.sc-moon .sc-halo-1,
.scene--4 .sc-halo-1 { stop-opacity: 0.45; }
.sc-moon-disc { fill: hsl(48 88% 86%); }
.sc-rampart path { fill: hsl(256 22% 19%); }

.sc-route {
  fill: none;
  stroke: hsl(2 80% 68%);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 0.1 7;
  animation: sc-march 1.4s linear infinite;
}

@keyframes sc-march {
  to { stroke-dashoffset: -7.1; }
}

.sc-patrol { animation: sc-patrol 6s var(--ease) infinite; }
.sc-patrol--ghost { opacity: 0.38; animation-delay: -1s; }

.sc-lantern-1 { stop-color: hsl(44 100% 72%); stop-opacity: 0.75; }
.sc-lantern-2 { stop-color: hsl(44 100% 60%); stop-opacity: 0; }

.sc-lantern {
  fill: url(#kq-lantern-4);
  animation: sc-flicker 1.9s ease-in-out infinite;
}

/* Un pas par seconde, aller et retour sur le chemin de ronde ; la silhouette a un pas d'avance. */
@keyframes sc-patrol {
  0%, 13% { transform: translateX(0); }
  16.7%, 30% { transform: translateX(40px); }
  33.3%, 46.7% { transform: translateX(80px); }
  50%, 63.3% { transform: translateX(120px); }
  66.7%, 80% { transform: translateX(80px); }
  83.3%, 96.7% { transform: translateX(40px); }
  100% { transform: translateX(0); }
}

@media (prefers-color-scheme: dark) {
  .interlude__window .scene { filter: brightness(0.86) saturate(1.05); }
}

/* ---------- Rappel bref d'un chapitre déjà vu ---------- */

.chapter-flash {
  --il-gold: #e3ad3c;
  position: fixed;
  z-index: 30;
  top: env(safe-area-inset-top);
  left: 0;
  right: 0;
  width: min(60vw, 232px);
  margin: 0 auto;
  pointer-events: none;
  transform-origin: 50% 0;
  animation: flash-drop 2.1s var(--ease) both;
}

.chapter-flash__rod {
  position: relative;
  z-index: 1;
  display: block;
  height: 10px;
  margin: 0 -14px;
  border-radius: 5px;
  background: linear-gradient(#f6dc9c, #b7852a);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.chapter-flash__rod::before,
.chapter-flash__rod::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d0, var(--il-gold) 50%, #8a5a06);
}

.chapter-flash__rod::before { left: -8px; }
.chapter-flash__rod::after { right: -8px; }

.chapter-flash__cloth {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: -3px 6px 0;
  padding: 18px 12px 34px;
  color: #fff8e6;
  text-align: center;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.35));
}

.chapter-flash__shape {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.chapter-flash__shape path {
  fill: hsl(var(--chapter-h) 62% 38%);
  stroke: var(--il-gold);
  stroke-width: 3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.chapter-flash__emblem {
  width: 46px;
  height: 46px;
  color: #fbe3a4;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.chapter-flash__number {
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.9;
}

.chapter-flash__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.15;
}

@keyframes flash-drop {
  0% { transform: translateY(-110%); }
  18% { transform: translateY(0) rotate(0deg); }
  27% { transform: rotate(2.4deg); }
  37% { transform: rotate(-1.6deg); }
  47% { transform: rotate(0.8deg); }
  56%, 80% { transform: rotate(0deg); }
  100% { transform: translateY(-115%); }
}

/* ---------- Écrans bas, paysage ---------- */

@media (max-height: 720px) {
  .interlude {
    --card-w: min(80vw, 300px);
    --mast: clamp(72px, 13vh, 100px);
  }

  .interlude__stage { padding-top: max(52px, env(safe-area-inset-top)); }
  .interlude__face--front { gap: 7px; padding: 12px 12px 14px; }
  .interlude__teaser { font-size: 0.88rem; }
  .interlude__hoist { margin-top: 14px; min-height: 48px; }
}

@media (max-height: 600px) {
  .interlude { --card-w: min(76vw, 264px); }
  .interlude__span { display: none; }
}

/* Téléphone à l'horizontale : la carte se couche, scène à gauche, texte à droite ; le mât
   se dresse à côté d'elle. */
@media (orientation: landscape) and (max-height: 540px) {
  .interlude {
    --card-w: min(64vw, 540px);
    --flag-w: 92px;
  }

  .interlude__stage {
    grid-template-areas: "standard card" "standard action";
    grid-template-columns: auto auto;
    column-gap: 18px;
    padding: max(12px, env(safe-area-inset-top)) 64px max(12px, env(safe-area-inset-bottom));
  }

  /* Le mât prend la hauteur de la carte : la bannière se mesure sur lui (unités cqh). */
  .interlude__standard {
    width: calc(var(--flag-w) + 12px);
    height: auto;
    align-self: stretch;
    container-type: size;
  }

  .interlude__mast {
    left: 4px;
    bottom: 0;
    height: calc(100% - 16px);
  }

  .interlude__finial { left: -1px; top: 4px; }
  .interlude__flag { left: 10px; top: 22px; --drop: calc(100cqh - var(--flag-w) * 0.7 - 30px); }
  .interlude__burst { left: calc(10px + var(--flag-w) * 0.45); top: 50px; }

  .interlude__face--front {
    display: grid;
    grid-template-columns: 46% 1fr;
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 16px;
    row-gap: 6px;
    align-items: center;
    padding: 12px;
  }

  .interlude__window {
    grid-column: 1;
    grid-row: 1 / -1;
    height: 100%;
    aspect-ratio: auto;
    min-height: 150px;
  }

  .interlude__number,
  .interlude__title,
  .interlude__flourish,
  .interlude__teaser,
  .interlude__span { grid-column: 2; justify-self: center; }

  .interlude__title { font-size: 1.5rem; }
  .interlude__teaser { font-size: 0.84rem; }
  .interlude__span { display: block; }
  .interlude__hoist { margin-top: 10px; min-height: 46px; }
}